前端性能优化，发现问题解决问题

一，发现性能问题

打开chrome调试工具，找到LightHouse页签，点击Analyze page load按钮等待生成报告

二，Lighthouse

Lighthouse生成的是一个报告，会给你的页面跑出一个分数来。分别是页面性能（performance）、Progressive（渐进式 Web 应用）、Accessibility（可访问性）、Best Practices（最佳实践）、SEO 五项指标的跑分。甚至针对我们的性能问题给出了可行的建议、以及每一项优化操作预期会帮我们节省的时间。这份报告的可操作性是很强的——我们只需要对着 LightHouse 给出的建议，一条一条地去尝试，就可以看到自己的页面，在一秒一秒地变快。

1，PWA渐进式web应用

1.1，为什么要用PWA？

简单来说，是为了web应用更好的用户体验。

• 当你的web页面处于离线或者弱网情况，可以调用预先缓存资源，使你的应用正常加载。
• 部分资源无需经过网络，页面秒开。
• 你的页面可以被搜索引擎收录。
• 可以通过message进行离线消息推送。
• 应用可以被添加到手机桌面，像原生应用一样可以全屏，推送

离线缓存，可以在offline离线的时候依然可以访问到页面！！！非常适合首页做离线缓存！

1.2，怎么用PWA?

• 使用HTTPS
• 使用Service Worker技术（下文有详细介绍），实现离线加载技术
• 把我们需要离线的文件放到App Mainfest文件代码中

1.2.1，service worker

1. 缓存文件到客户端本地，离线也可以加载，首次加载之后每次加载都是用的service worker数据
2. 使用service-worker发送消息

原文：https://blog.csdn.net/tangdou369098655/article/details/122531220
代码git地址：https://gitee.com/tangdd369098655/service_worker.git

2，Performance性能

2.1，FCP（全称First Contentful Paint） 首次内容绘制

1，消除渲染阻塞资源，例如css和js的加载和渲染
2，启动文本压缩，最小化javascript，最小化css
3，删除没有用到的js
4，删除没有用到的css
5，使用HTTP/2
6，使用prefetch或preload与第三方源简历早起连接
7，使用下一代图像格式
8，适当的图片大小（图像不要过大，注意控制）
9，懒加载，延迟加载屏幕外的图像
10，避免为了配合老浏览器和提供很多源代码给现代浏览器。（说人话：优雅降级。polyfill和transforms使旧浏览器能够使用新的JavaScript特性。然而，许多功能对于现代浏览器来说并不是必需的。对于打包的JavaScript，使用module/nomodule特性检测的现代脚本部署策略，以减少交付到现代浏览器的代码量，同时保留对旧浏览器的支持。）

2.2，LCP（全称Largest Contentful Paint） 最大内容绘制

反映的是从页面开始加载到页面视口上最大的图片或者文本块渲染的时间，小于2.5s为合格

解决方案

• 请求阶段服务端响应缓慢
• 渲染阶段阻塞的JS和CSS
• 资源加载时间
• 客户端渲染

2.3，SI（全称Speed Index）速度指数

2.4，TBT（全称Total Block Time）总阻塞时间

1，避免过大的DOM。过大的DOM会占用内存，增加样式计算和产生昂贵布局流，页面重绘影响css渲染。（减少DOM个数，减少DOM深度，减少子元素个数）

2.5，CLS(Cumulative Layout Shift) 累计布局偏移

它是一种保证页面的视觉稳定性，从而提高用户体验的指标方案
解决方案：
1，避免大型布局变化，可以尝试骨架屏
2，图像元素需要明确的宽度和高度

3，Accessibility（Web应用可访问性）

1，img元素需要alt属性
2，链接文本(以及图像的替代文本，当用作链接时)具有可辨别性、唯一性和可聚焦性，可以改善屏幕阅读器用户的导航体验
3，背景色和前景色没有足够的对比度
4，链接依靠颜色来区分（可点击链接需要有足够的可阅读性）
5，需要标记html的lang属性。（不说明lang属性可能会导致乱码）
6，结构不佳

4，Best Practices（最佳实践）

1，调用了已弃用的api
2，使用了第三方cookies（chrome后面会删除对第三方cookies的支持）
3，不要监听unload事件，它可能会组织浏览器优化，尽量使用pagehide或visibilitychange事件代替
4，查看console打印的日志还有issure中提示的问题，需要优化。
5，不要显示宽高比不正常的图片

5，SEO（搜索引擎优化）

1，No <meta name="viewport"> tag found
2，link链接无法抓取（搜索引擎是在链接上使用href来抓取网站的）
3，img元素需要alt属性

三，优化

从上述的lighthouse接口分析，影响用户体验主要分为几个方面：首屏展示速度，页面加载速度，视觉稳定性，页面可阅读性等。

性能优化

优化点：
1，压缩，最小化css和js文件
2，尽可能减少图像大小，且选择最优的图像格式
3，预加载（prefetch，preload）第三方源文件
4，图片懒加载，对于屏幕外的图像进行懒加载
5，删除当前面不使用的css和js代码及文件（tree shaking）
6，避免js和css阻塞，注意加载顺序
7，建议用优雅降级
8，使用HTTP/2
9，避免过大的DOM数量
10，避免布局回流，重排，尽量占位，明确图像的宽高
11，利用service worker实现离线加载
12，

结合工程化的优化方案：
1，tree shaking，删除没有用到的代码
2，按需加载，用不到的代码就不会打包进去
3，代码分离，防止重复
4，打包压缩代码，拆分为多个小的文件，而不是一个巨大的文件。
5，检查代码，避免css和js阻塞，注意加载顺序
5，尽可能减少图像大小
6，减少页面重排重绘
7，预加载

搜索引擎优化

1，img需要提供alt属性
2，a标签需要提供可用的href
3，

体验

1，链接文本的可阅读性
2，背景色和前景色要有足够的对比度
3，img需要提供alt属性
4，拥有好的页面结构

参考：https://blog.csdn.net/ganyingxie123456/article/details/134648908