《重学前端》学习笔记(13)

性能

凡是真正有价值的性能优化，必定是从端到端的业务场景建立体系来考虑的。

性能体系的建立可以分成以下几部分：

• 现状评估和建立指标；
• 技术方案；
• 执行；
• 结果评估和监控。

1. 现状评估和建立指标

要想做好性能优化，正确地评估现状和建立指标是最关键的一步。

作为一个工程师，指标又要考虑两个因素：

• 对用户来说，什么样的性能指标能更好地评估它的体验？
• 对公司来说，什么样的指标会影响业务价值呢？

性能问题可以分成很多方面，最重要的几个点是：

• 页面加载性能；
• 动画与操作性能；
• 内存、电量消耗。

注意，这里我们仅仅是对“性能”两个字的分析和解读，在对大量的用户数据分析后，我们发现，其实这三部分中，“页面加载性能”跟用户的流失率有非常强的关联性，而用户流失率，正是公司业务非常看重的指标。

因此，在开始阶段，我们决定把性能优化的重点放在页面加载性能上。

那么，用什么指标来衡量页面加载性能呢？最容易想到的方案是“用户平均加载时间”，事实上，我们在相当长的一段时间，也都是在使用用户平均加载时间作为性能指标。

但是，很快我们发现，这个指标有严重的问题：

• 当加载时间低于一定数字，用户体感差别不大了，我们经过一定的研究，认为这个数字大约是 1 秒；
• 少数超长时间加载的用户（如 2G），会极大影响整个指标，即指标不能反映大多数用户的体验。

于是，基于以上分析，我们设计了一个新的指标——秒开率，即一秒之内打开的用户占用户总量的百分比。

2. 技术方案

有了指标，我们就有了优化的目标，就到了技术出场的环节了。

以加载过程为例，来讲解一下。首先我们要简单分析一下，从输入 URL 后按下回车，到底发生了什么。我们必须理解几件事：

• 从域名到 IP 地址，需要用 DNS 协议查询；
• HTTP 协议是用 TCP 传输的，所以会有 TCP 建立连接过程；
• 如果使用 HTTPS，还有 HTTPS 交换证书；
• 每个网页还有图片等请求。

最终设计的技术方案大约可以这样划分：

这里涉及的并不仅仅是前端技术，有服务端、客户端、设计师团队，所以要想做好性能优化，绝对不能把自己限制在局部的视角，必须是整个业务一起考虑，才能有良好的收效。