□ 何焱欣

一、引言

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

二、延遲加載的兩種實(shí)際應(yīng)用方式

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

（一）圖片延遲加載

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

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

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

（二）異步加載

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

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

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

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

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

三、結(jié)語

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