簡說 優化關鍵渲染路徑

回顧 關鍵渲染路徑

簡說瀏覽器渲染－－關鍵渲染路徑

渲染性能優化須要關注的關鍵點

1. 減小資源請求的字節數

2. 減小關鍵資源的數量

3. 縮短關鍵呈現路徑的長度

減小資源請求的字節數

三個主要的方法：

1. 代碼瘦身，如：去註釋

2. 壓縮

3. 緩存

減小關鍵資源的數量

什麼是關鍵資源？

會阻塞頁面渲染的資源，這些資源會應用在關鍵呈現路徑中。

html是第一個關鍵資源，style.css會應用於CSSOM的構建，是第二個關鍵資源，app.js會阻塞DOM的構建，也屬於關鍵資源

這裏，由於js是異步的，不會阻塞關鍵呈現路徑，不屬於關鍵資源，因此共有2個關鍵資源

如何減小關鍵資源的數量

css會阻塞呈現，而且會阻止之行js,若是CSSOM不構建，就沒法構建Render Tree.

• 其實內聯樣式對渲染性能很友好，可是爲了樣式的重用，和讀寫分離，每每不予採用，場景適合，能用內聯便用內聯。

• 把媒介查詢放在html的媒體元素中，能夠根據狀況加載樣式資源，避免了沒必要要的資源的加載。好比：小屏只加載小屏資源，橫屏資源 @media all and (orientation : landscape) { h2{color:red;}/橫屏時字體紅色/｝，能夠爲更須要的資源騰出空間...

js會阻塞DOM的構建，
咱們一半會推遲js，或者使用異步js.

縮短關鍵呈現路徑的長度

什麼是鍵呈現路徑長度？

關鍵呈現路徑長度就是取資源的次數

這裏關鍵路徑長度和關鍵資源數一致，都爲2.

瀏覽器有很智能的欲加載器，他會在接收到文檔後偷瞄文檔中須要哪些資源，若是發現了要加載的資源，當解析被阻塞時，他就會盡量多地去加載這些資源。當解析被阻止時，這裏，css和js會同時下載，因此關鍵路徑長度仍爲2

如何縮短關鍵呈現路徑長度？

瀏覽器會有並行加載資源數的限制，若是網頁很大，會須要來回屢次獲取資源。
因此要根據狀況合理控制文件資源大小

參考

優達的網站性能優化