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

引言

互联网高速发展，网站已经渗透到人们工作、生活、学习的各个方面。90年代的网页，是极其简陋的，网站界面上甚至一张图片也没有。如今的网站，已经发生了翻天覆地的变化。绚丽多彩的图片，灵活流畅的轮播照片，内嵌视频，甚至页面游戏，都能在网站上完成。

近年来，随着HTML5新技术的推广，以及Node.js等前端技术兴起，网站建设已经发生了一个质的变化。但是随之而来的，是网站越来越臃肿。多数情况下，用户仅需要一些简单的信息，但点开网站界面，获取到的信息过于庞杂。如此臃肿的页面，给用户使用网络增加不少负担，且对移动端用户带来的影响较电脑端更大，也更消耗设备的运行性能及占用更多的缓存空间。在网络传送方面，臃肿的网站，往往会给服务器流量带来不必要的耗损。研究和分析网站臃肿度，将有助提高网站建设的质量，提高用户体验感，同时也为服务器减压。

1臃肿度概论

从用户的角度，衡量一个网页的好坏，有多个方面。首屏渲染时间是极其重要的一个衡量部分。它是从手动输入网址后按回车那一刻开始，直到所有资源加载完毕的时间。首屏渲染时间，十分影响用户的体验。通常加载时间超过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是总体比，是访问该页面的全部资源的体积大小，直接从一个总的角度去分析网络臃肿度。总体积直接影响着网页的加载速度，加载时间等。总体积越大，加载越慢，耗时更久。这并不意味着总体积越小越好，应该要在保证内容足够的前提下，尽量消减总体积。

图 1  网站请求信息

3电商网站臃肿原因分析

3.1新技术的进步

近十年的互联网大爆发，促使网络通讯能力大大提升，宽带网速已经可以达到100兆甚至更高，移动通讯的4G技术，也给使用者带来了高速的网络通路。在网络加载如此便捷的前提下，网站的体积不断增大。在约早十年前的网络时代，在移动端打开一个网页，需要耗时几秒，而加载过来的内容，只有十分简洁的文字和小图标，那时候人们访问的网站，多数是新闻或小说这类以文字为主题的网站，网站十分简单。而如今，得益于通讯技术的进步，在移动端设备上，加载数兆大小的网站，所花费的时间可能不到一秒。

如此便捷的网络环境，促使网站设计者往网站上增加更多的内容，包括高清图片、音频视频、精美动效和游戏等。很多时候，用户在某个网页，需要查看的东西，仅仅是一小部分内容，而网站却给用户附带了其他推荐内容、相似内容、广告内容等。这些内容不仅仅占据着视觉上的位置，同时也占据了不少网络请求，影响了浏览性能，网站也变得越来越臃肿。

除了网络传输上的技术进步，还有开发技术上的全面更新。以前的网站，并没有明确地区分前端后端开发。以前淘宝的网站基本上都是基于MVC框架Webx，架构决定了前端只能依赖后端。所以他们的开发模式依然是，前端写好静态Demo，后端转换成VM模版。

目前大多数新网站均采取前后端分离，将更多的交互逻辑分配给前端来处理，如图2所示，后端专注于其本职工作，负责数据模型Model层，进行权限控制以及进行运算工作。而前端开发人员需要与后台解耦，独立控制视图View层。前端可以根据业务逻辑，通过Ajax主动去获取后台数据（Controller），并插入视图层展示。前端需要独立完成与用户交互的整个过程。因此，前端负责的内容就变得更多了，业务逻辑更多地交给前端去控制，前端开发人员需要引用更多的框架或者写更多的逻辑去实现，因此网页会变得越来越复杂、臃肿。

图 2  前后端分离 

3.2图片资源过多

电商网站是图片加载数量最多的网站类型之一。在主流的电商网站中，主页的风格，大多数是商品的大图展示，往下滚动，便是各种精美商品的中型图片展示。一般电商网站都是做长页面的，即一页加载的内容非常多，方便用户浏览，不用通过点击页码切换商品。因此，图片资源过多是导致电商网站臃肿的主要原因之一。

3.3呈现效果复杂

电商企业之间的竞争非常激烈，电商网站会通过各种酷炫的网页效果，来吸引用户，留存用户。例如常见的图片轮播、全屏红包弹窗、各种精美动画等。除此复杂的设计外，网站开发人员还需要设计更多逻辑，这个环节就很考验网站开发人员的技术能力。如上述的各种动效，网上均有很多CMS模板或框架可以支持使用，开发者无需关心具体动效实现细节，只需要引用开源框架的所有代码，按照要求配置即可实现。这种做法得到大多数开发者的青睐，因为它大大减少了开发难度，节省了时间。

但是，这种做法牺牲的是网页的质量。很多时候这种模板框架的功能是大而全的，开发者会因为需要用到某个效果，而需要引入整个框架。这种模板或框架，通常也依赖多个其他的模板和框架，结果为了实现一个效果，引入了不少冗余的资源，网站加载的JavaScript文件数量过多，逻辑复杂，会降低浏览器性能。

4降低电商网站臃肿度

4.1使用CSSSprite技术

市面上的浏览器，均有并发HTTP请求数量限制，即会限制一个网站同时发出的HTTP请求数量，在发出的HTTP请求没有被结束的时候，新的HTTP请求不会被开始。因此，每一个请求都是非常资源。在电商网站中，如果每一个图片，包括零碎的小图标，都占用一个请求去获得，那十分浪费请求资源。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

CSSSprite技术，允许开发者将众多零碎的图片，诸如小图标等，通过Photoshop或其他图片工具，切片合并成一个大图（如图3），然后统一通过一个请求，发送到浏览器端。

图 3  CSS Sprite 大图

开发者需要做的事情，就是利用CSS中的backgroundposition、background-repeat，background-position的组合，来定义每个小图标在大图上的对应位置，通过大图加精准位置定位切割的方式，去显示出多个小图标。这样，就是通过一个CSS代码，再加上一个合并而成的图片，就代替了同时传送多个小图标的方法。

在电商网站建设中，均存在大量的小图标，如商品分类logo、设置菜单logo等。采用CSSSprite能够大量地减少网页的HTTP请求，降低网站臃肿度。同时可以加快页面加载速度，大大地提高网站的性能。

4.2懒加载技术

绝大多数的电商网站，都用长页面去展示商品信息，通常需要滚动很久，展示很多信息，才会到达网页底部，或者一直没有到底部。电商网站采用长页面这一做法，目的是为了让用户更轻易地获得海量信息，只需要滚动滚轮，不需要点击页码分页浏览。但这一做法，会增加网页的臃肿度，因为一个页面内容太多，需要加载的图片数量必然会增多。一打开页面就发送上百的图片请求，服务器的压力十分大。

懒加载技术就非常适用于页面很长的业务场景。懒加载的思路非常简单，打开页面的时候，优先加载网页第一屏（用户首先看到的屏幕内容）中的内容。待用户往下滚动的时候，再按需加载相关资源。

懒加载技术主要通过JavaScript脚本去实现。其主要实现思路是，在每个HTML中的每个IMG标签，定义一个data-src属性存放图片地址，并将原来应该放图片地址的SRC属性指向loading的图片。在页面初步加载的时候，先通过JavaScript获得到整个页面中所有包含data-src属性的图片元素，将其加入到一个缓存数组，然后监听滚动事件，当滚动事件被触发的时候，遍历缓存数组的每一个元素，并判断该元素是否出现在视窗中，如果出现在视窗中，即可将SRC属性的值替换成data-src的值，从而达到加载图片的目的。

懒加载技术可以为网站节约大量不必要的图片加载数量，使得首次加载的资源大大减少，让网站运行得更流畅。

5结论

电商网站的臃肿度跟多种因素有关，包括网站本身的规模大小，网站的界面设计，以及建站所用技术新旧等。从臃肿度测量的维度去分析，臃肿度与网站代码资源的体积、网站的请求数量、网站的JavaScript逻辑复杂度等有关。目前大多数电商企业已经正视网站臃肿情况，开始优化自己的网站，尝试从减少请求和压缩文件等途径去降低网站臃肿度，打造一个更轻便、更迅速的电商网站。