資訊專欄INFORMATION COLUMN
摘要：下面我們撇開網(wǎng)絡方面的優(yōu)化，只分析靜態(tài)資源方面的優(yōu)化。不過，也會阻止的構建和延緩網(wǎng)頁渲染。未優(yōu)化正常加載優(yōu)化后異步加載根據(jù)上面的分析，我們可以清楚的認識到，非必要優(yōu)先加載的，選擇異步加載是最優(yōu)選擇。
為什么做優(yōu)化
經(jīng)典問題：白屏時間過長，用戶體驗差怎么做優(yōu)化
產(chǎn)生的原因：網(wǎng)絡問題、關鍵渲染路徑（CRP）問題
如何做好優(yōu)化呢，網(wǎng)上隨便一搜，就有很多優(yōu)化總結，無非就是網(wǎng)絡優(yōu)化、靜態(tài)資源（html、js、css、image）優(yōu)化。下面我們撇開網(wǎng)絡方面的優(yōu)化，只分析靜態(tài)資源方面的優(yōu)化。而靜態(tài)資源的優(yōu)化關鍵在于你要去深入理解關鍵渲染路徑（CRP）的運行原理和規(guī)則。一、了解瀏覽器關鍵渲染路徑（html加載過程）
面試必問：
1、描述一下從url輸入到頁面展示的全過程？
2、描述一下html加載全過程？
如何準確回答類似上面的問題呢，那么我們就需要全面了解瀏覽器關鍵渲染路徑了，了解了工作原理，我們才能更好的更深入的理解靜態(tài)資源的優(yōu)化方案
渲染的關鍵路徑分為以下五步
構建DOM樹
構建過程：Bytes->Characters->Tokens->Nodes->Dom
構建CSSOM樹
構建過程：Bytes->Characters->Tokens->Nodes->CSSOM
合并DOM樹和CSSOM樹構建渲染樹
1、過濾掉不可見節(jié)點(腳本標記、元標記) 2、過濾掉樣式隱藏的節(jié)點（display:none）
根據(jù)渲染樹來布局，計算節(jié)點的幾何信息（layout）
將各個節(jié)點繪制在屏幕上（paint）
首先從上面的五步中看出，只有當DOM樹和CSSOM樹都構建完成之后才可以進行渲染樹的構建，所以這兩步是對整體渲染起阻塞作用的，當然了DOM樹是必須的，它提供給頁面內(nèi)容，而CSSOM的必要性并不是太明顯，所以在CSSOM構建的過程中可以做一些優(yōu)化。在做優(yōu)化前先要了解這幾個知識點。
1、默認情況下，CSS是阻塞渲染的資源 2、我們可以通過媒體查詢和媒體類型把一部分CSS標記為不阻塞渲染 （媒體查詢的不足就是會嚴重影響關鍵渲染路徑的性能） 3、瀏覽器**會下載所有CSS資源**、無論它阻塞還是不阻塞
根據(jù)上面三個知識點，會讓你很清晰的知道，CSS優(yōu)化可以做的事情就是，根據(jù)不同CSS使用場景和優(yōu)先級的不同進行不阻塞標記。二、javascript對渲染的影響和降低影響的策略
如果是必要的CSS就請盡早的加載（1、引用位置靠前，2、減小文件體積）到客戶端，這樣就減少了對首次渲染的阻塞
首先我們來討論下javascript。它可以修改網(wǎng)頁的方方面面，內(nèi)容、樣式、以及響應用戶的交互。不過，javascript也會阻止DOM的構建和延緩網(wǎng)頁渲染。下面我們來了解一下javascript和DOM、CSSOM的依賴關系。
javascript能修改內(nèi)容和樣式
無論（內(nèi)聯(lián)javascript還是外部javascript文件）都會阻止DOM的構建
DOM構建過程中如果遇到（非異步加載async）的javascript標簽，瀏覽器將會終止DOM的構建，立即執(zhí)行javascript。 這就是為什么非異步執(zhí)行的javascript要放在尾部或者將可執(zhí)行代碼要放在DOMContentLoaded回調(diào)中？ 因為如果該javascript代碼操作了未構建完的DOM節(jié)點就會因為無法獲取該節(jié)點而無法執(zhí)行響應的操作。
CSSOM的構建影響javascript的執(zhí)行
如果在瀏覽器尚未完成CSSOM的下載和構建時，去運行javascript腳本，那么瀏覽器會延遲腳本的執(zhí)行和DOM的構建，直至完成CSSOM的下載和構建?？梢赃@樣理解，當出現(xiàn)非異步加載的javascript時，CSSOM構建完成時間是早于javascript的執(zhí)行，兩者早于DOMContentloaded（即DOM構建徹底完成）。
根據(jù)上面的分析，我們可以清楚的認識到，非必要優(yōu)先加載的js，選擇異步加載是最優(yōu)選擇。三、image對首屏渲染的影響
圖像不會阻止首屏的渲染，但是為了增加用戶體驗我們應該考慮加載適當大小的圖片，加速圖片的呈現(xiàn)。如何評估關鍵渲染路徑
前面的內(nèi)容讓我們了解了關鍵路徑渲染的基本原理和可能優(yōu)化的機會，下面我們就需要使用一些工具，幫助我們?nèi)ピu估現(xiàn)有頁面的CRP性能。
測試工具：Lighthouse 可以快速測試你的網(wǎng)頁，并提供性能報告
監(jiān)控工具：Nivigation Timing Api 設置你的代碼，實時監(jiān)控用戶使用過程中的性能。
總結javascript阻止DOM構建（DOMCommentLoaded觸發(fā)被延遲），css的下載和完成阻止javascript的執(zhí)行。在沒有javascript或者只含有異步javascript的頁面中，DOM的構建和CSSOM的構建互不影響。
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52428.html
摘要：下面我們撇開網(wǎng)絡方面的優(yōu)化，只分析靜態(tài)資源方面的優(yōu)化。不過，也會阻止的構建和延緩網(wǎng)頁渲染。未優(yōu)化正常加載優(yōu)化后異步加載根據(jù)上面的分析，我們可以清楚的認識到，非必要優(yōu)先加載的，選擇異步加載是最優(yōu)選擇。 為什么做優(yōu)化 經(jīng)典問題：白屏時間過長，用戶體驗差產(chǎn)生的原因：網(wǎng)絡問題、關鍵渲染路徑（CRP）問題 怎么做優(yōu)化 如何做好優(yōu)化呢，網(wǎng)上隨便一搜，就有很多優(yōu)化總結，無非就是網(wǎng)絡優(yōu)化、靜態(tài)資源（h...
摘要：下面我們撇開網(wǎng)絡方面的優(yōu)化，只分析靜態(tài)資源方面的優(yōu)化。不過，也會阻止的構建和延緩網(wǎng)頁渲染。未優(yōu)化正常加載優(yōu)化后異步加載根據(jù)上面的分析，我們可以清楚的認識到，非必要優(yōu)先加載的，選擇異步加載是最優(yōu)選擇。 為什么做優(yōu)化 經(jīng)典問題：白屏時間過長，用戶體驗差產(chǎn)生的原因：網(wǎng)絡問題、關鍵渲染路徑（CRP）問題 怎么做優(yōu)化 如何做好優(yōu)化呢，網(wǎng)上隨便一搜，就有很多優(yōu)化總結，無非就是網(wǎng)絡優(yōu)化、靜態(tài)資源（h...
摘要：端優(yōu)談談關于前端的緩存的問題我們都知道對頁面進行緩存能夠有利于減少請求發(fā)送，從而達到對頁面的優(yōu)化。而作為一名有追求的前端，勢必要力所能及地優(yōu)化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優(yōu)化問題過早優(yōu)化是萬惡之源。 優(yōu)化向：單頁應用多路由預渲染指南 Ajax 技術的出現(xiàn)，讓我們的 Web 應用能夠在不刷新的狀態(tài)下顯示不同頁面的內(nèi)容，這就是單頁應用。在一個單頁應用中，往往只有一...
摘要：前言對于前端的性能話題，從來都沒有斷絕過。作為一個前端開發(fā)者，性能是我們關注的指標。前端發(fā)展以來，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來我會從三個方面就前端性能進行總結網(wǎng)絡方面操作及渲染方面數(shù)據(jù)方面。 前言 對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業(yè)務的繁雜程度去決定優(yōu)化程度的。作為一個前端開發(fā)者，性能是我們關注的指標。它直接影響著我們...
閱讀 687·2021-09-30 09:47
閱讀 2876·2021-09-04 16:40
閱讀 864·2019-08-30 13:18
閱讀 3457·2019-08-29 16:22
閱讀 1563·2019-08-29 12:36
閱讀 593·2019-08-29 11:11
閱讀 1482·2019-08-26 13:47
閱讀 1134·2019-08-26 13:32
