性能优化无头绪？ 试试Lighthouse！！！

面试官： 你对项目做过哪些优化？

• 试着从Lighthouse上找找答案吧，它会对你的网站进行检测，并给出相应的建议。
• 跟着建议修改，你会发现你对性能优化有

Lighthouse

工具介绍：Lighthouse是用于提高网页质量的开源自动工具。 对性能，可访问性，渐进式Web应用程序，SEO等进行审核。

一、使用Lighthouse生成报告

1. 打开控制台

2. command + shift + p 打开选项

3. 搜索lighthouse

4. 针对你的项目类型（Mobile/Desktop），点击【Generate report】生成报告：

类目介绍

• Preformance 性能审核（衡量性能并寻找机会加快网页加载速度）
• PWA PWA 审核（衡量您的网站是否迅速、可靠且可安装。）
• Best-practices最佳做法审核（遵循这些最佳做法，改善您网页的代码健康状况）
• Accessibility 无障碍功能审核（所有用户是否都能有效地访问内容并浏览您的网站？）
• SEO SEO审核（搜索引擎对您的内容的理解程度是怎样的？）

5. 生成一个报告（惨不忍睹）

可直接打开相关页面：

二、针对性的进行性能优化

 适当大小的图像

• 提供适当大小的图像，以缩短加载时间。

提供新一代格式的图像

• 提供JPEG 2000，JPEG XR和WebP这样的图像格式通常比PNG或JPEG更好的压缩率，意味着更快的下载速度和更少的数据消耗。

视频格式替换动图(gif/apng)

• 大的GIF不能有效地传递动画内容。 考虑将MPEG4 / WebM视频用于动画，将PNG / WebP用于静态图像，而不是GIF，以节省网络字节。

预加载关键请求

• 考虑使用<link rel = preload>优先获取当前在页面加载中稍后请求的资源

删除未使用的JavaScript

• 删除未使用的JavaScript以减少网络活动消耗的字节。

避免大量的网络负载

• 大量的网络负载使用户消耗了更多的流量和更多的时间。

确保文本在Webfont加载期间保持可见

• 利用字体显示CSS功能来确保在加载Web字体时用户可见文本。

图像元素要有明确的宽度和高度

• 在图像元素上设置明确的宽度和高度，以减少布局偏移并改善CLS。

通过有效的缓存策略服务静态资源

• 较长的缓存生存期可以加快对页面的重复访问。

减少主线程工作，避免长时间的主线程任务

• 考虑减少花在解析，编译和执行JS上的时间。 您可能会发现提供较小的JS负载有助于解决此问题。

避免DOM太大

• 较大的DOM将增加内存使用量，导致更长的样式计算，并产生复杂的布局重排。

减少JavaScript执行时间

• 减少花在解析、编译和执行JS上的时间。提供较小的JS文件有助于解决此问题

避免链接关键请求

• 下面的关键请求链向您显示了哪些资源被高优先级加载。 考虑减少链的长度，减小资源的下载大小，或推迟不必要的资源的下载以改善页面负载

 消除render-blocking资源

• 资源阻塞了页面的第一幅画。 考虑内联交付关键JS / CSS并推迟所有非关键JS /样式。

压缩CSS

• 缩小CSS文件可以减少网络有效负载的大小

压缩JS

• 缩小JavaScript文件可以减少有效负载大小和脚本解析时间。

启用文字压缩

• 基于文本的资源应通过压缩（gzip，deflate或brotli）提供服务，以最大程度地减少网络总字节数。

使用http2

• 与HTTP / 1.1相比，HTTP / 2具有许多优点，包括二进制标头，多路复用和服务器推送。

最大限度地减少第三方使用

• 第三方代码会严重影响负载性能。 限制冗余第三方提供程序的数量，并在页面主要完成加载后尝试加载第三方代码。