# 1.处理HTML生成dom树 把获取到的html代码解析成一个dom树，html的每一个tag都是一个dom树中的一个节点，根节点就是我们常用的document对象，但是并不包含我们用js创建的节点，因为在这里js还没开始执行！！
2.处理CSS生成CSSDOM树
浏览器把所有样式，包括css和浏览器的默认样式解析成样式结构体，在解析过程中会去掉浏览器不能识别的样式，然后生成CSSDOM树
3.将两树合并成render树
dom树和css树合并成render树。render树中的每一个dom节点都有自己的style样式，即css样式。并且render树不包含display:none,和无样式呈现的节点比如head。但是对于visible:hidden和opacity:0，还是会渲染到render上面的。
要注意的是，即使是script节点，也是不会渲染到render树的 （参考文献）
# 4.对render树进行布局计算
根据css计算布局，精确表达每一个盒子大小以及状态，同时所有的相对度量单位都会转换成绝对像素位置。根据css2标准，render 树中的每一个节点都被称为box，box的所有属性：width height margin padding border left top right bottom 等等
# 5.将ender树中的每一个节点绘制到屏幕上 这个阶段成为“绘制”或者“栅格化”
# 6.重排重绘
- 网络通信和HTML解析
- JavaScript执行
- 样式计算布局 即重排
- 重绘
查看方式 Chrome Performance
通过重排重绘提高页面加载速度
针对网络通信和HTML解析的优化
1. js防抖 debounce
-
概念： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
-
生活中的实例： 如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。
-
例如百度搜索，监听input输入框输入的时候，只要输入改变，都会发生一次请求，出现类似抖动的效果。为了解决这一问题，利用超时器即可实现防抖功能。只从最后输入停止开始计时，0.5s后才开始发起请求
2.js节流 throttle
-
概念： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
-
生活中的实例： 我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放（以前是，现在不知道）中基本是以每秒 24 张的速度播放的，为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候，100 张就会显得很浪费资源。
3.懒加载
针对JavaScript执行的优化
dom优化、算法优化、数据结构优化 （相关书籍：高性能JavaScript）
重排重绘的优化
利用执行队列
具体demo：
// 源代码：
div.style.left = div.offsetLeft + "px"
div.style.top = div.offsetTop + "px"
// 放到执行队列之中执行
var left = div.offsetLeft + "px"
var top = div.offsetTop + "px"
div.style.left = left
div.style.top = top
离线操作dom
如使用隐藏元素 document.createDocumentFragment() cloneNode()