电商网站臃肿原因分析。近十年的互联网大爆发, 促使网络通讯能力大大提升, 宽带网速已经可以达到100兆甚至更高, 移动通讯的4G技术, 也给使用者带来了高速的网络通路。在网络加载如此便捷的前提下, 网站的体积不断增大。在约早十年前的网络时代, 在移动端打开一个网页, 需要耗时几秒, 而加载过来的内容, 只有十分简洁的文字和小图标, 那时候人们访问的网站, 多数是新闻或小说这类以文字为主题的网站, 网站十分简单。而如今, 得益于通讯技术的进步, 在移动端设备上, 加载数兆大小的网站, 所花费的时间可能不到一秒。如此便捷的网络环境, 促使网站设计者往网站上增加更多的内容, 包括高清图片、音频视频、精美动效和游戏等。很多时候, 用户在某个网页, 需要查看的东西, 仅仅是一小部分内容, 而网站却给用户附带了其他推荐内容、相似内容、广告内容等。这些内容不仅仅占据着视觉上的位置, 同时也占据了不少网络请求, 影响了浏览性能, 网站也变得越来越臃肿。除了网络传输上的技术进步, 还有开发技术上的全面更新。以前的网站, 并没有明确地区分前端后端开发。以前淘宝的网站基本上都是基于MVC框架Webx, 架构决定了前端只能依赖后端。所以他们的开发模式依然是, 前端写好静态Demo, 后端转换成VM模版。

       目前大多数新网站均采取前后端分离, 将更多的交互逻辑分配给前端来处理, 如图2所示, 后端专注于其本职工作, 负责数据模型Model层, 进行权限控制以及进行运算工作。而前端开发人员需要与后台解耦, 独立控制视图View层。前端可以根据业务逻辑, 通过Ajax主动去获取后台数据 (Controller) , 并插入视图层展示。前端需要独立完成与用户交互的整个过程。因此, 前端负责的内容就变得更多了, 业务逻辑更多地交给前端去控制, 前端开发人员需要引用更多的框架或者写更多的逻辑去实现, 因此网页会变得越来越复杂、臃肿。电商网站是图片加载数量最多的网站类型之一。在主流的电商网站中, 主页的风格, 大多数是商品的大图展示, 往下滚动, 便是各种精美商品的中型图片展示。一般电商网站都是做长页面的, 即一页加载的内容非常多, 方便用户浏览, 不用通过点击页码切换商品。因此, 图片资源过多是导致电商网站臃肿的主要原因之一。

       电商企业之间的竞争非常激烈, 电商网站会通过各种酷炫的网页效果, 来吸引用户, 留存用户。例如常见的图片轮播、全屏红包弹窗、各种精美动画等。除此复杂的设计外, 网站开发人员还需要设计更多逻辑, 这个环节就很考验网站开发人员的技术能力。如上述的各种动效, 网上均有很多CMS模板或框架可以支持使用, 开发者无需关心具体动效实现细节, 只需要引用开源框架的所有代码, 按照要求配置即可实现。这种做法得到大多数开发者的青睐, 因为它大大减少了开发难度, 节省了时间。但是, 这种做法牺牲的是网页的质量。很多时候这种模板框架的功能是大而全的, 开发者会因为需要用到某个效果, 而需要引入整个框架。这种模板或框架, 通常也依赖多个其他的模板和框架, 结果为了实现一个效果, 引入了不少冗余的资源, 网站加载的JavaScript文件数量过多, 逻辑复杂, 会降低浏览器性能。