说说页面渲染的过程

浏览器在收到HTML,CSS,JS文件后，它是如何把页面呈现到屏幕上的？下图对应的就是WebKit渲染的过程。

浏览器是一个边解析边渲染的过程。

① 浏览器解析HTML文件构建DOM树，然后解析CSS文件构建CSS规则树

② DOM树和CSS规则树解析完成后，合成渲染树（Render Tree）

③ 等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上（重排和重绘）。

浏览器在解析过程中，如果遇到请求外部资源时，如图像,iconfont,JS等。请求过程是异步的，并不会影响HTML文档进行加载。但是当文档加载过程中遇到JS文件，HTML文档会挂起渲染过程，不仅要等到文档中JS文件加载完毕还要等待解析执行完毕，才会继续HTML的渲染过程。原因是因为JS有可能修改DOM结构，这就意味着JS执行完成前，后续所有资源的下载是没有必要的，这就是JS阻塞后续资源下载的根本原因。CSS文件的加载不影响JS文件的加载，但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。

绘制这个过程比较复杂，涉及到两个概念: reflow(重排)和repain(重绘)。

① 节点信息计算(重排)，这个过程被叫做Layout(Webkit)或者Reflow(Mozilla)。即根据渲染树计算每个节点的几何信息。

② 渲染绘制(重绘)，这个过程被叫做(Painting 或者 Repaint)。即根据计算好的信息绘制整个页面。 

理论上，每一次的DOM更改或者CSS几何属性更改，比如 width，height，position 定位等，都会引起一次浏览器的重排/重绘过程。也就是浏览器会重新计算元素的几何属性，并重新构造渲染树，这个过程叫做重排。完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。而如果是css的非几何属性更改，则只会引起重绘过程。所以说重排一定会引起重绘，而重绘不一定会引起重排。 

重排：

原理是根据因为几何属性发生了改变。那么我们就能够总结一下引起重排的操作：
1、页面首次渲染
2、添加或删除 Dom 的显示与隐藏
3、元素相对于文档的定位改变
4、元素的大小尺寸改变
5、添加行内 style 样式
6、浏览器窗口大小发生改变时

重绘

重绘相对来说就简单点了，比如颜色改变，背景图片改变，阴影改变等，只要不影响元素本身相对于浏览器文档的位置只会触发重绘。

页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

（优化：浏览器中最耗时的部分就是reflow，所以围绕这一部分就是考虑如何减少reflow的次数）