前端面試之浏覽器渲染

浏覽器渲染的整個流程

浏覽器的整個流程如上圖所示。

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