前端性能优化怎么做？阿里淘宝性能优化实施方案奉上

Love The Way You Lie 2023-02-27 12:16 32阅读 0赞

> ** 性能优化的重要性**

首先，大家必须明确性能优化的重要性。

当我们项目功能越来越多，模块规模一步步扩大，就会发生一系列的性能问题，比如说首屏加载会变得非常慢，编译会延迟等等

我们所经手的任何一个项目，其生命历程都会走向性能优化这个阶段，无论是前端还是后台，都是如此，所以这是大家必会的一项目技能。

许多大型项目的背后都有一个性能优化小组，他们不做业务，专注于性能调优。

接下来我们看一下淘宝是怎么做性能优化的。

![format_png][]

> **宗旨与理念**

**宗旨**：一切没有 profiling 的性能都是做无用功。

**理念：**性能优化不能只着眼于局部的代码，凡是真正有价值的性能优化，必定是从端到端的业务场景建立体系来考虑的。

![format_png 1][]

> **性能体系的建立****（四步曲）**

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

> **1. 现状评估和建立指标**

**现状评估 **

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

**性能指标**

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

着重需要注意的是：页面加载性能。根据2020淘宝大数据分析得出: 30%以上的用户在打开页面2s后如果未看到关键信息，就会关闭或离开当前页面。

**秒开率**（性能考核指标）：一秒内能够打开页面看到关键信息的用户所占整体用户的百分比

> **2. 技术方案**

**   思考：**从输入URL，到回车，发生了什么？

1. 从域名到 IP 地址，需要用 DNS 协议查询

2. HTTP 协议是用 TCP 传输的，所以会有 TCP 建立连接过程

3. 如果使用 HTTPS，还有有 HTTPS 交换证书

4. 图片、文件等请求

**对应优化的技术方案：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70][]

> **3. 执行**

*  **纯管理**

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

**优点：**简单粗暴，成本低

缺点：需要的行政资源不一定有，比如我没法强制让后端团队配合。纯粹的管理方式，团队本身的体验并不好，也不利于团队成长，最重要的是，纯粹管理方式容易造成执行不到位。

*  **制度化**

制度化执行方式是用规则代替人的命令，指定责任人，通过培训、checklist、定期 review 等具体措施来保证实施。

**优点：** 可以极大地减轻管理工作量，一般现代互联网公司都会采用类似的方式。

缺点：太过依靠人的主动性。

*   **自动化**

自动化的方式是在一些重要的操作路径上设置规则，针对我们的性能优化，例如：

1. 一个是把开发好的页面发布上线

2. 另一个是开发好的页面 URL 投放到首页等处的链接

**     发展趋势：**抛弃纯管理化，结合制度化和自动化的执行方案

> **4. 结果评估和监控**

执行完之后，做结果总结，才是一个完整的工程实施，凡是工程实施，肯定要有一定长效机制，不能优化完了退化，这些都要求有线上监控机制。

**a. 数据采集与记录（网页性能打分系统）**

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

**b. 数据展现**

可以用不同的数据可视化方案来展现性能数据，没有一定之规。选择有报警机制的就好了，也可以设置一些条件，针对秒开率特别低的网页报警。

**最后附上一个性能优化完整流程示例：**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1][]**

如果对大家有帮助，欢迎点赞、评论和转发，感谢大家的支持。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90aW1nc2EuYmFpZHUuY29tL3RpbWc_aW1hZ2UmcXVhbGl0eT04MCZzaXplPWI5OTk5XzEwMDAwJnNlYz0xNTk1MDYxNDQ0MTQ3JmRpPTNkNjFhMDM0YTIxZmVkNWViYTBiMWFmMzk2YzZiZGYxJmltZ3R5cGU9MCZzcmM9aHR0cCUzQSUyRiUyRnBpYy5iYWlrZS5zb3NvLmNvbSUyRnAlMkYyMDE0MDIxMyUyRjIwMTQwMjEzMTUwMDM2LTk4NjE4ODgwNS5qcGc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90aW1nc2EuYmFpZHUuY29tL3RpbWc_aW1hZ2UmcXVhbGl0eT04MCZzaXplPWI5OTk5XzEwMDAwJnNlYz0xNTk1MDYxNTMyNjM2JmRpPTM5ZmM5Y2NjMDNkYzc1ODM2NWJkMjc4NzU0YjczMjIwJmltZ3R5cGU9MCZzcmM9aHR0cCUzQSUyRiUyRnBob3RvZ2FsbGVyeS5vc3MuYWxpeXVuY3MuY29tJTJGcGhvdG8lMkYxNzAyNTg1NDUxNTUyODMzJTJGMjY5NjMlMkY4ZWNhYjUyYS1kOTJmLTQ4Y2ItYWYzYy1mOTliMWZmZjg2MzUucG5n?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: /images/20230209/885a144baede4711878fe9388a0cd7f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200717155537210.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70