【性能优化】前端 - 性能分析与优化

1.应用场景

主要用于前端项目的性能优化，即Web 应用在浏览器上的加载和显示的速度。

2.学习/操作

1. 文档阅读 21 | Chrome开发者工具：利用网络面板做性能分析-极客时间 加餐三｜加载阶段性能：使用Audits来优化Web性能-极客时间  加餐四｜页面性能工具：如何使用Performance？-极客时间   Chrome 与 开发者工具_穿素白衫的少年的博客-CSDN博客 2. 整理输出 2.1 介绍 wiki 对 Web 性能的定义： Web 性能描述了 Web 应用在浏览器上的加载和显示的速度。 2.2 工具 Chrome 开发者工具  即DevTool 主要面板 Audits/Lighthouse  // 优先推荐 Performance  // 功能强大，但是不容易掌握 Network // 详情深入，也算是辅助 2.3 实践 简要过程 1. 打开目标网站, 打开chrome devTools, 切换到lighthouse面板, 点击Generate report 2. 等待报告生成完毕 3.认真查看报告, 分析报告.  Note: 这里是开发环境, 所以会存在一些问题,  比如js/css没有压缩, 但这不是关注点. 更多的是关注其他在问题, 在生产环境中也会出现的问题. 部署到线上环境后, 建议也做检测, 存在的问题, 然后针对性去解决. 4.按照报告内容, 存在的问题以及建议的优化解决方案去实践 Note: 可点击 Learn more 查看更加详细的文档去学习, 解决存在的问题. 主要看 Preformance 中的 Opportunities 和 Diagnostics  比如: Opportunities --> Enable text compression 点开, 可以看到更加详细的信息:  Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes. Learn more. 基于文本的资源应该与压缩(gzip, deflate或brotli)一起提供，以最小化总网络字节数。了解更多 点击Learn more后 其他选项也是类似, 认真看完, 然后实践即可 会有所得. 3. 思考 做事，包括编写程序，都是有迹可循的，只是我们通常不愿意多花时间去寻找，而且有时候，即便去寻找，可能找不到，又或者找到了，却依然无从下手, 或许这就是人生呀~~ 后续补充 ...

3.问题/补充

TBD

4.参考

参见文档阅读列表

后续补充

...