前端性能优化如何做到极致？
性能优化需经历无阶段意识和有阶段意识两大阶段，以及无优化、通用方案、指标、匠心四小阶段。
在项目启动初期阶段，用户少，压力小，问题大多数是从单个个体用户的使用场景来看。慢慢地，开始注意性能优化的问题，寻找常规优化方法。逐步到有意识阶段，优化方式出现针对性和策略性，开始关注用户感官优化，力求在多个细节做到极致，更多以数据为基础导向。
性能优化本身是需要数据来支撑的。当有了数据监控平台，接下来就该关注性能优化所需的技术本身。
在前端优化中，内容优化是最根本的，90% 的网站涉及文本和图片。据 HTTP Archive 统计，2016 到 2019 年 PC 端的文本大概有 295.8K，到 2019 年上升到 396K，文本上升 34%，图片上升 30%。同时移动端文本上升 50%，图片上升 100%。那么，在网络不给力的情况下，该如何做文本压缩以及图片压缩呢？
贝壳找房前端技术专家陈辰老师说，常规情况下使用 GZIP 对文本资源进行压缩。GZIP 原理依赖两种算法，一种是 LZ77，另一种是 Huffman。
LZ77 是顺序数据压缩的一个通用算法，如果文件中有两块内容相同的话，那么只要知道前一块的位置和大小，就可以确定后一块的内容。所以可以用（两者之间的距离，相同内容的长度）这样一对信息，来替换后一块内容。由于（两者之间的距离，相同内容的长度）这一对信息的大小，小于被替换内容的大小，所以文件得到了压缩。
Huffman 算法是把文件中一定位长的值看作为符号，比如把 8 位长的 256 种值，也就是字节的 256 种值看作是符号。根据这些符号在文件中出现的频率，对这些符号重新编码。对于出现次数非常多的，用较少的位来表示，对于出现次数非常少的，用较多的位来表示。这样一来，文件的一些部分位数变少了，一些部分位数变多了，由于变小的部分比变大的部分多，所以整个文件的大小还是会减小，所以文件得到了压缩 。
另外，由于图片压缩算法一般是余弦变换和小波算法，所以使用 GZIP 仅仅了压缩 6.3%。因此建议对于图片的压缩可以使用消除和替换图像、对矢量图和光栅图进行优化，或者使用有损压缩和无损压缩等形式进行优化。
陈辰老师还通过一个跨国项目案例介绍了在极限前端性能优化的使用场景，与传统的性能优化大不相同，经过几次方案渐进迭代：第一次方案，方案 svg。第二次方案，无损压缩。第三次方案，抽离像素通道。第四次方案，图片转行样式表。第五次方案：无损压缩图片。手动刷新运营商缓存，强制缓存图片。投放大量广告。最终确定组合方案从而满足优化需求。
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20191007A0CVZW00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
