基於使用者行為的圖片等資源預載入

一、圖片的懶載入和預載入

懶載入和本文要提到的預載入實際是不同的概念。

典型的懶載入，例如本博文章的圖片，當使用者滾動圖片進入窗體的時候，才去載入；或者使用者點選選項卡，原本隱藏的圖片此時再去載入，這個也稱之為懶載入。

而預載入則是，使用者還沒有行為發生，資源已經載入完畢，從這一定義來講，我們傳統圖片啪啪啪全部載入完畢，本質上也是預載入，好處就在於，體驗好啊，沒有泛白或者菊花的出現。不足也很明顯，那就是資源可能白白載入了，尤其視訊之類的，小明開啟bilibili就是來圍觀廣告的，結果，百兆視訊巴拉拉魔仙般全載入好了，搞得好像流量不要錢的樣子，也是不可取的。

那有什麼辦法可以把懶載入的省資源省流量和預載入良好體驗結合在一起呢？有一些比較好的案例，那就是基於使用者行為的資源預載入。

二、基於使用者行為的資源預載入

前段時間做了個俗稱H5的頁面，共16個分頁，近乎全向量，三五請求，秒載入，除去音樂和統計指令碼，100K不到，華麗的平面設計風格，浮誇的向量動畫效果，爪機直接點選此連結圍觀（PC瀏覽器會直接跳走）， 如果你是桌面瀏覽器訪問的，拿起你的手機掃下面的碼子~

其中，就用到了基於使用者行為的預載入。

此H5頁面近乎全向量，但實際上還是有圖片使用的，例如，2007年也就是那個有煙霧canvas效果的哪一年的那個粽子，如果大家檢視資料請求，會發現首屏根本就沒有圖片資源的請求，但是，我們體驗2007年的時候，卻沒有任何的因圖片延時載入帶來的視覺上的挫頓感，為什麼呢？

那是因為，你要檢視年份，你就要必須經過一個步驟，就是長按下面的“按住探索”按鈕：

此時，按住就是一個使用者行為，他似乎宣告著，我即將進入某一年份，一些圖片資源可以預載入了。所謂預載入，就是圖片不一定會被使用者看到，但是載入了；基於使用者行為的預載入就是，雖然在使用者看不到的時候載入了，但是，使用者卻有更大或者說很大的概率會看到此圖。算是，懶載入和傳統預載入中間的一種權衡策略。

再舉個更典型，更常見，更有實用價值的例子，那就是點選事件下的選項卡切換效果的預載入。

下圖所示是一個常見的選項卡：

此選項卡對應皮膚內容是包含圖片資訊的，由於，選項卡是點選行為觸發的切換效果，因此，後面的“美女2”和“美女3”按鈕對應的圖片如果不點選，使用者是永遠都看不到的，此時這兩位美女圖片就沒必要載入，因為，很可能，使用者不會點這兩個選項卡按鈕。

因此，選項卡2和3我們需要歲圖片進行懶載入處理，也就是頁面載入預設不載入的。

然後，我們通常的處理是當使用者去點選選項卡按鈕的時候，在對應皮膚呈現的時候，我們再去載入圖片內容。於是，就存在這樣一個不好的體驗——由於內容呈現瞬時，而圖片呈現是非同步的，就很容易出現選項卡主體內容切換過來了，結果是個空白，過了會兒圖片才出現。

其實，我們可以基於某些行為對此圖進行不一樣的預載入，來提示我們的瀏覽體驗，怎麼做呢？

我們絕大數使用者都是滑鼠去點選選項卡的，而點選選項卡之前會有其他一些行為發生，例如：

mouseover按鈕的容器 → mouseover按鈕 → mousedown按鈕等。

於是，就給了我們機會，在click行為發生之前去預載入圖片，例如，我們滑鼠hover按鈕的時候。一般一個使用者hover一個按鈕再click行為技術，說有0.5秒的時長一點都不為過吧，因為光滑鼠按下再抬起就上百毫秒了。從hover到click之間的這段時間，已經足夠我們圖片進行預載入了。而hover到click的行為是極大概率事件。於是乎，我們通過提前捕捉使用者的其他行為實現了懶載入和預載入的完美結合！

眼見為實，您可以狠狠地點選這裡：選項卡使用者hover行為下的圖片預載入demo

點選選項卡，十有八九圖片瞬間就呈現了，就是因為你hover的時候，圖片已經去載入了。大家有興趣可以開啟控制檯觀察資源的載入，就可以明白上面巴拉巴拉說的hover預載入是怎麼回事了。

三、使用者行為與預載入其他

其實HTML5中有原生的預載入屬性，名為prefetch和prerender，例如：

如果你有很大概率會訪問href指向的資源，則可以加入上面的程式碼，瀏覽器會預載入一些資源，訪問就會更迅速！

相容性如下表：

prerender比prefetch多了個er，有“人”的意味在裡面，表示的是預載入頁面，準確點就是瀏覽器會在後臺（頁面不可見）的位置預載入和渲染我們的頁面，當我們真的去訪問這個頁面的時候，就會倏地呈現在我們面前，相比prefetch，相容性要差一些，目前FireFox和Android都還未支援：

拋開HTML預載入屬性不談，實際上，Chrome瀏覽器本身內建了網頁連結的預載入，以提高網頁載入速度，在設定中可以窺見到：

以前叫做“預測網路操作”，現在改為“聯想查詢服務”，含義更加晦澀了，但是，我確定的是，和上面的選項卡例子如出一轍，對於傳統的URL連結，Chrome瀏覽器下，當你hover該連結的時候，頁面的載入已經在執行了，所謂“預測網路操作”就有預測你即將訪問該連結的意味在裡面；當然，現在的預載入行為可能要更加複雜和準確了。

四、結束語

當然，使用者的行為不僅侷限於手指按下，或者hover。舉個其他例子，搜尋行為，當你在一個搜尋框裡面開始輸入內容的時候，其實我們就可以預測，很大可能性馬上會跳到搜尋結果頁面，此時，我們是不是可以預載入搜尋頁面的一些資源，這樣，一回車，頁面啪地一聲就出現了，豈不帥呆！

關鍵要有心，在效能和體驗之間找出更好地解決策略。

歡迎提供更多預載入的精彩案例！

感謝閱讀，週末愉快！