【瀏覽器性能優(yōu)化】優(yōu)化關(guān)鍵渲染路徑——綜述

優(yōu)化關(guān)鍵渲染路徑（CRP，Critical Rendering Path），指的是：優(yōu)先響應(yīng)用戶的動作（點擊，拖動，雙擊等）。

反應(yīng)快，體驗佳的網(wǎng)站離不開瀏覽器的功勞，我們開發(fā)網(wǎng)站的時候?qū)懙氖歉鞣N標記語言（Markup），然后一個個絢麗無比的網(wǎng)頁就出現(xiàn)在了我們面前。那么，瀏覽器如何將 HTML，CSS，JS 轉(zhuǎn)變?yōu)閳D形呈現(xiàn)在我們面前的呢？

想要優(yōu)化網(wǎng)頁性能，我們需要搞明白從網(wǎng)頁內(nèi)容接收到渲染成圖像之間的步驟，這就是 “關(guān)鍵渲染路徑（Critical Rendering Path）”

優(yōu)化前和優(yōu)化后對比.png

優(yōu)化 CRP 可以讓我們顯著提升用戶首次看到網(wǎng)站內(nèi)容的時間。不僅如此，了解 CRP 也有助于我們優(yōu)化交互中的性能問題。網(wǎng)頁在交互時更新同樣很簡單——讓網(wǎng)頁更新速度保持在 60 幀/秒即可（響應(yīng)時間小于16ms）。但是首先，我們先看一個簡單的網(wǎng)頁是如何渲染的。

原文鏈接：
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容