延遲加載在web開發中的應用心得

□ 何焱欣

一、引言

廣西網絡廣播電視臺網站采用Microsoft SQLServer（以下簡稱SQLServer）數據庫管理系統管理網站數據庫，具有安全性高、不易被攻擊等優點。網站要求后端開發人員優化SQLServer 語句和數據庫結構，為用戶提供快速、流暢的訪問體驗。優化數據庫可以從硬件、網絡、操作系統、數據庫管理系統、前端開發工具、索引、鏡像、存儲過程等多個方面考慮，本文僅討論應用延遲加載減少數據庫訪問頻率的方法。

二、延遲加載的兩種實際應用方式

大型門戶網站的首頁、二級頁廣泛存在著屏數多、信息量大的特點。當用戶打開一個多屏頁面時，需要多次向數據庫翻出請求，并接收大量的相應數據。如果頁面未進行相應優化，就需要等到所有數據接收完畢才開始顯示頁面內容。這種情況下，網絡條件欠佳的用戶往往得忍受數秒的白屏等候，用戶體驗不佳。為了優化用戶體驗，降低響應時間對用戶網絡質量的依賴，可以采用延遲加載的方式對頁面進行優化處理。廣西網絡廣播電視臺在實際應用中主要采用了圖片延遲加載和異步加載兩種方法。

（一）圖片延遲加載

圖片延遲加載被稱為“按需加載”，即網頁按照用戶的瀏覽需要來加載對應圖片，這種方法適用于多屏圖片列表頁面，如網站首頁、頻道列表頁和視頻列表頁等。

當開發者需要調用某些圖片資源時，區別于引用實體資源，此時改為引用一個小占位符。當用戶打開該網頁時，瀏覽器會緩存實際資源，并在用戶瀏覽到該位置的時候替換占位符，顯示實體資源。如果用戶加載網頁后不向下滾動網頁而是直接關閉網頁，則不會加載除網頁頂部以外的任何內容。

作為一種按需加載的優化方式，延遲加載能夠大幅度提升資源利用率，避免資源浪費，減輕服務器負擔。但是與此同時，由于頁面中會用占位符替代真實資源，可能會影響搜索器爬蟲對關鍵詞的抓取與識別，需要針對性地進行調整。另外，占位符也會降低代碼的可讀性，在團隊開發中需要做好注釋說明，以便其他團隊成員進行維護。

（二）異步加載

用戶在瀏覽網站時，絕大部分的時間會停留在詳情頁（也叫內容頁），因此詳情頁的響應速度很大程度上會影響用戶的瀏覽體驗。詳情頁雖然屏數少，但是由于功能模塊多，加上很多需要加載視頻，需要多次訪問服務器，其響應速度有時比列表頁更長。針對這種情況，應將詳情頁分割成不同的功能模塊，優先加載重要的部分，延后加載次要的部分，這樣可以顯著提高響應速度，縮短用戶白屏等待的時間。

首先要區分頁面中哪些模塊是主要的，哪些是次要的。以廣西網絡廣播電視臺新聞內容頁為例，內容標題、視頻和圖文部分顯然是用戶的主要瀏覽目標，作為主要內容。而側邊欄、相關閱讀和評論區用戶通常在瀏覽完主體以后才會瀏覽，因此作為次要內容。

次要的內容模塊全部使用JS 進行異步加載，并要求頁面在加載完頁面的主體內容以后再加載JS，這樣就可以保證用戶最感興趣的內容能在極短的時間加載出來。經測試，圖1 中的頁面如果同時加載全部內容需要6～10 秒，但是采用異步加載的方式主題內容在2 秒之內就可以加載完畢，而其他內容也可以在用戶瀏覽完主體內容前加載完畢。

圖1 廣西網絡廣播電視臺網站截圖

異步加載最顯著的優點是大幅改善了用戶體驗，通過減少短時間內數據交互的量，降低響應時間對用戶網絡條件的依賴，使絕大多數用戶都能擁有良好的瀏覽體驗。但是使用異步加載也會使源代碼變得復雜，調試難度變大，因此要考慮其適用場景，不可濫用。

三、結語

作為十分常用的兩種網頁優化手段，延遲加載和異步加載廣泛應用于各種網站開發項目中。雖然它們可以顯著改善用戶的瀏覽體驗，但是也要注意其對項目復雜性和可讀性帶來的影響，要充分評估應用場景是否適宜使用后方可實施。