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

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

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

• 现状评估和建立指标

• 技术方案

• 执行

• 结果评估和监控

1. 现状评估和建立指标

现状评估

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

性能指标

• 内存、电量消耗

• 动画与操作性能

• 页面加载性能

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

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

2. 技术方案

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

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

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

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

4. 图片、文件等请求

对应优化的技术方案：

3. 执行

• 纯管理

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

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

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

• 制度化

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

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

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

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】