渲染基本流程
首先向服务器发送请求，得到响应后，加载html，然后解析html，解析过程如遇到 css、js文件，接着向服务发送请求，得到响应后，加载css，解析html创建dom树，解析css创建cssom树，然后组合形成render tree ，然后进行layout布局，最后paint输出到屏幕
1.解析HTML，创建DOM树
自上而下进行加载与渲染DOM树
阻塞：<link>,<style>,<script>语义标签会进行阻塞，待服务器返回后继续渲染
非阻塞：<img>会向服务器发出下载请求，同时继续渲染
2.解析CSS，创建CSSOM树
CSS选择符是从右到左进行匹配的
CSS优化：
dom深度尽量浅
减少inline javascript、css的数量
避免后代选择符(.div a{})，尽量使用子选择符(.div >a{})
避免使用通配符(*)
3.将CSS与DOM合并，构建渲染树（render tree）
DOM树与HTML一一对应，渲染树会忽略诸如head、display:none的元素
4.布局（layout），重绘（repaint）和重排（reflow）
重绘（repaint）：当元素样式(background-color, border-color, color, vivibility)发生变化且不会影响位置布局时会进行重绘
重排（reflow）：当元素的结构、位置发生变化时会进行重排，diplay:none会进行重排；
reflow的原因：
（1）增加或删除DOM节点；
（2）display:none（重排并重绘）；visibility:hidden（重排）；
（3）移动页面中的元素；
（4）增加或修改样式；
（5）用户改变窗口大小，滚动页面等。
