电商网站的臃肿度研究分析

冯伟光

摘  要：网站臃肿度，泛指网页的代码资源、图片数量、整体结构的复杂度以及其总体积大小的程度。网页越臃肿，用户在浏览及使用时越容易感到吃力。在众多网站当中，电商类网站是最为复杂的一种网站。其需要展示多种产品数据，要经过多种过滤检索，这导致目前市面上的电商类网站越来越臃肿。本文主要提出臃肿度概念和意义，分析电商网站臃肿原因，并给出一定的优化方案。

关键词：网站;臃肿度;网站优化;懒加载

中图分类号：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.