前端中頁面渲染優化方法總結

怎么做優化

如何做好優化呢，網上隨便一搜，就有很多優化總結，無非就是網絡優化、靜態資源（html、js、css、image）優化。下面我們撇開網絡方面的優化，只分析靜態資源方面的優化。而靜態資源的優化關鍵在于你要去深入理解關鍵渲染路徑（CRP）的運行原理和規則。

一、了解瀏覽器關鍵渲染路徑（html加載過程）

面試必問：
1、描述一下從url輸入到頁面展示的全過程？
2、描述一下html加載全過程？
如何準確回答類似上面的問題呢，那么我們就需要全面了解瀏覽器關鍵渲染路徑了，了解了工作原理，我們才能更好的更深入的理解靜態資源的優化方案

渲染的關鍵路徑分為以下五步

構建DOM樹

構建CSSOM樹

合并DOM樹和CSSOM樹構建渲染樹

1、過濾掉不可見節點(腳本標記、元標記)
2、過濾掉樣式隱藏的節點（display:none）

根據渲染樹來布局，計算節點的幾何信息（layout）

將各個節點繪制在屏幕上（paint）

首先從上面的五步中看出，只有當DOM樹和CSSOM樹都構建完成之后才可以進行渲染樹的構建，所以這兩步是對整體渲染起阻塞作用的，當然了DOM樹是必須的，它提供給頁面內容，而CSSOM的必要性并不是太明顯，所以在CSSOM構建的過程中可以做一些優化。在做優化前先要了解這幾個知識點。

根據上面三個知識點，會讓你很清晰的知道，CSS優化可以做的事情就是，根據不同CSS使用場景和優先級的不同進行不阻塞標記。
如果是必要的CSS就請盡早的加載（1、引用位置靠前，2、減小文件體積）到客戶端，這樣就減少了對首次渲染的阻塞

二、javascript對渲染的影響和降低影響的策略

首先我們來討論下javascript。它可以修改網頁的方方面面，內容、樣式、以及響應用戶的交互。不過，javascript也會阻止DOM的構建和延緩網頁渲染。下面我們來了解一下javascript和DOM、CSSOM的依賴關系。

javascript能修改內容和樣式

無論（內聯javascript還是外部javascript文件）都會阻止DOM的構建

DOM構建過程中如果遇到（非異步加載async）的javascript標簽，瀏覽器將會終止DOM的構建，立即執行javascript。
這就是為什么非異步執行的javascript要放在尾部或者將可執行代碼要放在DOMContentLoaded回調中？
因為如果該javascript代碼操作了未構建完的DOM節點就會因為無法獲取該節點而無法執行響應的操作。

CSSOM的構建影響javascript的執行

如果在瀏覽器尚未完成CSSOM的下載和構建時，去運行javascript腳本，那么瀏覽器會延遲腳本的執行和DOM的構建，直至完成CSSOM的下載和構建?？梢赃@樣理解，當出現非異步加載的javascript時，CSSOM構建完成時間是早于javascript的執行，兩者早于DOMContentloaded（即DOM構建徹底完成）。

未優化--javascript正常加載

優化后--javascript異步加載

根據上面的分析，我們可以清楚的認識到，非必要優先加載的js，選擇異步加載是最優選擇。

三、image對首屏渲染的影響

圖像不會阻止首屏的渲染，但是為了增加用戶體驗我們應該考慮加載適當大小的圖片，加速圖片的呈現。

如何評估關鍵渲染路徑

前面的內容讓我們了解了關鍵路徑渲染的基本原理和可能優化的機會，下面我們就需要使用一些工具，幫助我們去評估現有頁面的CRP性能。

測試工具：Lighthouse 可以快速測試你的網頁，并提供性能報告

監控工具：Nivigation Timing Api 設置你的代碼，實時監控用戶使用過程中的性能。

總結

javascript阻止DOM構建（DOMCommentLoaded觸發被延遲），css的下載和完成阻止javascript的執行。在沒有javascript或者只含有異步javascript的頁面中，DOM的構建和CSSOM的構建互不影響。

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

推薦閱讀：

前端測試金字塔使用步驟詳解

怎樣處理MySQL數據庫拒絕訪問

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com