渲染流水線中css和js的載入
相關概念
html、css、js資料通過渲染模組的處理最終輸出為螢幕上的畫素
渲染模組被劃分為很多子階段，輸入的資料通過這些子階段最後輸出畫素，這樣的乙個處理流程叫做渲染流水線
注意：每個子階段都有其輸入內容、處理過程和輸出內容
因為瀏覽器無法直接理解和使用html，所以需要將html轉換為瀏覽器能夠理解的dom樹結構，生成dom樹
純文字css -> cssom結構
瀏覽器無法直接理解純文字的css樣式，渲染引擎會將其轉化為瀏覽器可以理解的cssom結構，即stylesheets樣式表
該結構具備查詢和修改等操作功能，js中用document.stylesheets訪問
標準化stylesheets樣式表中的屬性值
將樣式表中所有屬性的值轉換為渲染引擎容易理解的、標準化的計算值
計算dom樹中每個節點的具體樣式
計算過程遵守css的繼承和層疊規則，結果被儲存在computedstyle結構內
計算dom樹中可見元素的幾何位置
建立布局樹
遍歷dom樹中所有可見節點並加到布局樹中，不可見節點全都忽略
布局計算
計算布局樹節點的座標位置，布局運算結果會重新寫回布局樹中
注意：該子階段布局樹既是輸入內容也是輸出內容
渲染引擎為特定的節點生成專用的圖層，並生成一棵對應的圖層樹。瀏覽器的頁面被分成很多圖層，這些圖層疊加後合成了最終的頁面
注意：不是布局樹的每個節點都包含乙個圖層，如果乙個節點沒有對應圖層則這個節點就從屬於父節點的圖層
渲染引擎會把乙個圖層的繪製拆分成很多小的繪製指令，然後把這些指令按照順序組成乙個待繪製列表。每個元素的背景、前景、邊框都需要單獨的指令去繪製
渲染主線程把繪製列表提交給合成執行緒，合成執行緒將圖層劃分為圖塊
合成執行緒將圖塊轉換為位圖。合成執行緒按照視口附近的圖塊來優先生成位圖，實際生成點陣圖的操作是由柵格化來執行的
所有圖塊光柵化完成，合成執行緒會生成乙個繪製圖塊的命令，然後將命令提交給瀏覽器程序
瀏覽器程序中的viz元件接收到命令後根據命令將頁面內容繪製到記憶體中，最後再將記憶體顯示在螢幕上
首先發起載入主頁面的請求，發起請求的可能是渲染程序或瀏覽器主程序，發起的請求被送到網路程序中去執行
網路程序收到返回的html資料後將其傳送給渲染程序，渲染程序會解析html資料並構建dom樹
dom樹構建結束後向網路程序發起請求css檔案
網路程序收到返回的css資料後將其傳送給渲染程序，渲染程序收到後將其解析成cssom並構建布局樹
注意：請求html資料和構建dom中間有一段空閒時間，可能成為頁面渲染的瓶頸
渲染流水線影響到首次頁面展示的速度，而首次頁面展示的速度直接影響到了使用者體驗
影響因素
縮短白屏時間策略若場景不適合內聯，可以盡量減小檔案大小
將不需要在解析html階段使用的js標記上sync或defer對於大的css檔案可以通過**查詢屬性，將其拆分為多個不同用途的css檔案，這樣只有在特定的場景下才會載入特定的css檔案
如果修改元素的幾何位置屬性，瀏覽器會觸發重新布局，重新執行渲染流水線步驟3~8進行重排
重排需要更新完整的渲染流水線，開銷最大
如果修改元素的繪製屬性，瀏覽器直接進入繪製階段，重新執行渲染流水線步驟5~8進行重繪
重繪省去布局和分層階段，執行效率比重排操作高
直接執行渲染流水線步驟8，不需要布局和繪製
使用css的transform來實現動畫效果，就是直接在非主線程上執行合成動畫操作，沒有占用主線程的資源，合成大大提公升了繪製效率
**於：極客時間《瀏覽器工作原理與實踐》
瀏覽器渲染頁面流程
解析html文字，構建dom tree，同時進行第3步。歇息css樣式表，構建cssom tree 根據dom tree和 cssom tree 構建render tree 根據render tree來進行布局處理 layout 將頁面元素進行繪製 painting 如果將css檔案放在底部，ren...
瀏覽器渲染頁面的流程
瀏覽器渲染頁面的流程 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...