□ 何焱欣

一、引言

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

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

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

（一）圖片延遲加載

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

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

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

（二）異步加載

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

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

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

圖1 廣西網(wǎng)絡廣播電視臺網(wǎng)站截圖

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

三、結語

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