前端同学福利！详解lighthouse发现性能问题的修复方案！
最近使用了lighthouse进行前端 的性能测试，关于lighthouse的详细使用可以参考文章：详解前端页面性能测试方案——开源工具Lighthouse
https://blog.csdn.net/liwenxiang629/article/details/128530099
本文重点对lighthouse发现的常见前端问题进行分析总结，并提供常见的修复方案
Reduce unused JavaScript/减少未使用的 JS
去掉未使用的JS
Reduce unused CSS/减少未使用的 CSS
去掉未使用的CSS
删除js和css中没有使用的代码，可以通过工具chrome 插件Coverage统计代码覆盖率来实现，大家可以参考文章
Properly size images调整图片大小
使用srcset 属性，通常使用像素密度（如“1x”或“2x”）或图像宽度（如“320w”或“640w”）作为描述符。
<img srcset="large.jpg 2x,
small.jpg 1x"
src="small.jpg"
alt="A single image">
详情请参考：How to properly size images | GTmetrix
Serve images in next-gen formats采用新一代格式提供图片WebP
为较新的浏览器提供 WebP，为旧浏览器提供后备图像：
之前：
<img src="flower.jpg" alt="">
之后：
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>
详情参考https://web.dev/serve-images-webp/
Defer offscreen images 延迟加载无需在当前页面显示的图片
指网页上的任何图像，当用户加载页面时，这些图像不会立即被用户看到。设置方法如下：
<img loading="lazy">
详情参考https://theperformanceblog.com/defer-offscreen-images/
Serve static assets with an efficient cache policy 采用高效的缓存策略提供静态资源—延长缓存期限
Nginx缓存设置，比如
http {
server {
location / {
root /html;
index index.html index.htm;
# 开启缓存，并设置一年的缓存期
add_header Cache-Control "public,max-age=31536000";
}
}
}
Eliminate render-blocking resources 移除阻塞渲染的资源
采用异步加载或者延缓加载
优化link元素
当 link 的 rel 属性值为 preload 时，就能预加载资源，如下所示。
<link rel="preload" href="demo.js" as="script" />as 属性是告知浏览器加载的资源类型，包括 style、script、font、image 等。预加载可提升资源的优先级，不过当资源在几秒后未使用时，浏览器会发出告警。
当 link 的 rel 属性值为 preconnect 时，就能预连接站点，如下所示。
<link rel="preconnect" href="https://www.pwstrick.com" />
另一个与连接相关的类型是 dns-prefetch（如下所示），用来处理 DNS 查询，即 DNS 预解析。
<link rel="dns-prefetch" href="https://www.pwstrick.com" />
当 link 的 rel 属性值为 prefetch 时，就能预提取资源，如下所示。
<link rel="prefetch" href="demo.js" />
优化script 元素
使用延迟（defer）和异步（async）可以解决 script 元素阻塞 HTML 解析的问题，如下图所示
编辑第一行是默认的运行机制，在解析HTML文档时，一遇到 script 元素就停止解析，改成下载外部脚本，然后执行脚本，执行完后才会继续解析。
第二行是使用了 defer 属性后的运行机制，HTML 文档的解析和外部脚本的下载是同时进行的，解析完后才会执行脚本。
第三行是使用了async 属性后的运行机制，HTML 文档的解析和外部脚本的下载也是同时进行，但下载完后就开始执行脚本，执行完后才会继续解析。
例如：
<script async src="http://localhost:8080/test.js"></script>
<script defer src="http://localhost:8080/test.js"></script>
JS最好能放在html文件的底部，</body> 标签之前，这样可以让浏览器更好的加载页面
Does not use passive listeners to improve scrolling performance/未使用被动式监听器来提高滚动性能
设置addEventListener(e,i,{passive:true})
