浏览器是怎么样渲染一个页面的
解析与构建DOM树
解析html文件构建DOM树的一些规则：
1，外部样式会阻塞后续脚本执行，直到外部样式加载并解析完毕。
2，外部样式不会阻塞后续外部脚本的加载，但会阻塞外部脚本的执行。
3，如果后续外部脚本含有async属性（IE下为defer），则外部样式不会阻塞该脚本的加载和运行。
4，对于动态创建的link标签不会阻塞其后动态创建的script的加载与执行，不管script标签是否具有async属性，但对于其他非动态创建的script，以上三条结论仍适用
构建呈现树
HTML解析完毕后，开始构建呈现树RenderTree，这一步的主要工作在于将css样式应用到DOM节点上面，WebKit内核将这一过程称为附着，其他浏览器有不同的概念。对前端工程师而言这个过程会涉及到css层叠问题。
首先将根据样式重要性排序，由低到高依次为：
1，浏览器声明
2，用户普通声明
3，作者普通声明
4，作者重要声明
5，用户重要声明
对于同一重要级别，则是根据css选择符的特指度来判定优先级；
各级别的优先级：
important > 内联 > ID > 类 > 标签|伪类|属性选择器 > 伪对象 > 通配符 > 继承
1，权值的大小跟选择器的类型和数量有关
2，样式的优先级跟样式的定义顺序有关
呈现树的每一个节点即为与其对应的DOM节点的css框，框的类型与DOM节点的display属性有关，block元素生成block框，inline元素生成inline框，每一个呈现树节点都有与之对应的DOM节点，但DOM节点不一定有与之相对应的呈现树节点，你如display属性为none的DOM节点，而且呈现树节点在呈现树中的位置与他们在DOM树中的位置不一定相同，比如float与绝对定位元素。
布局
定位元素的坐标和大小，是否换行，各种 position, overflow， z-index 属性
绘制
这里有两个概念，一个是 Reflow，另一个是 Repaint。
repaint 屏幕的一部分要重画，比如某个css的背景色变了，但是元素的几何尺寸没有变。
reflow 意味着元件的几何尺寸变了，我们需要重新验证并计算render tree。是render tree的一部分或全部发生了变化，这就是reflow 或是layout。reflow的成本比repaint的成本高很多，DOM tree里面的每个节点都会有reflow方法，一个节点的reflow很有可能导致子节点，甚至是父节点以及同级节点的reflow。
display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint。
