介绍

这是一个很常见的问题，我们每天都在经历这件事，但是却不能说出具体的过程，同时这也是前端面试的一个考点，所以每个学习前端的人都应该了解这个过程。

本文以Chrome浏览器为例，其渲染引擎为Webkit

接下来让我们一步一步走

输入URL后

可概括为以下几个过程:

• 浏览器从DNS服务器获取域名的IP地址(DNS解析)
• 浏览器与该IP服务器建立TCP连接
• 浏览器发送HTTP请求
• 服务器接收请求并返回HTTP报文
• 浏览器接收返回内容

拿到返回内容后

先放两张很容易搜到的流程图

• 渲染引擎同时解析HTML文档和样式(CSS和Style中)，两者分别生成DOM树和CSSOM树
• 将DOM中的"可见内容"(除head或display: none等等)和CSSOM合并(attachment)成RenderTree(渲染树)
• RenderTree构建完毕后进行布局(layout)，即为每个节点分配坐标
• 遍历RenderTree，Painting(绘制)每个节点

解析器遇到 script 标记时会立即解析并执行脚本，文档的解析将停止，直到脚本执行完毕

补充

什么是CSSOM?

CSSOM视图模块(CSSOM View Module)定义了一些 API，Web 开发人员使用这些 API 可以进行检查，也可以以编程方式更改文档及其内容的视觉属性，包括布局框定位、视区宽度和元素滚动

为什么Script会阻碍文档的解析?

因为这两者公用同一个线程，且Script优先级较高

如何避免上一个问题?

• defer: 当浏览器遇到具有defer属性的脚本时，它会阻止加载和执行脚本，直到HTML文档中的所有元素都已解析为止
• async: 使用 async 属性时，浏览器会异步加载和执行脚本，同时继续解析HTML中的其他元素，包括其他脚本元素

HTML都解析完成后才会绘制RenderTree么?

并不是。浏览器会尽早的把内容显示出来，所以每解析一部分就会绘制一部分。

希望你看完能有所收获