运行环境

• 浏览器可以通过访问链接来得到页面的内容
• 通过绘制和渲染，显示出页面最终的样子
• 整个过程中，我们需要考虑什么问题

知识点

• 页面加载过程
• 性能优化
• 安全性

1、页面加载

题目

1. 从输入url到得到html的详细过程

• 1. DNS解析得到IP地址
• 2. 向IP地址服务器发送HTTP请求
• 3. 服务器收到处理并返回HTTP请求，浏览器收到html

2. window.onload和DOMContentLoaded的区别

• window.onload页面的全部资源加载完才会执行，包括图片、视频等
• DOM渲染完即可执行，此时图片视频可能没有加载完

知识点

1、加载资源的形式

• 输入url（页面跳转）加载html
• 加载html中的静态资源<script src="./static/jquery.js"></script>
  2、加载一个资源的过程
• 浏览器根据DNS服务器得到域名的IP地址
• 向这个IP对应的服务器发送http请求
• 服务器收到、处理并返回http请求
• 浏览器得到返回的内容
  3、浏览器渲染页面的过程
• 根据HTML生成DOM Tree
• 根据CSS生成CSSOM
• 将DOM和CSSOM整合形成Render Tree
• 根据Render Tree开始渲染跟展示
• 遇到<script>时，会执行并阻塞渲染

2、性能优化

原则：

• 多使用内存、缓存或者其他方法
• 减少CPU计算、减少网络

从哪里入手：

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

加载资源优化

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

渲染优化

• CSS放前面，JS放后面
• 懒加载（图片懒加载、下拉加载更多）

<img id="img1" src="preview.png" data-realsrc="abc.png" />
<script>
var img1 = document.getElementById('img1');
img1.src = img1.getAttribute('data-realsrc')
</script>

• 减少DOM查询，对DOM查询做缓存

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

• 减少DOM操作，多个操作尽量合并在一起执行

var listNode = document.getElementById('list');
//要插入10个li标签
var frag = document.createDocumentFragment(); //记住这个API~
var x, li;
for(x = 0; x<10;x++){
    li = document.createElement("li");
    li.innerHTML = "List item " + x;
    frag.appendChild(li); //这里其实并不会执行DOM操作
}
listNode.appenChild(frag);

• 事件节流xxx修正为防抖

var textarea = document.getElementById('text');
var timeoutId;
textarea.addEventListener('keyup', function(){
  if(timeoutId){
    clearTimeout(timeoutId);
  }
timeoutId = setTimeout(function(){
  //todo
  }, 100);
})

• 尽早执行操作

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