提升前端性能-技术方案设计

浏览器性能体系的建立可以分为以下几个部分：

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

现状评估和建立指标

要想做好性能优化，正确地评估现状和建立指标是最关键的一步，它又往往是会被轻视的一步。
性能问题可以分成很多方面，最重要的几个点是：

• 页面加载性能
• 动画与操作性能
• 内存、电量消耗
  而这三部分中页面加载性能跟用户流失率是强关联的，而用户流失率，正是业务看重的指标。
  因此，优化的重点在页面加载性能上。

技术方案

在浏览器的大致工作过程中，我们必须理解几件事：

• 从域名到IP地址，需要DNS协议查询；
• HTTP协议是用TCP传输的，所以会有TCP建立连接的过程；
• 如果使用HTTPS，还会有HTTPS交换证书；
• 每个网页还有图片等请求。
  因此，网页的加载时间，不仅跟体积有关系，还和请求数量有很大关系，因此，提升前端性能的技术方案设计，需要包含这几个部分：
• 缓存
• 降低请求成本
• 减少请求次数
• 减少传输体积
  

执行

技术方案设计好了，它是不会自己变成线上页面的，所以，有了技术方案，我们只完成了一半的工作，接下来我们还需要一个执行过程。
根据公司的实际情况，工程实施可能有不同的程度，工程水平从低到高分成三个阶段：

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

结果评估与监控

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

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

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

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