浏览器是怎么样渲染一个页面的

解析与构建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。

参考

答寒冬九问之讲讲输入完网址按下回车，到看到网页这个过程当中发生了什么。

CSS选择器、优先级与匹配原理