运行环境

• 浏览器就能够经过访问连接来获得页面的内容，经过绘制和渲染，显示出页面的最终的样子
• 知识点：页面加载过程、性能优化、安全性

一、页面加载过程

• 知识点：加载资源的形式、加载一个资源的过程、浏览器渲染页面的过程

（1）、加载资源的形式

• 输入url(或跳转页面)加载html
• http://www.baidu.com
• 加载html的静态资源
• <script src="./jquery.js"></script>

(2)、加载资源的过程

• 浏览器根据DWS服务器获得域名的iP地址，向这个IP的机器发送http请求，服务器收到，处理并返回http请求，浏览器获得返回内容

（3）、浏览器渲染页面的过程

• 根据HTML结构生成DOM Tree
• 根据css生成cssOM
• 将DOM和cssOM 整合造成RenderTree(渲染树)
• 根据RenderTree开始渲染和展现
• 遇到<script>时，会执行并阻塞渲染

window.onload和DOMContentLoaded

window.addEventListener('load',function(){
//页面的所有资源加载完才执行，包括图片视频等
})
document.addEventListener('DOMContentLoaded',function(){
//DOM渲染完便可，此时图片、视频还可能没有加载完
})

二、性能优化

（1）、原则

• 多使用内存，缓存或者其余方法
• 减小CDN计算，减小网络

（2）、从哪入手

• 加载资源和静态资源
• 页面渲染

（3）、加载资源优化

• 静态资源的压缩合并
• 静态资源缓存
• 使用CDN让资源加载更快
• 使用SSR后端渲染，数据直接输出到HTML中

（4）、渲染优化

• css放前面，js放后面
• 懒加载（图片懒加载，下拉加载更多）
• 减小DOM查询，对DOM查询作缓存
• 减小DOM操做，多个操做尽可能合并在一块儿执行
• 事件节流
• 尽早执行操做（如DOMContentLoaded)

(5)、缓存

• 经过链接名称控制缓存 <script src="abc_1.js"></script>
• 只有内容改变的时候，连接名称才会改变<script src="abc_2.js"></script>

(6)、使用SSR后端渲染

• 如今vue、React提出了这样的概念
• 其实jsp、php、asp都属于后端渲染

（6）、懒加载

<img id="img1" src="preview.png" data-realsrc="abc.png" />//data-realsrc随便写的名字
var img1 = document.getElementById('img1');
img1.src=img1.getAttribute('data-realsrc")

(7)、缓存DOM查询

//未缓存DOM查询
var i ;
for(i =0;i<document.getElementsByTagName('p').length;i++){
    //todo
}
// 缓存DOM查询
var pList = document.getElementsByTagName('p');
var i ;
for(i=0;i<pList.length;i++){
    //todo
}

(8)、事件节流

var textarea =document.getElementById('text');
var timeoutId;
textarea.addEventListener('keyup',function(){
    if(timeoutId){
        clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(function(){
        //触发change事件
    },100)
})

（9）、合并DOM插入

var listNode = document.getELementById('list');
    // 要插入10个li标签
    var frag = document.createDocumentFragment();
    var x,li;
    for(x =0;x<10;x++){
        li = document.createElement('li');
        li.innerHTML = 'List item'+ x;
        frag.appendChild(li);
    }
    listNode.appendChild(frag);

三、安全性

• 知识点：xss跨域请求攻击、XSRF跨站请求伪造

（1）、XSS

• 在新浪博客写一篇文章，同时偷偷插入一段<script>攻击代码中获取cookie，发送本身的服务里发布博客，有人查看博客内容会把查看者的cookie发送至攻击者的服务器
• 遇防？
• 前端替换关键字，例如替换<&lt>为>
• 后端替换

（2）、XSRF

• 你已登陆一个购物网站，正在浏览商品，该网站付费接口是xxx.com/pay?id=100可是没有任何验证
• 而后你收到一封邮件，隐藏着<img src="xxx.com/pay?id=100>
• 你查看邮件的时候，就已经悄悄的付费购买了，
• 解决方案
• 增长验证流程如输入指纹，密码，短信验证码