当前位置：首页 > news >正文

前端性能优化方法与实战开篇词开启刻意练习之路，进阶前端性能技术专家

news 来源：原创 2024/7/1 16:16:42

我曾担任 58 同城技术总监及前端技术委员会主席，2016 年带领两个团队分别完成了集团前后端解耦和奥林匹亚性能优化项目，帮助公司大幅增加商业收益。在这之前，我通过校招入职百度前端团队，见证了前端团队从 5 人到 1000 人的过程，并作为技术 Leader 从事项目的研发管理。工作近 14 年来，我在前后端性能优化、前后端开发模式探索、Hybrid 技术体系等方面积累了相当丰富的实战经验。

为什么我要开一门前端性能优化体系课程？

想一想，假如一名面试官问你：“你工作中是怎么做性能优化的？”你会怎么回答？会不会直接说一堆优化手段，然后被 Pass 掉？

再假如，有一天老板在企业微信里给你发了一条信息：“线上首页打开很慢，过一会儿又好了，怎么回事？”你会怎么处理？会不会把问题归因于网络问题，结果过几天同样的问题又出现了？

还有，假设你经过几年努力，成了一名高级工程师，常规的提效方向都有人做了，你接下来要往哪个方向发展？

实际上，这些问题在工作中经常会遇到，而它们都和前端性能优化体系息息相关。

先来看第一个面试问题。性能是前端面试的必考问题，结合我自己 10 多年的经验见闻，在问做过哪些性能优化的时候：

70% 的同学上来就说减少合并资源、减少请求、数据缓存这些优化手段；
15% 的同学会提到需要在 DevTools 下先看看首屏时间，围绕首屏来优化；
10%的同学会提到需要接入一个性能平台来看看现状，诊断一下；
而只有 5% 的同学会从前端性能体系来系统考虑性能优化。

如果你是技术经验丰富的面试官，你会选哪个？

面试官期待的是你在什么场景下，遇到了什么性能问题，围绕什么样的性能指标，采取了哪些性能优化手段，最后取得了什么样的结果，而不仅仅是直接说采取了哪些优化手段。

再来看第二场景，首页打开缓慢，原因有很多。老板期待的是，前端能和后端一样，通过查日志就能定位平台问题，而不是停留在猜测层面。但在实际当中，能做到这点的前端同学并不多。

那么，前端有没有这样的工具呢？有，那就是性能监控平台。平台上面有各个业务的性能指标及其对应场景下的性能标准，一旦遇到性能问题，就能直接判断当前性能数据有没有问题，然后提示问题是出在前端、后端，还是网络层。

最后一个是职业发展问题。 工作几年后，你成了高级工程师，再往上发展需要确定你的擅长领域。如果是提效，这个领域一般是前端工程化，具体包括编译打包发布流程、物料中心、组件化这些。如果是体验领域，更多人会选择性能优化方向。

我自己喜欢下象棋。国手怎么下象棋？国手不是通过简单练习提升水平的，而是将棋局提炼成心理表征加以记忆，并持续刻意练习来实现的。对应到前端，性能优化体系就是你要掌握的心理表征，它能让你更进一步。

前端性能优化学习中的难点

在实际工作当中，前端性能优化往往比较繁杂，防布局抖动、HTML 优化、CSS 优化、图片加载优化等等，许多细节都需要顾及。而想要学习和掌握前端性能优化，人们会有许多难点。

第一个难点：成体系的性能优化资料严重缺失。

市面上的“武器库”有很多，你 Google 搜索性能优化体系会出来很多站点，里面提到各种各样的优化思路，如缓存请求、服务端响应优化、页面解析与处理、静态资源优化等。但这些优化手段充其量只是性能优化中的一个点或几个点，很难形成一个完整的体系，让人一目了然。

举个例子来说，你通过接入离线包来对页面进行优化，使用这种优化方式的目的是什么，围绕什么指标做的优化，优化完有什么收益，你看完那些资料之后还是回答不了这几个问题。

第二个难点：性能监控预警平台没有开源，需要自己去开发。

有一定优化经验的前端工程师都知道，性能优化的一个重中之重在于性能监控预警平台。通过它，我们可以第一时间发现问题。但这么一个重要工具，需要你自己去开发。

有人说了，市面上不是有类似 7 天开发一个监控平台这样的教程文章，它不行吗？不行！虽然里面提到一些方法步骤，但如何与公司现有前端性能基建对接，性能平台上包含哪些东西，需要对哪些内容做预警，应该设定什么样的预警策略，等等，这些关键问题并没有任何资料提及。

第三个难点：实践中有许多坑，别人并不会公开分享。

前端指标的制定、采集和上报，你在网上会看到一些资料，比如行业会议上阿里巴巴分享的采集方案，但是实践过程中，会有各种各样的坑，这个坑别人是不会分享的。

比如说，有一个搜索页面，用户在页面还没加载完成的时候，发起了搜索。这时候，你会发现采集到的首屏时间比实际的要长很多。又比如，采集到的异常数据该怎么处理，上报策略怎么设定，这些需要多次趟坑才能了解到。

第四个难点：性能优化立项沟通

性能优化中的立项是个难题，如何从业务的角度来思考性能优化的价值，并说服业务去发起这个项目，这中间有很多的方法。但这些方法你很难通过自己短期思考去获得，而在市面上也很难找到这样的知识。

比如立项正推和反推。所谓正推，就是性能线索 -> 性能问题 -> 性能优化方案 -> 性能收益，根据这个思路来开展立项沟通；反推是预估需要的性能收益 -> 性能优化方案 -> 性能问题 -> 性能线索，以此来确定立项。

正是因为大家学习过程的这些难处，我才做了这门前端性能优化体系课程。

课程设计

性能优化理论是高阶知识，需要很多的实践才能抽象出其中一点点。我自己直到 2018 年做完 App 全站性能优化之后，才有了系统性的认知。可以说，这门专栏是我近 10 多年的经验总结。

我计划分五个模块来为你详细介绍。具体来说，我会从前端性能优化方法论、指标采集上报及优化手段、Hybrid 下的进阶优化、性能优化数据评估及预警，以及一线大厂性能优化体系演进五个方面讲解。

模块一：性能优化方法论。 就像前面说的，遇到性能问题时，很多人都知道一些优化手段，但很少有人知道性能优化的系统方法论。比如，性能优化整个体系是怎样的；在页面加载过程中都有哪些性能瓶颈点；如何通过业务收益计算，说服老板和同事发起一个性能项目，等等。这些方法论知识，我都会把它都放在模块一中。

模块二：性能优化指标采集上报及常见优化手段。 在这部分，我将介绍在优化实战过程中，如何确定性能指标，如何采集上报，尤其是首屏时间的度量是业界的难题，为什么要使用 MutationObserver 这种方法做采集，为什么要采集所有图片的加载时间。此外，我还会展开讲解一下指标采集和上报实践过程中遇到的坑。

模块三：性能问题诊断及优化手段。 这一部分我会介绍到，如何根据性能平台问题，结合一些检查清单（如全量 VS 增量、同步 VS 异步、实时 VS 缓存、原片 VS 压缩）来诊断出性能问题；如何根据诊断清单进行优化；还有为确保后续不会随着迭代变得更差，该如何进行预警监控。

模块四：Hybrid下的进阶优化手段。 App 端内的性能优化难度会更大，跨 App 和 H5 之间，如果不了解 Hybrid 的知识，优化收益会非常有限。如WebView的优化，有时候WebView简单改一些配置，就能省掉 200ms，比你辛辛苦苦优化半天还划算；又比如离线包，它需要和客户端配合好，怎么设定资源包，什么时候命中，什么时候需要跳过请求线上，这些我将在模块四来通过实践案例和你分享。

模块五：一线大厂性能优化体系演进。 我会介绍下当前业界的性能解决方案和演进，比如，腾讯的首屏方案和美团的首屏方案各有哪些优缺点，分别适合哪些场景；使用多端方案场景的业务，我们该如何优化性能，比如小程序环境中怎么设定性能指标，如何与 H5 性能体系对接；在 ReactNative 环境下如何优化渲染性能，等等。

课程收获

通过五个模块的的系统化性能体系学习，你会有以下几个收获。

强大的性能优化思考框架，让你心中有一个整体的 Roadmap，掌握一个整体的优化方法论，在前端优化的时候，不至于想到哪做到哪儿。
丰富的实践方案， 如果只是理论知识，很难落实到业务中，比如如何采集性能指标，采集过程中会有哪些坑，业界整体实现方案如何，各种优化手段有什么逻辑前提，在讲解的过程中，我会为你提供一些实现 Demo，让你事半功倍。
业界实现方案及演进， 通过了解业界实现方案，扩宽思维，让你少走弯路。
晋升和面试的法宝， 课程中的一些问题点，都是面试中的高频问题演化，期望让你在掌握整体体系的同时，也能给出具体解决方案。