性能优化到底应该怎么做

回复 交流 ，加入前端编程面试算法每日一题群

面试官也在看的前端面试资料

前言

性能优化是一个项目发展到一定时期之后绕不开的话题，也是每个工程师心中永远在撩拨的刺。

总结一下常用的前端性能优化的方法，希望对大家有些帮助~。

性能可能带来的影响(贩卖焦虑警告:exclamation:️)

试想当你做的酷炫特效因为慢了 0.1 秒就少被一个人看到时的落寞(ㄒoㄒ)，

试想当你引以为傲的细节交互因为慢了 0.2 秒就被竞争对手的平庸互动拉走用户的气愤(╯>д<)╯⁽˙³˙⁾，

试想当你精心打造的漂亮页面因为慢了 0.3 秒就被搜索引擎无情的排在后面的无奈∑(O_O；)。

所以，是时候重拳出击了，重铸性能的荣光，我辈义不容辞(￣▽￣)／。

调试工具

Network面板

Network面板记录了与服务器交互的具体细节。

在这里我们可以看到发起的请求数量，传输体积以及解压缩后的体积，同时还可以知道哪些资源是命中了强缓存，哪些资源命中的协商缓存。

network2.jpg

查看某一个请求的瀑布流可以让我们清晰的看到一个资源从服务器到达我们的电脑所花的时间。

如上图，排队用了1.65ms，DNS查询用了21.47ms，initial connection(进行TCP握手的时间)用了56.25ms，SSL握手的时间用了37.87ms，然后又用了100多ms第一个字节到达我们的电脑(TTFB - 上面的查询/建立)，接收整个文档花了17ms。

这时候我们基于上面的信息就可以粗略的得到，如果能在请求资源之前如果已经得到DNS地址(预查询)可以省去21ms，已经进行过握手可以省去100ms(预连接)，如果干脆请求也不请求可以省去200ms(缓存)继而针对这些点做对应的策略。

Network面板可以让我们初步评估网站性能，对网站整体的体积，网络的影响带来一个整体的认知，同时提供一些辅助功能，如禁用缓存，block某些资源。

lighthouse面板

lighthouse1.jpg

lighthouse是对网站整体的评估，通过几个不同的指标给网站进行打分。

First Contentful Paint首屏渲染时间，Chrome会取第一个渲染出来的元素作为时间参考。

Time to Interactive可交互时间，从能看到能摸的时间点。

Speed Index速度指数，页面的填充速度。

Total Blocking Time从能看到能摸之间超过50ms的任务总和。

Largest Contentful Paint页面中最大的那块渲染的时间点。

Cumulative Layout Shift元素移动所累积的时间点，比如有一个absolute的元素突然从左边移到了右边。

同时针对网站的信息，lighthouse还会给出一些完善建议：

lighthouse2.jpg

这些建议可以帮助我们在接下来的优化中提供一个大致的方向。

performance面板

performance1.jpg

performance面板会给我们提供一个具体的执行过程，从HTML文档下载，解析HTML，到解析CSS，计算样式，执行JS。

火焰图

performance2.jpg

从火焰图我们可以找到长任务，分析长任务，或者找到某些无关紧要的任务把他们拆分，延后，优化使他们达到一个理想状态。

performance monitor面板

pm1.jpg

performance monitor让我们监控内存和CPU的占用，它给出的是整体的占用数据，可以用来观察某一段代码某一个特效会不会造成性能影响。

webpack-bundle-analyze

如果你用到了webpack打包，可以用它来分析打包后的文件，做成具体策略。

从输入一个URL谈起

这是一个URL为了见到你穿越无数路由器的感人故事。

DNS查询

与服务器交互首先要进行DNS查询，得到服务器的IP地址，浏览器会首先查询自己的缓存，

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！