瀏覽器載入網頁時的過程是什麼？

01-03

載入、解析、執行都具體是什麼？
特別是不太清楚javascript從被載入到執行的過程，是不是要JavaScript執行完了才會繼續載入&內部的網頁內容元素呢？
asyn和defer屬性都是什麼意思啊？

這篇文章應該可以回答你的問題：了解html頁面的渲染過程

其實這問題也沒必要糾結那麼深，知道下大概過程也就可以，我曾經也糾結過。這裡說下我的理解。

瀏覽器接收到html代碼，可能是一份完整的文檔，也可能是一個chunk，即開始解析。解析過程是先構建dom樹，再根據dom樹構建渲染樹，最後瀏覽器將渲染樹繪製到頁面上。

構建dom樹的過程即根據html代碼自上而下進行構建，當遇到script文件載入／執行會阻塞後面dom樹的構建（javascript可能會改變dom樹），而遇到css文件則會阻塞渲染樹的構建，即dom樹依然繼續構建（除非遇到script標籤並且css文件依舊未載入完成），但不會渲染繪製到頁面上。而無論哪個阻塞，該載入的文件還是會載入，例如html文檔中的其他css／js／圖片文件。

另外javascript被載入後就會被執行，執行的過程也阻塞樹的構建。是執行完了才解析其他內容，而不是執行完了才載入其他內容。

至於asyn和defer，其實上面說的script阻塞就可以用它們解決了，詳細自行查找資料

瀏覽器解析渲染頁面原理畫個圖解釋清晰一點：

首先，開源瀏覽器一般以8k每塊下載html頁面。

然後解析頁面生成DOM樹，遇到css標籤或JS腳本標籤就新起線程去下載他們，並繼續構建DOM。

下載完後解析CSS為CSS規則樹，瀏覽器結合CSS規則樹和DOM樹生成Render Tree。

注意：構建CSS Object Model（CSSOM)會阻塞JavaScript的執行。JavaScript的執行也會阻塞DOM的構建。

JavaScript下載後可以通過DOM API修改DOM，通過CSSOM API修改樣式作用域Render Tree。

每次修改會造成Render Tree的重新布局和重繪。只要修改DOM或修改了元素的形狀或大小，就會觸發Reflow，單純修改元素的顏色只需Repaint一下（調用操作系統Native GUI的API繪製）。

瀏覽器的工作原理：現代網路瀏覽器幕後揭秘

從輸入 URL 到頁面載入完成的過程中都發生了什麼事情？ FEX 做最專業的前端

skyline75489/what-happens-when-zh_CN · GitHub

載入網頁的過程是包括解析，執行以及js載入的。解析就是，比如htmlParser,cssParser。執行一般就是指js的執行。

並不是所有的javaScript執行完才會繼續載入，或者更應該說是讀取body內的內容元素。要看這個js語句是同步的還是非同步的。同步的就要等js執行完才會繼續載入，否則就先載入body里的內容。

async一般就是針對載入外部js時的。首先說明，載入外部js設置async或defer並不會阻塞對dom元素的修改，async設置後瀏覽器將並發非同步的去下載對應的js文件，下載完後將以下載完成的先後順序執行。而defer設置後瀏覽器將會並發非同步的去下載對應的js文件，以腳本引入的先後順序執行