1.解析html檔案，建立dom樹
自上而下解析，遇到任何樣式（link、style）和指令碼（script）都會阻塞
1）css載入不會阻塞html檔案的解析，但會阻塞dom的渲染
2）css載入會阻塞後面js語句的執行
3）js會阻塞html的解析和渲染
4）沒有defer和async標籤的script會立即載入並執行
5）有async標籤的js，js的載入執行和html的解析和渲染並行
6）有defer標籤的js，js的載入和html的解析和渲染並行，但會在html解析完成後執行,在觸發domcontentloaded事件前執行
7）domcontentloaded和onload的區別：domcontentloaded在html解析完畢後執行，loload在頁面完全載入完成後執行（包括樣式和）
2.解析css，生成cssom，css物件模型
3.dom和css合併，構建渲染樹（render tree）
4.布局（layout）和繪製（paint），重繪（repaint）和重排（reflow/回流）
1）重繪：根據元素的新屬性重新繪製，使元素呈現新的外觀
2）重排：當渲染樹中的一部分因為元素的規模尺寸，布局，隱藏等改變而需要重新構建
3）重排必定會引發重繪，但重繪不一定會引發重排
補充：監聽資源載入完成有四種方式
1. window.onload = function()
2. window.addeventlistener("load",function());
3. document.body.onload = function()
4. 參考：
1.2.
了解html頁面的渲染過程
頁面的渲染有以下特點 具體來說 當我們從網路上得到html的相應位元組時，dom樹就開始構建了。由瀏覽器更新ui的執行緒負責。當遇到以下情況時，dom樹的構建會被阻塞 由於是基於單執行緒的事件輪詢，即使沒有指令碼和樣式的阻塞，當這些指令碼或樣式被解析 執行並且應用的時候，也會阻塞頁面的渲染。一些不會...
Html頁面渲染
瀏覽器與伺服器的互動 瀏覽器的主要功能是將使用者選擇的web資源呈現出來，它從伺服器請求資源，並將得到的資源 html，pdf，image等等 顯示在瀏覽器視窗。那麼從使用者敲入url到完整渲染出來，經歷了什麼過程呢？也就是說整個瀏覽器的工作流程是怎樣的呢？整個過程大致如下 1.輸入url，瀏覽器根...
HTML渲染過程
這裡的過程從伺服器返回html文件開始，瀏覽器請求伺服器的過程不多做介紹。解析html和構建dom是同時執行的，當瀏覽器收到html文件時，瀏覽器通過html直譯器解析html和構建dom樹。瀏覽器採用的是自上而下解析。所以在構建dom樹時兩個標籤會阻塞解析，就是會涉及到外部資源的link和scri...