浏览器渲染页面过程与页面优化

由一道面试题引发的思考：

从用户输入浏览器输入url到页面最后呈现 有哪些过程？
一道很常规的题目，考的是基本网络原理，和浏览器加载css，js过程。

答案大致如下：

1. 用户输入URL地址

2. 浏览器解析URL解析出主机名

3. 浏览器将主机名转换成服务器ip地址（浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时缓存）

4. 浏览器将端口号从URL中解析出来

5. 浏览器建立一条与目标Web服务器的TCP连接（三次握手）

6. 浏览器向服务器发送一条HTTP请求报文

7. 服务器向浏览器返回一条HTTP响应报文

8. 关闭连接 浏览器解析文档

9. 如果文档中有资源 重复6 7 8 动作 直至资源全部加载完毕

以上答案基本简述了一个网页基本的响应过程背后的原理。
但这也只是一部分，浏览器获取数据的部分，至于浏览器拿到数据之后，怎么渲染页面的，一直没太关注。
所以抽出时间研究下浏览器渲染页面的过程。
通过研究，了解一些基本常识的原理：

1. 为什么要将js放到页脚部分

2. 引入样式的几种方式的权重

3. css属性书写顺序建议

4. 何种类型的DOM操作是耗费性能的

浏览器渲染主要流程

不同的浏览器内核不同，所以渲染过程不太一样。

WebKit 主流程

Mozilla 的 Gecko 呈现引擎主流程

由上面两张图可以看出，虽然主流浏览器渲染过程叫法有区别，但是主要流程还是相同的。
Gecko 将视觉格式化元素组成的树称为“框架树”。每个元素都是一个框架。WebKit 使用的术语是“呈现树”，它由“呈现对象”组成。对于元素的放置，WebKit 使用的术语是“布局”，而 Gecko 称之为“重排”。对于连接 DOM 节点和可视化信息从而创建呈现树的过程，WebKit 使用的术语是“附加”。

所以可以分析出基本过程：

1. HTML解析出DOM Tree

2. CSS解析出Style Rules

3. 将二者关联生成Render Tree

4. Layout 根据Render Tree计算每个节点的信息

5. Painting 根据计算好的信息绘制整个页面

HTML解析

HTML Parser的任务是将HTML标记解析成DOM Tree
这个解析可以参考React解析DOM的过程，
但是这里面有很多别的规则和操作，比如容错机制，识别
和
等等。
感兴趣的可以参考 《How Browser Work》，中文翻译
举个例子：一段HTML

    


    

        
Web page parsing
        
This is an example Web page.
    

经过解析之后的DOM Tree差不多就是

将文本的HTML文档，提炼出关键信息，嵌套层级的树形结构，便于计算拓展。这就是HTML Parser的作用。

CSS解析

CSS Parser将CSS解析成Style Rules，Style Rules也叫CSSOM（CSS Object Model）。
StyleRules也是一个树形结构，根据CSS文件整理出来的类似DOM Tree的树形结构：

于HTML Parser相似，CSS Parser作用就是将很多个CSS文件中的样式合并解析出具有树形结构Style Rules。

脚本处理

浏览器解析文档，当遇到