解析html文字，構建dom tree， 同時進行第3步。
歇息css樣式表，構建cssom tree
根據dom tree和 cssom tree 構建render tree
根據render tree來進行布局處理（layout）
將頁面元素進行繪製（painting）
如果將css檔案放在底部，render tree在之前就已經構建完了，因此使用者可能會看到無樣式的頁面，或者閃屏。
css： css被視為阻塞渲染的資源，也很好理解，要不然怎麼構建render tree， 怎麼進行布局處理呀~~ 因此瀏覽器會等待cssom tree構建完畢，當瀏覽器遇到標籤時候，會有限處理這些css資源。直至cssom構建完畢。
js： script標籤會阻塞html解析，因為js可能會改變dom和css，因此瀏覽器會先解析script，避免浪費。 要想避免阻塞的話，可使用defer 和 async。
repaint： 發生在螢幕的一部分要重新畫，比如背景顏色，布局沒有改變！，瀏覽器只需要走第五步。
reflow： 布局發生了改變！瀏覽器需要重新從layout這一步開始，因為render tree已經變了。多走一步，顯然更加耗費效能啦~~
瀏覽器頁面渲染流程
渲染流水線中css和js的載入 相關概念 html css js資料通過渲染模組的處理最終輸出為螢幕上的畫素 渲染模組被劃分為很多子階段，輸入的資料通過這些子階段最後輸出畫素，這樣的乙個處理流程叫做渲染流水線 注意 每個子階段都有其輸入內容 處理過程和輸出內容 因為瀏覽器無法直接理解和使用html，...
瀏覽器渲染頁面的流程
瀏覽器渲染頁面的流程 1 根據html檔案構建dom樹和cssom樹。構建dom樹期間，如果遇到js，阻塞dom樹及cssom樹的構建，優先載入js檔案，載入完畢，再繼續構建dom樹及cssom樹。2 構建渲染樹 render tree 3 頁面的重繪 repaint 與重排 reflow，也有稱回...
瀏覽器渲染頁面的流程
不同瀏覽器有不同的渲染引擎,比如firefox使用gecko,而safari和chrome使用webkit 解析html生成dom樹 在生成dom樹的過程中會被css和js的載入執行阻塞,也就是渲染阻塞解析css生成cssom規則樹 對於外部css檔案,每個css檔案都會被解析成stylesheet...