電商網站的臃腫度研究分析

馮偉光

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

關鍵詞：網站;臃腫度;網站優化;懶加載

中圖分類號：TP393.092 文獻標識碼：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? 引? 言

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

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

1? 臃腫度概論

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

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

2? 電商網站臃腫度定義

去測評一個網站的臃腫度，有許多標準。其中相關的衡量維度有網頁的請求數量，各類請求大小，截圖壓縮后的大小等。測量工具可選用谷歌瀏覽器，打開控制臺，即可查看該網站相關的網絡請求信息如圖1。綜合一個或者多個維度去衡量，有不同的結論表現。以下介紹三個角度去測評。

2.1? 截圖比

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

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

頁面截圖大小，就是加載回來的內容的可用度大小。因為用戶接觸到的，是直接從視覺去接觸的，因此從用戶感知的角度出發，網頁就是一張圖片，這個圖片有多大，內容就有多少，這個圖片有多復雜，內容就有多復雜。換而言之，這個參數越大，說明加載回來的東西越有用。

2.2? 請求比

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

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

因為瀏覽器的并發請求有限，所以如果并發請求過多，則請求會被掛起，知道前面的請求完成了，退讓出空位，才會讓后面請求執行。因此請求是比較昂貴的。WebBS2的定義可以看出網頁對請求的利用率。

2.3? 總體比

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

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

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

3? 電商網站臃腫原因分析

3.1? 新技術的進步

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

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

除了網絡傳輸上的技術進步，還有開發技術上的全面更新。以前的網站，并沒有明確地區分前端后端開發。以前淘寶的網站基本上都是基于MVC框架Webx，架構決定了前端只能依賴后端。所以他們的開發模式依然是，前端寫好靜態Demo，后端轉換成VM模版。

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

3.2? 圖片資源過多

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

3.3? 呈現效果復雜

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

但是，這種做法犧牲的是網頁的質量。很多時候這種模板框架的功能是大而全的，開發者會因為需要用到某個效果，而需要引入整個框架。這種模板或框架，通常也依賴多個其他的模板和框架，結果為了實現一個效果，引入了不少冗余的資源，網站加載的JavaScript文件數量過多，邏輯復雜，會降低瀏覽器性能。

4? 降低電商網站臃腫度

4.1? 使用CSS Sprite技術

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

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

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

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

4.2? 懶加載技術

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

懶加載技術就非常適用于頁面很長的業務場景。懶加載的思路非常簡單，打開頁面的時候，優先加載網頁第一屏（用戶首先看到的屏幕內容）中的內容。待用戶往下滾動的時候，再按需加載相關資源。

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

懶加載技術可以為網站節約大量不必要的圖片加載數量，使得首次加載的資源大大減少，讓網站運行得更流暢。

5? 結? 論

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

參考文獻：

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

[2] 吳清揚，趙棟.基于完全渲染的網頁首屏性能測量設計 [J].電子制作，2018（16）：42-44.

[3] 李宇，劉彬.前后端分離框架在軟件設計中的應用 [J].無線互聯科技，2018，15（17）：41-42.

[4] 李可，趙順勇.談CSS Sprites技術在網頁設計中的應用 [J].信息與電腦（理論版），2014（4）：72.