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

按需解析HTML

按需解析HTML，就是頁面一開始不解析HTML，根據需要來解析HTML。解析HTML都是需要一定時間，特別是HTML中包含有img標簽、引用了背景圖片時，如果一開始就解析，那么勢必會增加請求數。常見的有對話框、拉菜單、多標簽的內容展示等，這些一開始是不需要解析，可以按需解析。實現按需解析，首先用html?這個標簽來對忽略對HTML的解析。然后根據觸發的動作，把script里面的HTML獲取出來，填充到對應的節點中。

示例代碼如下：

我們一起來看下demo，當運行demo并抓包發現：當頁面加載結束時，并沒有看到圖片的請求；當點“點我展示HTML”按鈕時，通過抓包發現有圖片請求。

曾經做個demo并經過測試發現，如果是直接解析HTML（不包含有請求CSS圖片和img標簽），耗費的時間要比用<script?type=”text x-template”="">html大約慢1-2倍，如果是還包括請求有CSS圖片、img標簽，請求連接數將會更多，可見按需解析HTML，對性能提升還是有一定效果。

按需加載圖片

按需加載圖片，就是讓圖片默認開始不加載，而且在接近可視區域范圍時，再進行加載。也稱之為懶惰加載。大家都知道，圖片一下子全部都加載，請求的次數將會增加，勢必影響性能。

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

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

下面看一個示例代碼：

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

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

頁面一開始，加載的是“全部”標簽里面的內容，但在點擊“指定商品折扣券”標簽時，才去加載對應的圖片。實現思路如下：

• ?生成<img?data-src=”url”>標簽時，用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像素即將進入可視區域，則就開始加載，而不是等到進入了可視區域才加載。以上所講的各種“按需加載”類型，都可以封裝成相應的組件，然后就可以在項目中進行應用。

轉載于:https://www.cnblogs.com/xiaolei1314/p/3430486.html

總結

以上是生活随笔為你收集整理的“按需加载”的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。