浏览器渲染页面的过程

亦凉 2022-02-13 04:47 304阅读 0赞

# 一、首先了解一下浏览器的主要功能 #

浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI（Uniform Resource Identifier统一资源标识符）来指定所请求资源的位置，通过DNS查询，将网址转换为IP地址。  
浏览器的工作流程是：

1、输入网址。   
　　2、浏览器查找域名的IP地址。   
　　3. 浏览器给web服务器发送一个HTTP请求   
　　4. 网站服务的永久重定向响应   
　　5. 浏览器跟踪重定向地址 现在，浏览器知道了要访问的正确地址，所以它会发送另一个获取请求。   
　　6. 服务器“处理”请求，服务器接收到获取请求，然后处理并返回一个响应。   
　　7. 服务器发回一个HTML响应   
　　8. 浏览器开始显示HTML   
　　9. 浏览器发送请求，以获取嵌入在HTML中的对象。在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。这些文件就包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等…

# 二、浏览器渲染页面的过程 #

渲染引擎在取得内容之后的基本流程：

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

![20160724092250385][]

## 浏览器会解析三个东西：  ##

（1） HTML/SVG/XHTML，解析这三种文件会产生一个 DOM Tree。   
（2） CSS，解析 CSS 会产生 CSS 规则树。   
（3） Javascript脚本，主要是通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree.

## 具体渲染过程： ##

当浏览器获得一个html文件时，会“自上而下”加载，并在加载过程中进行解析渲染。   
解析：   
1. 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。   
2. 将CSS解析成 CSS Rule Tree 。   
3. 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了  
![20160724103859664][]

4.有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。   
5.再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

需要注意：

上述这个过程是`逐步完成`的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

# 三、浏览器加载和渲染html的顺序 #

1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。  
2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）  
3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。  
4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。阻塞加载  
5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。  
6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数、

# 2. JS的加载 #

2.1 不能并行下载和解析（阻塞下载）  
2.2 当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现。

# HTML页面加载和解析流程 #

1.用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；  
2.浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；  
3.浏览器又发出CSS文件的请求，服务器返回这个CSS文件；  
4.浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；  
5.浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；  
6.服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；  
7.浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它；  
8.Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=”none”）。突然少了这么一个元素，浏览器不得不重新渲染这部分代码；  
9.终于等到了＜/html＞的到来，浏览器泪流满面……  
10.等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；  
11.浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

[20160724092250385]: /images/20220213/f73763220fb8429c848ad40136f04f58.png
[20160724103859664]: /images/20220213/8f30714d8a694851a7ef21644d5edb83.png