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

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

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