| 指标名称 |
优化前 |
优化后 | 提升 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
了解性能指标及测量工具
分析需要优化的地方
2.1. 了解测量工具及性能指标
2.1.1 Performance
2.1.1.1 FCP
2.1.1.2 LCP
2.1.1.3 TTI
2.1.1.4 Speed Index
2.1.1.5 TBT
2.1.2 最佳实践
2.1.3 SEO
2.2. 分析需要优化的地方
2.2.1 Performance
-
减少未使用的 JS； -
合理使用图片的格式，webp 或者 avif 更快； -
延迟加载不在视图的图片； -
JS 压缩； -
图片的尺寸大小应该适当； -
减少未使用的 CSS。
-
需要加载的资源太多太大，有 147 个请求，合计 11mb； -
有 40 个静态资源的缓存只有 1 小时 -
滚动事件没有添加标记{passive: true})，导致需要等待侦听器完成执行后再滚动页面； -
图像元素没有设置明确的宽度和高度； -
JS 文件太多，主线程工作量太大、JS 执行时间太长；
2.2.2 最佳实践
-
图片的分辨率太低，清晰度不够； -
没有设置 CSP 策略。
2.2.3 SEO
-
没有 meta description； -
图片没有 alt 属性； -
robots.txt 是无效的。
-
体积太大，达 11mb； -
图片太大，图片格式也有影响。
3.1. 体积优化
3.1.1 代码压缩
3.1.2 代码分包
3.1.3 组件按需加载
同时使用骨架屏作为懒加载的兜底组件，可以让用户感知加载更快。
在鼠标移入导航栏时预加载路由组件，可以加快页面展示。
3.1.4 工具库按需加载
3.1.5 静态资源上传 CDN
3.1.6 删除不需要的资源
3.1.7 避免重复的 npm 包引入
3.1.8 避免 esm 依赖嵌套
3.1.9 图标按需加载
3.1.10 小结
3.2. 图片优化
3.2.1 图片懒加载
3.2.2 图片尺寸
3.2.3 图片格式设置
设置 CSP 策略
设置合理的图片的分辨率
1. meta description、keywords 优化
<meta name="keywords" content="xx" /> <meta name="description" content="xx" />
2. 图片加上 alt 属性
<img src="smiley.gif" alt="Smiley face" />
<scriptdefersrc="https://h5static.m.jd.com/act/jd-jssdk/latest/jd-jssdk.min.js"></script>
useEffect(() => {// 初始化测速组件,在这里可以打开一些控制的开关，如是否上报接口if (IS_PROD) {// @ts-ignorejmfe.profilerInit({flag: xxx, // 这是应用ID，需要先在烛龙申请应用autoReport: true,autoAddStaticReport: true,autoAddApiReport: true,autoAddImageReport: false, // 支持所有图片上报,如果图片多，切记关闭，否则存在性能问题performanceReportTime: 8000,profilingRate: 1,})}}, [])
参考资料:
[1] 被删的前端游乐场-前端性能优化-归纳篇：https://godbasin.github.io/front-end-playground/front-end-basic/performance/front-end-performance-optimization.html#%E6%97%B6%E9%97%B4%E8%A7%92%E5%BA%A6%E4%BC%98%E5%8C%96-%E5%87%8F%E5%B0%91%E8%80%97%E6%97%B6
[2] 前端缓存 API 请求数据的解决方案：https://blog.csdn.net/qq_41581588/article/details/128565077
[3] 网易云课堂 Service Worker 运用与实践：https://mp.weixin.qq.com/s/3Ep5pJULvP7WHJvVJNDV-g
本文分享自微信公众号 - 京东云开发者（JDT_Developers）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
