阿里无线前端性能优化指南 (Pt.1 加载优化)

 

前言

阿里无线前端团队在过去一年对所负责业务进行了全面的性能优化。如下是咱们根据实际经验总结的优化指南，但愿对你们有所帮助。

第一部分仅包括数据加载期优化。

图片控制

对于网页特别是电商类页面来讲，图片一般会占据了大量的视觉空间,是页面中最为重要的展示内容，而且占据网页传输字节的大部分。所以，对图片的优化是咱们性能优化的重点.

启用WebP

WebP是一种支持有损压缩和无损压缩的图片文件格式，派生自视频编码格式 VP8。根据 Google 官方的数据，无损压缩后的 WebP 比 PNG 文件少了 26％ 的文件大小，有损压缩在具备同等SSIM索引的状况下WebP 比 JPEG 文件少25-34%的文件大小。WebP支持无损透明度（也叫作alpha通道），支持动画格式Animated WebP 。

虽然目前仅Android系统原生支持WebP格式， 但因为其对页面性能优化的巨大意义， 咱们会在页面加载时进行环境探测, 如页面渲染环境支持WebP咱们会替换页面中的图片连接为WebP格式的版本。 若是页面专门用于可控的客户端内(咱们能在客户端中放置专门的WebP decoder)，就算是iOS环境咱们也会启用WebP.

优化高分屏和弱网适配

从苹果的Retina开始，手机厂商开始愈来愈多的使用高像素密度显示屏。在浏览器里咱们的一个CSS像素每每能对应两个或更多个设备像素，在这种环境下为了追求最好的显示效果,咱们会采用数倍于浏览器CSS像素标识的图片尺寸. 这里须要注意的是，若是你采用了2x (两倍CSS像素分辨率) 的图片,因为水平和垂直像素都进行了加倍，最终图片体积会增长4倍(内存占用也会增长4倍). 同理,若是你采用了3x的图片，最终增长的传输体积会增至9倍.

用户喜欢清晰绚丽的图片， 但用户更加痛恨打不开的页面. 在咱们的实践中,咱们最多使用2x(两倍CSS像素分辨率)的图片。 若是页面专门用于可控的客户端内，咱们会根据从客户端获取的网络状况替换页面所使用的图片资源. 在最糟糕的网络环境(2G移动网络)，咱们甚至会采用按30%质量进行压缩的图片以替换原始图片连接。

单张图片大小控制

有时，若是不设限不管你如何优化糟糕的状况总会出现。在咱们的实践中, 针对图片咱们设置了单张图片大小不超过50Kb的限制。在每次发布时,咱们会对页面图片进行检查, 若是图片超过这个限制仍须要发布，就得走特别的流程了.

合理使用CSS/SVG/ICON Font替代图片

传统桌面Web中，针对页面内的图标，咱们每每采用Sprite（雪碧图）技术把多个图标合并到一张大图片中，针对不一样的图标显示大图中不一样的部分。但在移动互联网环境下, 因为设备内存有限，每使用Sprite技术展现一个图标，都须要浏览器把整个大图解码到内存中一次，考虑到前文提到的多倍CSS像素分辨率状况, 占用的内存和解码时间每每是可观的。不合理的使用Sprite技术会形成移动页面性能不升反降。

更合适的选择是CSS3,SVG和ICON Font技术。若是你的图标能使用这些技术绘制，在任何分辨率和缩放设置均可以提供清晰的效果并减少传输和内存的开销.

对图片进行按需加载

电商类型网站多用多图列表页面展示商品内容, 咱们会在非WIFI网络环境时对图片资源进行按需加载，仅仅当图片资源出如今首屏或随着用户滑动屏幕进入可见区域时，咱们才进行加载. 进行这项优化的关键在于对全局的图片呈现进行一层抽象,以便统一控制.

网络请求

今天咱们谈论的无线页面，不少时候已再也不是传统的"页面"，而是一个个"单页应用"。随着应用复杂度的逐渐增长，所需加载的除图片等静态数据外，动态数据也会愈来愈多。若是想追求高质量的单页应用,对这些请求的优化势在必行.

域名收敛

若是你页面中引入的各类资源来自不一样的域名，注意每增长一个域名,都会增长一次域名解析开销。 在复杂的国内移动互联网网络环境下，不一样域名的解析速度可能会相差数十倍。 因此你须要有意识的收敛页面资源所需解析的域名数, 特别是会阻塞页面渲染的CSS,JS,Font资源。 不少性能糟糕页面究其缘由或许会是引入的资源域名解析速度很慢或彻底不能正确解析。在咱们的实践中, 一个页面所产生的域名解析数不能超过5个。

减小请求数

在优化了须要解析的域名数后，你须要关注页面资源请求数. 若是是长期维护的产品型页面 ，页面中引入的静态资源除最通用的基础库外须要按依赖顺序进行合并压缩. 通常是JS和CSS请求各一。 针对电商厂商多见的营销活动页面，咱们甚至开发了工具把所有的CSS和JS资源内联入页面，从而实现除图片外的其他资源One Request就能得到.

另外，资源请求重定向也应该尽可能避免,少一次重定向，少一个请求数.

文本数据的优化与压缩

文本数据(HTML,CSS,JavaScript)的优化与压缩分为三个阶段，分别是发布准备(去除注释,合并CSS声明,去除不会被执行的JS代码块), 编译期压缩(合并文件，去除空格，混淆) 和 传输阶段压缩( GZip ) . 这项优化的关键在于梳理流程确保压缩的自动化和服务器GZip指令被正确配置。

数据接口优化与监控

随着近两年Web先后端分离思潮的流行与前端模板技术的发展 , 咱们愈来愈倾向在页面加载完成后再经过接口获取JSON数据并在前端进行页面渲染。这种方式带来了页面第一次加载速度的提高，但经常把原有的性能问题隐藏了起来。 须要花功夫优化的数据获取并最终呈现时间每每被隐藏在空页面快速呈现的表象之下。更严重的状况发生在须要从多个不一样接口获取数据，而且这些接口调用还存在互相依赖的状况下，一旦出现这样的状况，页面性能每每是不升反降的.

在咱们的实践中, 咱们要求数据在后端组装完成后再交由前端渲染，一屏中完整渲染所需数据不能来自多过一个接口。 全部数据源统一收敛到单一的接口服务层，以便进行统计和监控。