关于前端性能优化，网上文章众多但需针对性优化，你咋看？

网络上关于性能提升的文章屡见不鲜，它们大谈特谈如何对代码进行优化，这类常识人尽皆知。然而，在现实工作中，并非每个项目都需要应用所有这些优化手段。我们应当根据具体项目进行有针对性的优化，您觉得是这样吗？

比如

说一下前端性能优化？

你平时是怎么做性能优化的？

等等类似这样的问题，不过就是换汤不换药罢了

好吧，先上药

这项性能提升涉及范围极广，原因在于每个项目所需要优化的具体方面各不相同，同时，不同的框架或客户端也各自拥有独特的优化空间。

总体而言，在当前的B/S架构中，普遍存在前端向后端发起请求的现象，随后后端对数据进行整理，并将处理好的数据反馈给客户端。客户端接收数据后，会进行数据处理，并最终将界面渲染出来，这个过程大致如此。

那么，我们的优化工作应当立足于这一流程，简而言之，我们能够进行优化的主要方向，实际上仅有两个。

首先，追求更高效的网络通信速度；其次，客户端与服务器在请求与响应过程中，通过缩短数据传输途中的时间来实现加速。

二是更快的数据处理，指的是

然后！开始blablabla.....

在追求更高效的网络通信方面，例如，CDN通过实现全局负载均衡、缓存内容、域名分片、资源整合、雪碧图技术、字体图标的应用以及HTTP缓存机制来降低请求量；此外，还包含gzip/br压缩技术、代码压缩优化、精简头部信息、减少Cookie使用、启用HTTP/2协议、采用jpg/webp格式以及去除元数据等措施，如此等等。

在提升数据处理速度方面，诸如：采用SSR、SSG技术，预解析操作，实施懒加载策略，实现按需引入和加载，将CSS样式置于页面顶部，JavaScript脚本置于底部，使用语义化标签，优先使用CSS进行动画效果实现，运用事件委托技术，降低重排频率等，以及诸多代码优化手段，等等。

.....

请直接把上面的总结成一句话 给面试官

优化需求、代码改进、打包调整等均为常见做法，就如同众所周知的雅虎34条军规，此类常识性内容无需赘述。

鉴于各个项目的优化方向可能存在差异，因此，优化工作主要需依据各自的项目特点来执行。

要么跟人家聊一下框架优化，深入原理也很不错

优化内容的关键在于观察浏览器（以Chrome为例）开发者工具中的Lighthouse和性能分析工具。

Lighthouse能够生成性能分析报告，报告中详细展示了各项数据、评分以及优化建议，例如指出哪些图片文件过大。

运行时数据中的Performance信息，能够展现更为详尽的细节数据。例如，它能够揭示阻塞情况、重排与重绘等行为，这些信息是否足够详尽呢？

根据这些报告以及所反映的性能状况，我们将有针对性地持续改进我们的项目。

Lighthouse

直接在Chrome开发者工具中打开

或者 Node 12.x或以上的版本可以直接安装在本地

npm install -g lighthouse

安装完毕后，诸如生成掘金的性能分析报告这样的操作，仅需一行代码即可完成，随后便会自动生成一个HTML文件。

lighthouse https://juejin.cn/

无论是网络浏览器还是本地安装的版本，所生成的优质报告长度均完全一致，其中一份英文的HTML文档已被翻译，现展示给大家，如图所示。

如图所示，这份分析报告涵盖了五个主要部分，每个部分均可获得最高100分。紧接着，每个部分的具体内容将逐一进行详细阐述。

还是看一下英文版吧，一个程序员必须要养成这个习惯

如图，五项分别是：

既然我们已经掌握了如此丰富的信息，那么是否就可以对项目进行深入的诊断，并实施有针对性的优化措施呢？

是不是很棒

Performance

若将 Lighthouse 视为开胃小食，那么 Performance 则如同丰盛的正餐。

该系统记录了网站在运行期间所收集的性能信息。若我们回溯并观察页面的整体执行流程，便能够精确识别并分析各个时段页面的运行状况。然而，该系统并未提供性能评分，亦无优化策略的推荐，它仅以时间序列的形式呈现所收集到的数据。

启动“性能”功能，选择“内存”选项，点击界面左侧的“记录”按钮进行录制，随后进行相应操作或刷新网页，最后点击“停止”按钮完成录制，即可生成相关数据。

如图

概况面板

页面帧率(FPS)、白屏持续时间、CPU资源使用情况、网络加载进度、V8内存使用量（堆）等信息，均按照时间先后的顺序进行呈现。

那么怎么看这个图表找到可能存在问题的地方呢

在概览面板中锁定可能存在问题的具体时间点之后，我们该如何获取更深入的数据以探究引发该问题的根本原因呢？

在时间线上找到存在问题的部分，随后，相关详细信息便会呈现于性能面板之上。

性能面板

若我们在时间线上选定一个特定点（例如，红色区块所示），性能面板便会呈现出该时间点所涵盖的性能信息，具体如图所示。

性能面板上会列出很多性能指标的项，比如

Main 指标

性能指标种类繁多，然而在实际应用中，我们大多数情况下都会集中分析Main这一关键指标，具体如图所示。

上方第一行呈现的灰色字迹，标注着“Task”二字，每一个“Task”都代表一项任务。

下面黄色紫色的都是啥呢，那是一个任务里面的子任务

我们放大，举个例子

Task代表一项任务，而其下所列的则是该任务的具体子任务，若以代码形式来展示这一结构，则表现为：

function A(){
    A1()
    A2()
}
function Task(){
    A()
    B()
}
Task()

是不是就好理解得多了

因此，我们能够挑选出被标记为红色的任务，接着对其进行放大处理——只需轻轻滑动鼠标，即可实现这一操作，以便观察其详细的耗时细节。

例如，我们可以查看具体执行了哪些操作，各个函数的运行时间，若代码进行了压缩，则可见的是压缩后的函数名称。接着，我们只需点击某个函数，在面板的最下方，便会显示该函数的相关信息，包括函数名称、耗时以及所在文件的行号等信息。通过这种方式，我们能够轻松地找到耗时较长的函数。

您可以通过切换tab页来查看其调用栈等相关信息，这样做能更便于您定位到相应的代码部分。

具体大家可以试试～

Timings 指标

Timings 指标也需要注意，如图

它上面的FP、FCP、DCL、L、LCP这些都是个啥呢

别着急

前文提到Timings这一概念是用来表达某些重要时间节点的数据资讯，那么它具体指代的是哪些时刻呢？又是通过何种方式来呈现这些信息的呢？

然后根据指标体现出来的问题，有针对性的优化即可

结语

点赞支持、手留余香、与有荣焉

感谢你能看到这里，加油哦！

参考

Node 社群

我创建了一个充满活力的 Node.js 社群，汇聚了众多热爱 Node.js 的伙伴。若你对 Node.js 的学习抱有兴趣，或者有意参与后续的活动，欢迎加入我们的交流、学习和共建活动。只需在下方添加考拉好友并回复“Node”即可。