原文出自【听云技术博客】：http://blog.tingyun.com/web/article/detail/586
随着互联网的发展，尤其是在2000年之后浏览器技术渐渐成熟，Web产品也越来越丰富，这时我们被浏览器窗口内的丰富“内容”所吸引，关注HTML/CSS，深入研究Dom、Bom和浏览器的渲染机制等，接触JavaScript库，“前端”这个职业，由此而生。
前端技术在这10多年中飞速发展，到了今天，我们可能发现“内容”的美在视觉上是有上限的，而性能的追求却是无穷无尽的，前端优化的重要性慢慢被前端工程师们发现，尤其是在如今火热的大型电子商务网站技术架构中，前端优化一定是一项必不可少的工作，今天就给大家带来顺丰旗下的跨境电商平台——丰趣海淘的前端性能优化之路。
为什么需要前端性能优化
我们都知道在浏览器访问一个网站时，有10%-20%的时间是花在下载HTML上，其他80%-90%时间是花在下载页面中所有组件上。如果我们把后端时间缩短一半，整体响应时间可能只会缩短5%-10%。然而我们花同样的精力关注前端的话，我们能将响应时间缩短到一半之多，这样的提升可想而知。
可能上面的描述比较抽象，我们来看一些研究的数据：
Amaon 慢 0.1s会导致1%的用户放弃交易
Google 慢 0.4s会导致0.6%的用户放弃搜索
Yahoo! 慢 0.4s会导致减少 5%-9% 的流量
Bing 慢 2s会导致收入下降 4.3 %
如果将这些数据换算成金钱上的话，那将是一笔无法估量的损失，前端优化势在必行。
怎么样才算足够快
对于丰趣海淘来说，考察前端性能的参考指标一般有两个：一、首页加载时间；二、页面大小。页面大小方面每次新版迭代时候通过测试人员去检测，加载时间就需要使用第三方监测工具去监测实际用户加载时间。
这些指标具体到实际使用中分为三个层次：
0.1秒：用户直接操作ui中对象的感觉极限。例如，用户直接选择表格的一列到该列高亮显示，或者反馈被选择的时间间隔。
1秒：用户随意在计算机指令空间操作而无需过度等等时间的感觉极限。0.2-1.0的时间延迟会被用户注意到，会让用感觉到计算机正在对指令进行处理中。等待的时间过长，会让用户失去流畅的体验。
10秒：用户专注于任务的极限，超过10秒的任何操作都要有一个进度指示器，以及有一个让用户中断操作，而且有清晰的标示方法。假设用户超过10秒后返回界面，他们将要重新适应。
换句话说执行如果超过0.1秒，会让人感觉到不平滑。如果超过1秒会让人感觉应用程序缓慢；超过10秒那么用户会非常沮丧。这些就是用于足够快的标准。
开始优化之前
在知道了优化的好处和标准以后先来看看丰趣海淘的架构。在制定网站的整体框架时候，丰趣海淘强调架构的上的前后端分离，这种分离意味着数据层、复杂业务逻辑与前端展现和交互的层次分离，这样做有很多好处：
1、在开发和分工上面可以分得清楚，对并行开发有很好的效率提升，不被对方所绑架。在开发时，通过事先的约定，前端和后端可以同步进行。而交接层通过单元测试保证交付，可以缩短项目进度。
2、结构清晰，前端后端分得较为清楚，所有的后端服务都会通过一个统一的网关，通过HTTPS的方式把数据通过接口的方式暴露出来，大部分的页面是在前端完成比较轻的逻辑，从这个角度来讲，不管是前端的WEB还是H5页面还是移动的客户端，共享的都是同一套后端服务的接口。流动的数据，让前后端可以独立的专注的做自己，而不是被对方所绑架。
丰趣海淘优化之路
1、详情页优化
丰趣海淘的详情页采用服务端渲染加客户端渲染两种相结合的方式，服务端负责突出基本信息和图文说明，而客户端负责进行热数据的再次请求和热数据的渲染。
优化之前，详情页的主文件行数已经达到2.5k，同时因为每次大促因为涌入大量流量，导致详情页的加载非常慢，所以优化旨在承担代码重构和性能优化两份责任。
A.代码重构
丰趣的详情页主要有如下几部分组成：商品信息、推荐商品、评价信息、最近浏览等。其中商品信息中包含价格信息和购买区域等等。为了减轻主文件的复杂度以及配合后面提及的性能优化，这里特对分出四大组件：推荐商品组件、评价组件、最近浏览组件和活动组件，这几个文件相互独立渲染。在后面的组件懒加载中会进行详细说明。
详情页中最复杂的部分就是活动。不同活动展示的价格不同，购买按钮也可能不同，当前丰趣的活动有秒杀、预售、搭配购、限时促销等等，另外还有倒计时配合各个活动。如果不采用活动隔离的方案，那将会产生大量的if else，造成代码难以插脚。
针对这个问题，分离出了秒杀、预售、搭配购、限时促销等活动类，同时抽取了一个活动父类供他们继承。
当前已经拆分出来的活动类：
价格、购买区域组件引用继承关系如下：
main为入囗，object为活动类父类，normal为普通的活动。其他活动类在类关系图中不一一列出
这样就做到了活动类的彻底解耦，后续增加活动只要新建一个文件即可。
B.性能优化
B.1.组件懒加载
组件懒加载參应用于首页和活动页，因为这些页面组件之间的关联性较少，适合组件的懒加载。而详情页的组件之间有的是有关联的，但是丰趣的这些关联当前都是可以通过某种手段规避的，所以在详情页中也进行了组件懒加载的大胆尝试。
前面提到，丰趣的详情页组要分出了四大组件：推荐商品组件、评价组件、最近浏览组件和活动组件。因为这些组件相对独立，把推荐商品组件、评价组件和最近浏览组件定位成为懒加载组件，而活动组件因为在第一屏就要进行展示，所以没有把它定义为懒加载组件。
所以这里就总结下
1、使用组件懒加载的目的：减少DOM节点和请求数，以达到第一时间渲染出首屏供用户使用。
2、什么样的组件审核定义为懒加载组件：非首屏的组件才能定义为懒加载组件。当然有的组件和其他组件參少有点关联，这个关联程度如果能够通过代码hack掉，那也是可以定义成懒加載组件的，这就看自己的权衡了。
现在来看下丰趣的懒加载组件设计。
懒加载组件定义：采用HTML标签的方式，当前定义的组件是如下三个，推荐商品/评价／最近浏览。
懒加载组件支持的字段说明：
1、Id组件id：唯一标示
2、data-floor(预留 未使用）组件楼层：当滚动到1楼时，可以预先加载2楼的数据
3、data-positionid组件位置：组件实例化出来后放置的位置，用于移动组件位置
4、data-widget组件名称：当前已经存在的组件
5、data-params组件参数：用于给组件实例化使用
6、data-callback组件回调：用于组件实例化之后的回调
7、widgetlazyloaded是否已经加载：如果组件已经加载了，该属性会被置为true，标示已经加载渲染过了，后面就不会重复渲染。
懒加载组件解析：我们定义了一个管理懒加载组件的类：vendor.widgetLazyLoad,该类能够支持高优先级和低优先级两种组件：高优先级的组件是在滚动时候也进行加载，低优先级的组件只有等滚动结束了才进行加载。
B.2.本地存储
有些配置类接囗无需每次读取接囗。当前接囗已经支持定义本地存储，只需传递"throttleMode"：true即可，默认存储五分钟，为安全起见，不支持配置时间。
数据存储在storage中键为_mt,值为{"time":xxx, "content":{data}}
接囗要求：必须是读取配置类的接囗。当前已经支持的接囗只有两个：b2cmall.getCmsHeaderConfig和search.getSearchHeaderConfigo。当然第一个接囗和第二个也不一样，它是会根据不同页面吐出来不同数据，所以这个要做到页面级别的存储。
B.3.合并请求
前端页面中，有很大一部分性能是耗在和服务端的接囗交互中的，特别是在大促期间，服务立岩因为大量请求的涌入处理速度会变慢，同事带宽也会被占满导致无法进入。如果此时前端还是一个接囗依赖一个接囗的和服务端进行交互，带来的必然是用户界面的不可用为了减少和服务端的请求交互，详情页中两个负责读取价格信息的重要接囗：活动活动信息和获得价格信息(product.getActivityInfo,product.getProductHotData)已经合并为一个请求发送，后面简称activityData。
B.4.延迟加载
在详情页，获得购物车数量和是否已经收藏该商品(getTotalCount和isCollectedGoods)优先级比较低，在渲染价格后再加载，以保证让用户在第一时间可以购买商品。
2、前端速度优化
就像上面我们提到的“足够快”，访问速度是用户体验的第一基准，围绕着速度其实有很多可以做的地方，前端的提速首先需要缩短了资源下载的时间：
丰趣海淘在CDN方面选用的是阿里云CDN，目前所有的静态资源都是在阿里云的CDN上， 其中包括JS。无论APP、HTML5页面还是Web页面，用户在加载页面的时候都能从最近的CDN节点下载静态资源，从而起到加速效果。
丰趣海淘APP会用到的所有HTML5资源都会有缓存，缓存能够比较好的提升用户使用APP的体验。
3、前端性能监控
无论是大到整个系统架构设计，还是小到页面大小，加载时间甚至CDN的使用情况，都需要一个监督前端用户体验情况的工具，丰趣海淘选择使用听云Browser来进行日常的监控工作，希望建立一个长效的机制反馈用户的使用情况，好及时做出应对。
CDN监控
采用了商业CDN的服务，但向来CDN服务质量不太透明，效果好坏无法判断，之前偶尔有用户反馈页面打开缓慢的问题，然而自己去做监测费力不讨好，所以通过使用听云Browser来帮助实时了解用户在打开页面过程中访问到CDN内容的加载时间。我们通过对以往数据的对比，可以评估CDN在全国范围内的服务质量，一旦发现加速效果不佳，可以及时与厂商沟通进行调优。同时，结合听云Network进行主动式监测，还可以发现解析失败、无法建连等网络错误问题，对CDN服务做到全方位监测，从而有效减少了网民的投诉数量。
页面加载时间监控
作为一个电子商务网站，在行业竞争激烈的今天，用户购物体验的好坏直接关系订单最终是否能够成交。而在购物过程中，页面的加载时间是非常重要的一个指标。通过使用听云Browser，我们可以实时看到全国各地用户页面的加载时间更新，可以第一时间发现页面加载缓慢的现象，并能追溯到具体某一次慢页面打开的情况，这个对丰趣海淘来说是很重要的参考数据。
4、其他优化
在此次优化中，我们还做了其它优化：
1．SVG文件由之前的直接贴在HTML中变成背景图
2．HTML的压缩
优化结果
文件结构与发送请求数：
页面性能：
下面是优化前后的数据对比，采用10个详情页平均性能的方式：
可以看到HTML大小、首屏前端时间和首屏时间都有明显提升。
优化之路没有尽头
从结果上来看，这一次的优化是有很大效果的，但这样优化不是第一次也不是最后一次，未来丰趣海淘还会有更多的动作
除去现在的静态资源和JS，未来丰趣海淘还考虑将部分HTML页面放到CDN上，这样会有更快的浏览速度
考虑建立CDN的切换机制，已应对更多的用户访问需求
在监控方面未来会考虑增加线上报警策略，更好的提醒我们运维人员去处理体验上的缺陷
优化的道路没有终点，为了那永远的“0.1”，丰趣海淘一直在路上。
