成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Web性能優(yōu)化

ZHAO_ / 1962人閱讀

摘要：性能優(yōu)化網(wǎng)站的性能細(xì)線在幾個方面網(wǎng)站首頁加載速度動畫的流暢度通過分析瀏覽器的渲染原理資源對渲染的影響，得出優(yōu)化網(wǎng)站性能的辦法。查看性能的工具的面板錄制網(wǎng)頁加載的過程，分析記錄瀏覽器渲染過程中每個過程的耗時。通過引入，可以避免阻塞。

1 Web性能優(yōu)化

Web網(wǎng)站的性能細(xì)線在幾個方面：

網(wǎng)站首頁加載速度

動畫的流暢度

通過分析瀏覽器的渲染原理、資源對渲染的影響，得出優(yōu)化網(wǎng)站性能的辦法。

2 查看性能的工具

Chrome的Timeline面板錄制網(wǎng)頁加載的過程，分析記錄瀏覽器渲染過程中每個過程的耗時。

2.1 錄制時注意事項

禁用瀏覽器緩存：Network Tab下的disable cache

關(guān)閉Chrome擴(kuò)展或者啟用隱身模式

根據(jù)使用場景，模擬真實的網(wǎng)絡(luò)加載情況：Network Tab下的throttling下拉按鈕

2.2 Timeline工具的各個組成

在Main Thread中可以看到頁面渲染的整個過程及耗時

3 瀏覽器渲染原理

3.1 DOM樹構(gòu)建

DOM樹的構(gòu)建過程

根據(jù)HTML文檔的內(nèi)容，根據(jù)標(biāo)簽進(jìn)行分詞Token

根據(jù)Token生產(chǎn)對應(yīng)的節(jié)點(diǎn)Node

將節(jié)點(diǎn)根據(jù)嵌套關(guān)系組合為一棵對象節(jié)點(diǎn)樹DOM

瀏覽器解析文檔對象模型DOM是增量進(jìn)行的，無需等待整個HTML文檔加載完畢，便可以開始解析DOM


CSSOM解析會阻塞HTML Parser；JavaScript腳本文件執(zhí)行會阻塞HTML解析；CSS、JavaScript、Images和Font等靜態(tài)資源的異步加載的，渲染頁面與CSS解析與JavaScript執(zhí)行會有相互的依賴


3.2 CSSOM樹的構(gòu)建

CSSOM的解析依賴于選擇器，選擇器的匹配是從內(nèi)到外的。所以選擇器嵌套層次越深，匹配的時間會越長。

CSSOM只解析可視部分body標(biāo)簽中的內(nèi)容，將所有匹配的元素共同構(gòu)建一個CSSOM樹，從根節(jié)點(diǎn)一次向下，所有節(jié)點(diǎn)的屬性向下繼承

3.3 RenderTree樹的構(gòu)建

利用DOM和CSSOM組合構(gòu)建生成RenderTree，對應(yīng)Recaculate Style

RenderTree中包含所有渲染網(wǎng)頁必須的節(jié)點(diǎn)


無需渲染的節(jié)點(diǎn)不會被添加到RenderTree中，如head和display:none;的節(jié)點(diǎn)


visibility: hidden;的節(jié)點(diǎn)會添加到RenderTree中

3.4 Layout

Layout利用渲染樹的信息，計算渲染樹中所有節(jié)點(diǎn)在頁面上的位置和大小。

類似繪畫中各個元素位置擺放及尺寸規(guī)劃

會引起頁面重新Layout的操作：所有改變節(jié)點(diǎn)位置和大小的操作

屏幕旋轉(zhuǎn)

瀏覽器視窗改變

與大小、位置相關(guān)的CSS屬性

增加與刪除DOM元素

Layout操作比較耗時，對于動畫中頻繁引起Layout的操作（元素位置移動），最好使用transform代替，可以使用GPU進(jìn)行動畫處理（將Layout重繪在GPU完成）

viewport

如果頁面body元素設(shè)置的寬度為100%，并且根元素html沒有明確設(shè)置寬度絕對值，此時body元素的寬度等于viewport的寬度vw

使用meta標(biāo)簽可以設(shè)置瀏覽器viewport的尺寸。

device-width為瀏覽器的理想視口（屏幕的物理分辨率）

在移動端，如果不設(shè)置device-width，默認(rèn)viewport寬度為980px，導(dǎo)致文字很小，需要放大

viewport相當(dāng)于可視內(nèi)容布局的容器
3.5 Paint

填充Layout中的具體內(nèi)容和樣式，將Layout生成的區(qū)域填充為最終顯示在屏幕上的像素

3.6 總結(jié)

瀏覽器通過GET請求獲取網(wǎng)頁HTML，同時將增量解析HTML文檔，生成DOM樹

解析DOM節(jié)點(diǎn)樹時，對于需要加載的資源全部執(zhí)行異步加載，但是CSS的解析、JavaScript的執(zhí)行與font文件的下載會阻塞HTML Parser

局部DOM樹與CSSOM樹構(gòu)建完成后，立即組裝RenderTree進(jìn)行渲染

4 資源對渲染的影響

頁面中加載的資源主要包括：css、js腳本文件和font字體與images靜態(tài)資源，不同資源類型對渲染的影響不同。

4.1 瀏覽器渲染頁面的時機(jī)

增量解析解析DOM樹，并且完成相應(yīng)CSSOM解析后（RenderTree依賴于DOM樹，CSSOM樹），開始直接渲染頁面。

4.2 CSS加載會阻塞初次渲染

4.3 非關(guān)鍵資源

對于首頁無關(guān)的樣式，需要使用適當(dāng)?shù)姆绞奖苊馄渥枞醮武秩荆?/p>

document.write()會阻塞頁面初次渲染

使用media=print媒體查詢，雖然加載樣式表，但只針對打印時才應(yīng)用該樣式，不會阻塞初次渲染。

通過DOMAPI引入CSS，可以避免阻塞。

CSS中。

4.4 JS文件

輸出：先輸出Hello，10s之后再輸出World。JS腳本執(zhí)行會阻塞HTML Parser，但是HTML Parser是增量解析的，并且CSS樣式的解析會阻塞JS腳本執(zhí)行，當(dāng)解析完Hello時，生成對應(yīng)DOM節(jié)點(diǎn)，并且完成其CSSOM，直接開始渲染Hello節(jié)點(diǎn)。

腳本執(zhí)行完成后再解析后續(xù)的World

JS腳本執(zhí)行會阻塞HTML Parser；


CSS解析會阻塞JS腳本執(zhí)行：js可能會讀、寫CSSOM


雖然JS會阻塞HTML Parser解析；但是瀏覽器的資源異步加載機(jī)制Preload會異步加載head標(biāo)簽內(nèi)的資源

4.5 非關(guān)鍵JS資源解析阻塞的優(yōu)化方案

將JS資源文件放在文檔底部，延遲JS的執(zhí)行（但是存在必須解析完HTML才能加載JS資源，相較于head標(biāo)簽中加載會慢）

使用defer延遲腳本執(zhí)行：scipt標(biāo)簽的defer屬性，腳本會在HTML文檔解析完畢后再開始執(zhí)行；被defer的腳本在執(zhí)行時嚴(yán)格按照HTML文檔中出現(xiàn)的順序執(zhí)行---優(yōu)勢可以提早加載JS資源，但是解析完HTML再執(zhí)行

使用async異步執(zhí)行腳本：

當(dāng)script標(biāo)簽有async屬性時，腳本執(zhí)行不會阻塞HTML Parser，只要腳本加載完畢便開始執(zhí)行

被async的腳本，不會嚴(yán)格按照在HTML文檔中的順序執(zhí)行

async適用于無依賴的外部獨(dú)立資源（注意不要錯誤操作狀態(tài)）


4.6 font字體文件

font字體文件會阻塞內(nèi)容渲染

4.7 圖片資源

圖片資源的加載不會阻塞渲染，但是最好在HTML標(biāo)簽中設(shè)置圖片的高度和寬度，可以在Layout時留出圖片渲染的空間，避免頁面的抖動

5 優(yōu)化關(guān)鍵渲染路徑

優(yōu)化目標(biāo)是將下列三個指標(biāo)壓縮到最低：

關(guān)鍵資源數(shù)---初次渲染時依賴的資源

關(guān)鍵資源的體積最小---壓縮文件或圖片

關(guān)鍵資源網(wǎng)絡(luò)來回數(shù)---網(wǎng)絡(luò)傳輸資源消耗很多時間




6 其余優(yōu)化過程

HTTP2可以在傳輸HTML頁面后向客戶端推送頁面內(nèi)包含的資源

減少資源的大?。簤嚎s

減少請求的來回時間


參考：奇舞團(tuán)瓜瓜老師

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86969.html

相關(guān)文章

  • 前端性能優(yōu)化

    摘要：端優(yōu)談?wù)勱P(guān)于前端的緩存的問題我們都知道對頁面進(jìn)行緩存能夠有利于減少請求發(fā)送，從而達(dá)到對頁面的優(yōu)化。而作為一名有追求的前端，勢必要力所能及地優(yōu)化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優(yōu)化問題過早優(yōu)化是萬惡之源。 優(yōu)化向：單頁應(yīng)用多路由預(yù)渲染指南 Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁面的內(nèi)容，這就是單頁應(yīng)用。在一個單頁應(yīng)用中，往往只有一...

    Dean 評論0 收藏0

  • Web 性能優(yōu)化：理解及使用 JavaScript 緩存

    摘要：想閱讀更多優(yōu)質(zhì)文章請猛戳博客一年百來篇優(yōu)質(zhì)文章等著你這是性能優(yōu)化的第篇，上一篇在下面看點(diǎn)擊查看性能優(yōu)化使用分離數(shù)據(jù)的正確方法性能優(yōu)化圖片優(yōu)化讓網(wǎng)站大小減少性能優(yōu)化緩存事件來提高性能性能優(yōu)化種優(yōu)化和加快網(wǎng)站速度的方法隨著我們的應(yīng)用程序的不斷增 showImg(https://segmentfault.com/img/bVbp4cY?w=947&h=424); 想閱讀更多優(yōu)質(zhì)文章請猛戳Gi...

    endiat 評論0 收藏0

  • web性能優(yōu)化

    摘要：性能優(yōu)化是一個比較大的一個問題，不是一天兩天就能學(xué)會的，需要在日常中思考和學(xué)習(xí)。毫秒必爭，前端網(wǎng)頁性能最佳實踐這是一篇講關(guān)于性能優(yōu)化的。和的壓縮對頁面引用的樣式和文件進(jìn)行壓縮，合并一些和文件減少請求等，也是性能優(yōu)化的一個方法。 web性能優(yōu)化是一個比較大的一個問題，不是一天兩天就能學(xué)會的，需要在日常中思考和學(xué)習(xí)。先收藏一篇文章，以后有時間在慢慢研究。毫秒必爭，前端網(wǎng)頁性能最佳實踐這是一...

    Brenner 評論0 收藏0

  • web性能優(yōu)化

    摘要：性能優(yōu)化是一個比較大的一個問題，不是一天兩天就能學(xué)會的，需要在日常中思考和學(xué)習(xí)。毫秒必爭，前端網(wǎng)頁性能最佳實踐這是一篇講關(guān)于性能優(yōu)化的。和的壓縮對頁面引用的樣式和文件進(jìn)行壓縮，合并一些和文件減少請求等，也是性能優(yōu)化的一個方法。 web性能優(yōu)化是一個比較大的一個問題，不是一天兩天就能學(xué)會的，需要在日常中思考和學(xué)習(xí)。先收藏一篇文章，以后有時間在慢慢研究。毫秒必爭，前端網(wǎng)頁性能最佳實踐這是一...

    iamyoung001 評論0 收藏0

  • [譯] 唯快不破：Web 應(yīng)用的 13 個優(yōu)化步驟

    摘要：譯文地址譯唯快不破應(yīng)用的個優(yōu)化步驟前端的逆襲知乎專欄原文地址時過境遷，應(yīng)用比以往任何時候都更具交互性。使用負(fù)載均衡方案我們在之前討論緩存的時候簡要提到了內(nèi)容分發(fā)網(wǎng)絡(luò)。換句話說，元素的串形訪問會削弱負(fù)載均衡器以最佳形式 歡迎關(guān)注知乎專欄 —— 前端的逆襲歡迎關(guān)注我的博客，知乎，GitHub。 譯文地址：【譯】唯快不破：Web 應(yīng)用的 13 個優(yōu)化步驟 - 前端的逆襲 - 知乎專欄原文地...

    haobowd 評論0 收藏0

發(fā)表評論

0條評論

ZHAO_

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<