查看性能优化

1.Lighthouse

Lighthouse 是 google 一个开源的自动化工具；

运行 Lighthouse 的方式有两种：

一种是作为 Chrome 扩展程序运行；（推荐）

 

 

另一种作为命令行工具运行。

Chrome 扩展程序提供了一个对用户更友好的界面，方便读取报告。通过命令行工具可以将 Lighthouse 集成到持续集成系统。
展示了白屏、首屏、可交互时间等性能指标和 SEO、PWA 等。

2.PageSpeed（https://developers.google.com/speed/pagespeed/insights/）（需FQ）

不仅展示了一些主要的性能指标数据，还给出了部分性能优化建议。（中文）

 

1.浏览器的lighthuose分析LCP，从页面开始加载到视窗内最大内容绘制的所需时间

2.使用 webpack 的插件 webpack-bundle-analyzer 来分析代码大小问题

3.Gzip压缩

4.css有没有按需加载，资源压缩等

5.图片有没有懒加载、压缩

6.将一些资源，比如图片、公共类库放到 CDN 上

7.对于一些不需要经常变化的资源，设置一个比较大的缓存时长或者过期时间

8.使用HTTP2 增加了多路复用、流优先级、头部压缩等功能

9减少回流，如计算完毕再提交给浏览器发出重计算请求；使用类名去更改样式，而不是具体css