前端面试之浏览器渲染

浏览器渲染的整个流程

浏览器的整个流程如上图所示。

1、  首先当用户输入一个URL的时候，浏览器就会发送一个请求，请求URL对应的资源。

2、  然后浏览器的HTML解析器会将这个文件解析，并且构建成一棵DOM树。

3、  在构建DOM树的时候，遇到JS和CSS元素，HTML解析器就换将控制权转让给JS解析器或者是CSS解析器。

4、  JS解析器或者是CSS解析器解析完这个元素时候，HTML又继续解析下个元素，直到整棵DOM树构建完成。

5、  DOM树构建完之后，浏览器把DOM树中的一些不可视元素去掉，然后与CSSOM合成一棵render树。

6、  接着浏览器根据这棵render树，计算出各个节点(元素)在屏幕的位置。这个过程叫做layout，输出的是一棵layout树。

7、  最后浏览器根据这棵layout树，将页面渲染到屏幕上去。
 

资料：

https://blog.csdn.net/cde7070/article/details/50619853

https://blog.csdn.net/csdnnews/article/details/95267307