頁面加載中的圖片性能優化【轉】

個人大部分性能優化工做都集中在JavaScript和CSS上，從早期的Move Scripts to the Bottom和Put Stylesheets at the Top規則。爲了強調這些規則的重要性，我甚至說過，「JS和CSS是頁面上最重要的部分」。

幾個月後，我意識到這是錯誤的。圖片纔是頁面上最重要的部分。

我關注JS和CSS的重點也是如何可以更快地下載圖片。圖片是用戶能夠直觀看到的。他們並不會關注JS和CSS。確實，JS和CSS會影響圖片內容 的展現，尤爲是會影響圖片的展現方式（好比圖片輪播，CSS背景圖和媒體查詢）。可是我認爲JS和CSS只是展現圖片的方式。在頁面加載的過程當中，應當先 讓圖片和文字先展現，而不是試圖保證JS和CSS更快下載完成。

我優化JS和CSS的目的就是讓頁面儘快渲染。

開始渲染的時間過遲

伴着關注渲染時間的念頭，我查詢了HTTP Archive來了解咱們的頁面開始渲染的時間。下面是一些衡量的數值：

• TTFB，第一個HTML文檔數據包到達的時間
• 開始渲染的時間
• 頁面onload觸發的時間

從世界最快的30萬個地址的測量值中，我提取出其中的50%和90%部分。以下面展現的同樣，在頁面加載的前三分之一段時間內，沒有任何渲染動做。

表格 1. 頁面加載過程當中的各個時間點
	TTFB	開始渲染	onload
50th percentile	610 ms	2227 ms	6229 ms
90th percentile	1780 ms	5112 ms	15969 ms

預加載

頁面等待渲染的時間是整個頁面加載時間的三分之一，這個事實讓人出乎意料。HTTP Archive上的數聽說明，頁面花費了32%到36%的時間來等待渲染開始。可是隻須要10%的時間來獲取第一個字節。所以，瀏覽器在22%到26%的 時間段內，雖然已經接受到了數據，可是卻不作任何渲染。在這段時間內瀏覽器一般都是在下載解析腳本和樣式—這二者都會阻礙頁面的渲染。

曾經，瀏覽器在這個時間段內（從接受到第一個字節到渲染開始）是處於空閒狀態的。這是由於舊的瀏覽器中，一個腳本的下載會阻塞其餘全部的資源的下載，好比IE6&7。瀏覽器廠商意識到雖然瀏覽器須要等待腳本下載執行完成後才能構建DOM，可是沒有理由阻塞頁面其餘資源的並行下載。在2009年的IE8以後，瀏覽器預加載其餘資源的請求。研究代表，預加載讓頁面加載速度快了20%。今天，全部主流瀏覽器都支持預加載。在這些瀏覽器數據中，我展現了每一個主流瀏覽器最先支持預加載的版本。

（順便說一句，我認爲預加載是最有效的性能提高方式。設想如今的瀏覽器中腳本下載會阻塞其餘資源，面對頁面上如此龐大的腳本數量，頁面的性能會糟糕到哪一個程度）

預加載和響應式圖片

這時咱們又要回到 Jason Grigsby的一條tweet：

我不得不認可一點。我試圖推動響應式圖片，而且愈來愈傾向於鼓勵開發者來使用JS阻止預加載。

Jason指的「響應式圖片」是一項技術，使用腳原本生成圖片。一般這個技術用於實現圖片對分辨率的適應。一個例子是Picturefill。當你將「預加載」和「響應式圖片」合起來思考——預加載會提早加載圖片的SRC，可是響應式圖片技術一般又沒有SRC，或者只是有一個1x1的替代圖片。這兩項技術之間有衝突。下面有一些權衡：

• 不要使用響應式圖片，這樣瀏覽器就能夠利用預加載儘快下載圖片，可是圖片可能會比須要的尺寸大不少，並且會耗費更長的時間來下載（耗費更多的流量）
• 使用響應式圖片，因爲沒有利用預加載，則意味着圖片會在腳本下載執行後下載，這個時候IMG標籤都已經建立好了。

接着Jason在後一條tweet中說：

讓我以爲不舒服的是，大部分結論都沒有通過測試。只是一些理論，而不是數據。

我並無數據來比較這兩個方式，可是HTTP Archive中開始渲染的時間佔總加載時間的三分之一也說明了一些問題。彷佛渲染確實被腳本阻塞了，也就是說IMG標籤尚未被建立。那麼在1/3點後 的時間裏，IMG標籤會被解析，而後JS和CSS纔會執行並開始下載須要的圖片。

我認爲，在頁面加載過程當中初始化圖片請求太晚了，而且相對使用預加載後的效果，頁面的渲染時間確實被推遲了。再次聲明，我沒有數據來對比這兩項技術。同時，我也不肯定在markup技術的響應式圖片中使用預加載會有怎樣的改觀。（Jason有篇博客文章有相關的內容，The real conflict behind <picture> and @srcset）

理想狀況下，咱們利用markup解決了預加載和響應式圖片之間的衝突問題。直到那時，我依然擔憂這樣的技術在開發社區中大量使用會讓響應式圖片付出預加載失效的代價。我但願瀏覽器能夠加強預加載的效果，那麼如今和將來裏網站就可以充分利用預加載的功能。