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

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

现状评估和建立指标 #

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

作为一个工程师，指标又要考虑两个因素。一方面，对用户来说，什么样的性能指标能更 好地评估它的体验？另一方面，对公司来说，什么样的指标会影响业务价值呢？

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

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

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

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

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

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

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

于是，基于以上分析，我们设计了一个新的指标——秒开率，即一秒之内打开的用户占用 户总量的百分比。这个指标后来逐渐推广到整个公司，甚至影响到了一些业内的其它企业， 现在，谈秒开率已经是个非常自然的事情了，但是当初的设计确实走了不少弯路。

技术方案 #

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

我们这里还是以加载过程为例，来讲解一下。

首先我们要简单分析一下，从输入 URL 后按下回车，到底发生了什么。

我们在浏览器的原理课程中，已经讲解了浏览器大致的工作过程，但是，我们必须理解几件 事：

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

从这个分析和实际试验的结果看，网页的加载时间，不但跟体积有关系，还跟请求数有很大 关系，因此，我们最终设计的技术方案大约可以这样划分：

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

执行 #

技术方案设计好了，它是不会自己变成线上页面的，所以，有了技术方案，我们只完成了一 半的工作，接下来我们还需要一个执行过程。

执行也不简单，如果说方案主要靠技术，那么执行就是靠工程实施了。

根据公司的实际情况，工程实施可能有不同的程度，我把工程水平从低到高分成三个阶段：

• 纯管理；
• 制度化；
• 自动化。

纯行政管理，是由经理用纯粹的管理手段来执行方案，比如说，作为前端团队的 Leader， 我可以组织会议，要求整个团队使用我们前面谈的技术方案。

但是纯行政管理有一些问题，一方面，需要的行政资源不一定有，比如我没法强制让后端团 队配合我，另一方面，纯粹的管理方式，团队本身的体验并不好，也不利于团队成长，最重 要的是，纯粹管理方式容易造成执行不到位。这样的执行方式多数出现在非技术岗位。

制度化执行方式是用规则代替人的命令，指定责任人，通过培训、checklist、定期 review 等具体措施来保证实施。制度化执行可以极大地减轻管理工作量，一般现代互联网公司都会 采用类似的方式。但是制度化执行方式还有很大成分是依靠人的主动性的，对程序员来说， 还有更好的方式：自动化。

自动化的方式是在一些重要的操作路径上设置规则，针对我们的性能优化，有两个点适合做 这件事：一个是把开发好的页面发布上线，另一个是开发好的页面 URL 投放到首页等处的 链接。

在我之前的工作中，我们跟测试团队配合，开发了一套页面性能打分系统，它会自动扫面页 面上的可优化点，并且跟发布平台和投放平台合作，把它加入日常机制中。现在多数公司都 会采用制度化和自动化结合的执行方案。

结果评估和监控 #

执行完了之后，就要向老板汇报争取升职加薪了，还要有一定的结果总结，才是一个完整的 工程实施，而且，凡是工程实施，肯定要有一定长效机制，不能优化完了退化，这些都要求 有线上监控机制。

要想做线上监控，分两个部分：

• 数据采集；
• 数据展现。

数据采集部分，同样需要发布平台或者开发工具来配合，对性能数据来说，Performance API 非常好用，它是浏览器记录的性能数据，一般来说，我们用统一的代码把它上传到服务 器端就够用了。

数据的展现部分就比较自由了，可以用不同的数据可视化方案来展现性能数据，没有一定之 规。一般的数据监控平台，会提供报警机制，对性能来说，报警需求不是特别强烈，但是也 可以设置一些条件，针对秒开率特别低的网页报警。

有了监控，再配合一定制度，就可以保障整个团队产出的性能了，要注意，性能不是一个静 态的事情，指标需要不断优化，技术方案还需要不断随着技术发展迭代，制度、自动化工具 也需要不断改进，最终的监控平台产品也不能不做新需求，所以性能应该成为一个团队的日 常工作的一部分，持续进行。

总结 #

今天我们学习了前端团队工程实施中的性能体系，首先我们介绍了总体思想：性能应该是基 于业务和实际用户体验需求的一种工程实施，不是纯粹的技术游戏。

接下来我们分成四个步骤介绍了性能工程体系，首先介绍了现状评估和建立指标，建立指标 应当从业务的角度考虑，接下来讲了技术方案设计，技术方案应当从整体角度，基于 Profiling 的结果分析来设计。

之后我们讲了实施，我们讲了工程实施的三个层次：纯管理、制度化、工程化，最后，我们 讲了结果评估和线上监控，线上监控需要从数据采集和数据展现两个部分分别实现。