「按需加載」的應用

 

按需加載是前端性能優化中的一項重要措施，按需加載是如何定義的呢？顧名思義，指的是當用戶觸發了動做時才加載對應的功能。觸發的動做，是要看具體 的業務場景而言，包括但不限於如下幾個狀況：鼠標點擊、輸入文字、拉動滾動條，鼠標移動、窗口大小更改等。加載的文件，能夠是JS、圖片、CSS、 HTML等。後面將會詳細介紹「按需」的理解。

按需解析HTML

按需解析HTML，就是頁面一開始不解析HTML，根據須要來解析HTML。解析HTML都是須要必定時間，特別是HTML中包含有img標籤、引 用了背景圖片時，若是一開始就解析，那麼勢必會增長請求數。常見的有對話框、拉菜單、多標籤的內容展現等，這些一開始是不須要解析，能夠按需解析。實現按 需解析，首先用html 這個標籤來對忽略對HTML的解析。而後根據觸發的動做，把script裏面的HTML獲取出來，填充到對應的節點中。

示例代碼以下：

咱們一塊兒來看下demo，當運行demo並抓包發現：當頁面加載結束時，並無看到圖片的請求；當點「點我展現HTML」按鈕時，經過抓包發現有圖片請求。

曾經作個demo並通過測試發現，若是是直接解析HTML（不包含有請求CSS圖片和img標籤），耗費的時間要比用html大約慢1-2倍，若是是還包括請求有CSS圖片、img標籤，請求鏈接數將會更多，可見按需解析HTML，對性能提高仍是有必定效果。

按需加載圖片

按需加載圖片，就是讓圖片默認開始不加載，並且在接近可視區域範圍時，再進行加載。也稱之爲懶惰加載。你們都知道，圖片一會兒所有都加載，請求的次數將會增長，勢必影響性能。

先來看下懶惰加載的實現原理。它的觸發動做是：當滾動條拉動到某個位置時，即將進入可視範圍的圖片須要加載。實現的過程分爲下面幾個步驟：

•  生成標籤時，用data-src來保存圖片地址；
• 記錄的圖片data-src都保存到數組裏；
• 對滾動條進行事件綁定,假設綁定的函數爲function lazyload(){};
• 在函數lazyload中，按照下面思路實現：計算圖片的Y座標，並計算可視區域的高度height，當Y小於等於(height+ scrollTop)時，圖片的src的值用data-src的來替換，從而來實現圖片的按需加載；

下面看一個示例代碼：

運行上述的示例代碼，並抓包會發現：一開始並無看到圖片的請求，但當拉動滾動條到頁面下面時，將會看到圖片發送請求。目前不少框架都已經支持圖片 的懶惰加載，平時在開發中，你們能夠對圖片實現懶惰加載，這是有效提高性能的一個方法，特別是網頁圖片比較多時，更加應該使用該方法。

按需加載除了上述場景外，還有更多的場景。以下圖：

頁面一開始，加載的是「所有」標籤裏面的內容，但在點擊「指定商品折扣券」標籤時，纔去加載對應的圖片。實現思路以下：

•  生成標籤時，用data-src來保存圖片地址；
•  在點擊標籤事件時，獲取全部圖片，圖片的src的值用data-src的來替換；

示例代碼以下：

運行上述代碼並抓包並發現：一開始沒有看到有圖片的請求，但點擊「指定商品折扣券」標籤時，看到有圖片的請求發送。須要注意的是，爲了確保體驗，首屏的圖片不建議懶惰加載，而應該直接展現出來；避免一開始用戶就沒法看到圖片，在IE下看到一個虛線框，這樣體驗反而很差。

按需執行JS

按需執行JS和懶惰加載圖片比較相似。當打開網頁時，若是等全部JS都加載並執行完畢，再把界面呈現給用戶，這樣總體上性能會比較慢，體驗也不友好。就是當某個動做觸發後，再執行相應的JS，以便來渲染界面。按需執行JS，能夠應用在下列場景：執行一些耗時比較久的JS代碼，或執行JS後，須要加載比較多圖片、加載iframe、加載廣告等。在一些webapp的應用中，或比較複雜的頁面時，更加應該使用這種方法。

實現思路和按需加載比較相似：

•  對滾動條進行事件綁定,假設綁定的函數爲function lazyExecuteJS(){};
•  在函數lazyExecuteJS中，按照下面思路實現：選擇一個元素做爲參照物，當滾動條即將靠近時該元素位置，開始執行對應的JS，從而實現對界面的渲染；

示例代碼以下（以YUI3框架爲例）：

首先下載最近封裝的異步滾動條加載組件：Y.asyncScrollLoader，而後運行下面的代碼（須要把頁面和Y.asyncScrollLoader.js 放在同一個目錄）：

運行上述代碼並抓包發現：打開頁面時，是不沒有看到有對應的圖片請求，但當滾動條拉到必定位置時，loadAD的函數被執行。

按需加載JS

JavaScript無非就是script標籤引入頁面，但當項目愈來愈大的時候，單頁面引入N個js顯然不行，合併爲單個文件減小了請求數，但請 求的文件體積卻很大。這時候比較合理的作法就是按需加載。按需加載和按需執行JS比較相似，只不過要執行的JS變成了固定的「實現加載JS」的代碼。按需 加載實現的思路以下：

• 對滾動條進行事件綁定,假設綁定的函數爲function lazyLoadJS(){};
• 在函數lazyLoadJS中，按照下面思路實現：選擇一個元素做爲參照物，當滾動條即將靠近時該元素位置，開始執行加載對應JS；
•  在JS加載完畢後，開始執行相應的函數來渲染界面；
• 在實際項目中，能夠根據須要設置一個目標距離，好比還有200像素該元素即將進入可視區域；按需加載JS和按需執行JS比較相似，這裏就再也不單獨提供示例代碼了；你們能夠在按需執行JS的中示例中，把loadAD函數更改成動態加載JS便可；

分屏展現

當一個網頁比較長，有好幾個屏幕，並且加載了大量的圖片、廣告等資源文件時，分屏展現，可提高頁面性能和用戶體驗。其實分屏展現也能夠從按需加載的 的角度來看待，默認是加載第一屏幕的內容，當滾動條拉動即將到達下一個屏幕時，再開始渲染下個屏的內容。換言之，是把圖片、背景圖片、HTML一塊兒按需加 載，一開始不對HTML進行解析，那麼背景圖、img圖片也不會進行加載。

分屏展現的思路以下：

•  根據具體業務狀況，收集主流最大的分辨率的高度；假設這裏是用960px;
•  按照這個高度進行分屏，依次把下一個屏幕內的HTML用來表示；
•  爲了讓頁面的高度不變，須要讓textarea佔據必定的頁面空間，也就是讓頁面出現對應的滾動條；所以須要指定樣式visility:hidden，並指定它的高度和寬度。
• 利用上述講的按需執行JS，把裏面的HTML代碼提取出來，從新填充到textarea的父節點上，即可實現解析對應HTML，從而實現分屏展現。

示例代碼以下（須要把頁面和Y.asyncScrollLoader.js 放在同一個目錄）：

運行上面代碼並抓包發現：在默認首屏，並無去解析textarea裏面的代碼，但當拉動滾動條到必定位置時，textarea裏面的HTML依次被解析，從而實現了網頁分屏展現。

使用「按需加載」進行性能優化時，須要合理選擇觸發的動做。「按需加載」的最大優點在於減小了沒必要要的資源請求，節省流量，真正實現「按需所取」。 可是「按需加載」自己若是使用不當也會影響用戶體驗，由於「按需加載」的時機在用戶觸發某動做以後，若是用戶的網速比較慢的話，加載腳本或執行腳本可能需 要等候較長的時間，而用戶則不得不爲此付出代價。所以，若是要使用「按需加載」則須要選擇正確的觸發動做，若是是根據滾動條來觸發，可考慮一個目標距離， 假設目標距離還有200像素即將進入可視區域，則就開始加載，而不是等到進入了可視區域才加載。以上所講的各類「按需加載」類型，均可以封裝成相應的組 件，而後就能夠在項目中進行應用。