電商網(wǎng)站的臃腫度研究分析

馮偉光

摘? 要：網(wǎng)站臃腫度，泛指網(wǎng)頁的代碼資源、圖片數(shù)量、整體結(jié)構(gòu)的復(fù)雜度以及其總體積大小的程度。網(wǎng)頁越臃腫，用戶在瀏覽及使用時越容易感到吃力。在眾多網(wǎng)站當(dāng)中，電商類網(wǎng)站是最為復(fù)雜的一種網(wǎng)站。其需要展示多種產(chǎn)品數(shù)據(jù)，要經(jīng)過多種過濾檢索，這導(dǎo)致目前市面上的電商類網(wǎng)站越來越臃腫。本文主要提出臃腫度概念和意義，分析電商網(wǎng)站臃腫原因，并給出一定的優(yōu)化方案。

關(guān)鍵詞：網(wǎng)站;臃腫度;網(wǎng)站優(yōu)化;懶加載

中圖分類號：TP393.092 文獻(xiàn)標(biāo)識碼：A 文章編號：2096-4706（2019）01-0121-03

Research on the Bloated Degree of E-commerce Websites

FENG Weiguang

（Guangzhou Vocational School of Tourism and Business，Guangzhou? 510280，China）

Abstract：Website bloated，refers to the page code resources，the number of pictures，the complexity of the overall structure and its overall size of a degree. The more bloated pages，the harder users are browsing and using. Among many websites， e-commerce websites are the most complex websites. It needs to display a variety of product data，through a variety of filtering and retrieval，which leads to the current market of business websites more and more bloated. This paper mainly puts forward the concept and significance of bloated degree，analyzes the reasons for bloated e-commerce websites，and gives some optimization programs.

Keywords：website;bloated degree;website optimization;lazy load

0? 引? 言

互聯(lián)網(wǎng)高速發(fā)展，網(wǎng)站已經(jīng)滲透到人們工作、生活、學(xué)習(xí)的各個方面。90年代的網(wǎng)頁，是極其簡陋的，網(wǎng)站界面上甚至一張圖片也沒有。如今的網(wǎng)站，已經(jīng)發(fā)生了翻天覆地的變化。絢麗多彩的圖片，靈活流暢的輪播照片，內(nèi)嵌視頻，甚至頁面游戲，都能在網(wǎng)站上完成。

近年來，隨著HTML5新技術(shù)的推廣，以及Node.js等前端技術(shù)興起，網(wǎng)站建設(shè)已經(jīng)發(fā)生了一個質(zhì)的變化[1]。但是隨之而來的，是網(wǎng)站越來越臃腫。多數(shù)情況下，用戶僅需要一些簡單的信息，但點(diǎn)開網(wǎng)站界面，獲取到的信息過于龐雜。如此臃腫的頁面，給用戶使用網(wǎng)絡(luò)增加不少負(fù)擔(dān)，且對移動端用戶帶來的影響較電腦端更大，也更消耗設(shè)備的運(yùn)行性能及占用更多的緩存空間。在網(wǎng)絡(luò)傳送方面，臃腫的網(wǎng)站，往往會給服務(wù)器流量帶來不必要的耗損。研究和分析網(wǎng)站臃腫度，將有助提高網(wǎng)站建設(shè)的質(zhì)量，提高用戶體驗(yàn)感，同時也為服務(wù)器減壓。

1? 臃腫度概論

從用戶的角度，衡量一個網(wǎng)頁的好壞，有多個方面。首屏渲染時間是極其重要的一個衡量部分[2]。它是從手動輸入網(wǎng)址后按回車那一刻開始，直到所有資源加載完畢的時間。首屏渲染時間，十分影響用戶的體驗(yàn)。通常加載時間超過5秒的網(wǎng)頁，80%的用戶就會失去耐心等待。在用戶使用過程中，網(wǎng)頁操作是否流暢，頁面反饋是否及時，很大程度上和網(wǎng)頁的性能消耗有關(guān)。如果一個網(wǎng)頁有大量冗余代碼，結(jié)構(gòu)混亂，那么網(wǎng)頁反應(yīng)就會慢，甚至失去響應(yīng)。衡量網(wǎng)站好壞的一個方面便是用戶在獲取信息時是否便捷高效。如果一個網(wǎng)站的網(wǎng)頁上堆滿垃圾信息，用戶一定會感到迷惑，難以及時找到所需信息。以上各個方面，均是網(wǎng)站臃腫度的一個體現(xiàn)。

網(wǎng)頁臃腫度會直接影響用戶的使用感受。一個臃腫的網(wǎng)站，不利于企業(yè)的業(yè)務(wù)發(fā)展。網(wǎng)頁臃腫度的具體研究內(nèi)容包括網(wǎng)頁的大小、網(wǎng)頁的加載時間、網(wǎng)頁的內(nèi)容多少與加載時間比、網(wǎng)頁的內(nèi)容多少與網(wǎng)頁的體積比等。一般而言，人們總是希望在保證網(wǎng)頁使用的情況下，花最少的時間，最少的網(wǎng)絡(luò)開銷，看到最多的內(nèi)容。然而，在開發(fā)過程中，可能由于開發(fā)人員的疏忽，所用技術(shù)的限制，或者網(wǎng)頁設(shè)計(jì)的問題，最終完成的頁面體積十分大，讓用戶等待比較長的時間，才能成功加載頁面。

2? 電商網(wǎng)站臃腫度定義

去測評一個網(wǎng)站的臃腫度，有許多標(biāo)準(zhǔn)。其中相關(guān)的衡量維度有網(wǎng)頁的請求數(shù)量，各類請求大小，截圖壓縮后的大小等。測量工具可選用谷歌瀏覽器，打開控制臺，即可查看該網(wǎng)站相關(guān)的網(wǎng)絡(luò)請求信息如圖1。綜合一個或者多個維度去衡量，有不同的結(jié)論表現(xiàn)。以下介紹三個角度去測評。

2.1? 截圖比

WebBS1=TotalPageSize/PageImageSize（總請求資源大小/頁面截圖大小，單位均為kB）

總請求資源大小，就是加載這個頁面，需要多少網(wǎng)絡(luò)傳送開銷。亦即，這個參數(shù)就是代表加載這個網(wǎng)頁所需要的成本。

頁面截圖大小，就是加載回來的內(nèi)容的可用度大小。因?yàn)橛脩艚佑|到的，是直接從視覺去接觸的，因此從用戶感知的角度出發(fā)，網(wǎng)頁就是一張圖片，這個圖片有多大，內(nèi)容就有多少，這個圖片有多復(fù)雜，內(nèi)容就有多復(fù)雜。換而言之，這個參數(shù)越大，說明加載回來的東西越有用。

2.2? 請求比

WebBS2=TotalPageSize/TotalRequests（總請求資源大小/總請求數(shù)量，前者單位為kB，后者單位為個數(shù)）

此定義用于分析訪問該頁面時，計(jì)算平均每個請求的大小。當(dāng)WebBS2偏大時，說明該頁面的平均請求內(nèi)容過長，可能很大程度上，用戶會等待某一個或多個資源很長時間。當(dāng)WebBS2過小的時候，說明開發(fā)人員可能存在濫用請求的情況，沒有規(guī)劃資源，將近似資源合并成一個請求。瀏覽器允許每個頁面并發(fā)的請求數(shù)是有限的。

因?yàn)闉g覽器的并發(fā)請求有限，所以如果并發(fā)請求過多，則請求會被掛起，知道前面的請求完成了，退讓出空位，才會讓后面請求執(zhí)行。因此請求是比較昂貴的。WebBS2的定義可以看出網(wǎng)頁對請求的利用率。

2.3? 總體比

WebBS3=TotalPageSizeM（總體積，單位為MB）

TotalPageSizeM是所訪問頁面的全部請求所返回的總大小，換算成MB為單位，便于比較計(jì)算。

WebBS3是總體比，是訪問該頁面的全部資源的體積大小，直接從一個總的角度去分析網(wǎng)絡(luò)臃腫度?？傮w積直接影響著網(wǎng)頁的加載速度，加載時間等?？傮w積越大，加載越慢，耗時更久。這并不意味著總體積越小越好，應(yīng)該要在保證內(nèi)容足夠的前提下，盡量消減總體積。

3? 電商網(wǎng)站臃腫原因分析

3.1? 新技術(shù)的進(jìn)步

近十年的互聯(lián)網(wǎng)大爆發(fā)，促使網(wǎng)絡(luò)通訊能力大大提升，寬帶網(wǎng)速已經(jīng)可以達(dá)到100兆甚至更高，移動通訊的4G技術(shù)，也給使用者帶來了高速的網(wǎng)絡(luò)通路。在網(wǎng)絡(luò)加載如此便捷的前提下，網(wǎng)站的體積不斷增大。在約早十年前的網(wǎng)絡(luò)時代，在移動端打開一個網(wǎng)頁，需要耗時幾秒，而加載過來的內(nèi)容，只有十分簡潔的文字和小圖標(biāo)，那時候人們訪問的網(wǎng)站，多數(shù)是新聞或小說這類以文字為主題的網(wǎng)站，網(wǎng)站十分簡單。而如今，得益于通訊技術(shù)的進(jìn)步，在移動端設(shè)備上，加載數(shù)兆大小的網(wǎng)站，所花費(fèi)的時間可能不到一秒。

如此便捷的網(wǎng)絡(luò)環(huán)境，促使網(wǎng)站設(shè)計(jì)者往網(wǎng)站上增加更多的內(nèi)容，包括高清圖片、音頻視頻、精美動效和游戲等。很多時候，用戶在某個網(wǎng)頁，需要查看的東西，僅僅是一小部分內(nèi)容，而網(wǎng)站卻給用戶附帶了其他推薦內(nèi)容、相似內(nèi)容、廣告內(nèi)容等。這些內(nèi)容不僅僅占據(jù)著視覺上的位置，同時也占據(jù)了不少網(wǎng)絡(luò)請求，影響了瀏覽性能，網(wǎng)站也變得越來越臃腫。

除了網(wǎng)絡(luò)傳輸上的技術(shù)進(jìn)步，還有開發(fā)技術(shù)上的全面更新。以前的網(wǎng)站，并沒有明確地區(qū)分前端后端開發(fā)。以前淘寶的網(wǎng)站基本上都是基于MVC框架Webx，架構(gòu)決定了前端只能依賴后端。所以他們的開發(fā)模式依然是，前端寫好靜態(tài)Demo，后端轉(zhuǎn)換成VM模版。

目前大多數(shù)新網(wǎng)站均采取前后端分離，將更多的交互邏輯分配給前端來處理，如圖2所示，后端專注于其本職工作，負(fù)責(zé)數(shù)據(jù)模型Model層，進(jìn)行權(quán)限控制以及進(jìn)行運(yùn)算工作。而前端開發(fā)人員需要與后臺解耦，獨(dú)立控制視圖View層。前端可以根據(jù)業(yè)務(wù)邏輯，通過Ajax主動去獲取后臺數(shù)據(jù)（Controller），并插入視圖層展示。前端需要獨(dú)立完成與用戶交互的整個過程。因此，前端負(fù)責(zé)的內(nèi)容就變得更多了，業(yè)務(wù)邏輯更多地交給前端去控制，前端開發(fā)人員需要引用更多的框架或者寫更多的邏輯去實(shí)現(xiàn)，因此網(wǎng)頁會變得越來越復(fù)雜、臃腫。

3.2? 圖片資源過多

電商網(wǎng)站是圖片加載數(shù)量最多的網(wǎng)站類型之一。在主流的電商網(wǎng)站中，主頁的風(fēng)格，大多數(shù)是商品的大圖展示，往下滾動，便是各種精美商品的中型圖片展示。一般電商網(wǎng)站都是做長頁面的，即一頁加載的內(nèi)容非常多，方便用戶瀏覽，不用通過點(diǎn)擊頁碼切換商品。因此，圖片資源過多是導(dǎo)致電商網(wǎng)站臃腫的主要原因之一。

3.3? 呈現(xiàn)效果復(fù)雜

電商企業(yè)之間的競爭非常激烈，電商網(wǎng)站會通過各種酷炫的網(wǎng)頁效果，來吸引用戶，留存用戶。例如常見的圖片輪播、全屏紅包彈窗、各種精美動畫等。除此復(fù)雜的設(shè)計(jì)外，網(wǎng)站開發(fā)人員還需要設(shè)計(jì)更多邏輯，這個環(huán)節(jié)就很考驗(yàn)網(wǎng)站開發(fā)人員的技術(shù)能力。如上述的各種動效，網(wǎng)上均有很多CMS模板或框架可以支持使用，開發(fā)者無需關(guān)心具體動效實(shí)現(xiàn)細(xì)節(jié)，只需要引用開源框架的所有代碼，按照要求配置即可實(shí)現(xiàn)。這種做法得到大多數(shù)開發(fā)者的青睞，因?yàn)樗蟠鬁p少了開發(fā)難度，節(jié)省了時間。

但是，這種做法犧牲的是網(wǎng)頁的質(zhì)量。很多時候這種模板框架的功能是大而全的，開發(fā)者會因?yàn)樾枰玫侥硞€效果，而需要引入整個框架。這種模板或框架，通常也依賴多個其他的模板和框架，結(jié)果為了實(shí)現(xiàn)一個效果，引入了不少冗余的資源，網(wǎng)站加載的JavaScript文件數(shù)量過多，邏輯復(fù)雜，會降低瀏覽器性能。

4? 降低電商網(wǎng)站臃腫度

4.1? 使用CSS Sprite技術(shù)

市面上的瀏覽器，均有并發(fā)HTTP請求數(shù)量限制，即會限制一個網(wǎng)站同時發(fā)出的HTTP請求數(shù)量，在發(fā)出的HTTP請求沒有被結(jié)束的時候，新的HTTP請求不會被開始。因此，每一個請求都是非常資源。在電商網(wǎng)站中，如果每一個圖片，包括零碎的小圖標(biāo)，都占用一個請求去獲得，那十分浪費(fèi)請求資源。客戶端每顯示一張圖片都會向服務(wù)器發(fā)送請求。所以，圖片越多請求次數(shù)越多，造成延遲的可能性也就越大。

CSS Sprite技術(shù)，允許開發(fā)者將眾多零碎的圖片，諸如小圖標(biāo)等，通過Photoshop或其他圖片工具，切片合并成一個大圖（如圖3），然后統(tǒng)一通過一個請求，發(fā)送到瀏覽器端。

開發(fā)者需要做的事情，就是利用CSS中的background-position、background-repeat，background-position的組合，來定義每個小圖標(biāo)在大圖上的對應(yīng)位置，通過大圖加精準(zhǔn)位置定位切割的方式，去顯示出多個小圖標(biāo)。這樣，就是通過一個CSS代碼，再加上一個合并而成的圖片，就代替了同時傳送多個小圖標(biāo)的方法。

在電商網(wǎng)站建設(shè)中，均存在大量的小圖標(biāo)，如商品分類logo、設(shè)置菜單logo等。采用CSS Sprite能夠大量地減少網(wǎng)頁的HTTP請求，降低網(wǎng)站臃腫度。同時可以加快頁面加載速度，大大地提高網(wǎng)站的性能。

4.2? 懶加載技術(shù)

絕大多數(shù)的電商網(wǎng)站，都用長頁面去展示商品信息，通常需要滾動很久，展示很多信息，才會到達(dá)網(wǎng)頁底部，或者一直沒有到底部。電商網(wǎng)站采用長頁面這一做法，目的是為了讓用戶更輕易地獲得海量信息，只需要滾動滾輪，不需要點(diǎn)擊頁碼分頁瀏覽。但這一做法，會增加網(wǎng)頁的臃腫度，因?yàn)橐粋€頁面內(nèi)容太多，需要加載的圖片數(shù)量必然會增多。一打開頁面就發(fā)送上百的圖片請求，服務(wù)器的壓力十分大。

懶加載技術(shù)就非常適用于頁面很長的業(yè)務(wù)場景。懶加載的思路非常簡單，打開頁面的時候，優(yōu)先加載網(wǎng)頁第一屏（用戶首先看到的屏幕內(nèi)容）中的內(nèi)容。待用戶往下滾動的時候，再按需加載相關(guān)資源。

懶加載技術(shù)主要通過JavaScript腳本去實(shí)現(xiàn)。其主要實(shí)現(xiàn)思路是，在每個HTML中的每個IMG標(biāo)簽，定義一個data-src屬性存放圖片地址，并將原來應(yīng)該放圖片地址的SRC屬性指向loading的圖片。在頁面初步加載的時候，先通過JavaScript獲得到整個頁面中所有包含data-src屬性的圖片元素，將其加入到一個緩存數(shù)組，然后監(jiān)聽滾動事件，當(dāng)滾動事件被觸發(fā)的時候，遍歷緩存數(shù)組的每一個元素，并判斷該元素是否出現(xiàn)在視窗中，如果出現(xiàn)在視窗中，即可將SRC屬性的值替換成data-src的值，從而達(dá)到加載圖片的目的。

懶加載技術(shù)可以為網(wǎng)站節(jié)約大量不必要的圖片加載數(shù)量，使得首次加載的資源大大減少，讓網(wǎng)站運(yùn)行得更流暢。

5? 結(jié)? 論

電商網(wǎng)站的臃腫度跟多種因素有關(guān)，包括網(wǎng)站本身的規(guī)模大小，網(wǎng)站的界面設(shè)計(jì)，以及建站所用技術(shù)新舊等。從臃腫度測量的維度去分析，臃腫度與網(wǎng)站代碼資源的體積、網(wǎng)站的請求數(shù)量、網(wǎng)站的JavaScript邏輯復(fù)雜度等有關(guān)。目前大多數(shù)電商企業(yè)已經(jīng)正視網(wǎng)站臃腫情況，開始優(yōu)化自己的網(wǎng)站，嘗試從減少請求和壓縮文件等途徑去降低網(wǎng)站臃腫度，打造一個更輕便、更迅速的電商網(wǎng)站。

參考文獻(xiàn)：

[1] 韓敏.淺談網(wǎng)頁制作新技術(shù)HTML5 [J].福建電腦，2018，34（9）：106-107.

[2] 吳清揚(yáng)，趙棟.基于完全渲染的網(wǎng)頁首屏性能測量設(shè)計(jì) [J].電子制作，2018（16）：42-44.

[3] 李宇，劉彬.前后端分離框架在軟件設(shè)計(jì)中的應(yīng)用 [J].無線互聯(lián)科技，2018，15（17）：41-42.

[4] 李可，趙順勇.談CSS Sprites技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用 [J].信息與電腦（理論版），2014（4）：72.