听云APM和跨境电商丰趣海淘的前端优化最佳实践.pdfVIP

听云APM 与跨境电商丰趣海淘的前端优化最佳实践 随着互联网的发展，尤其是在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.代码重构 丰趣的详情页主要有如下几部分组成：商品信息、推荐商品、评价信息、最近浏览等。其中 商品信息中包含价格信息