searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享
原创

前端性能分析工具的演进

2023-07-03 02:11:34
4
0

性能问题的产生

  • 前端承载交互逻辑增加
  • 性能优化设计知识面广,对开发人员要求高
  • 业务需求排期太紧,没时间优化性能
  • 网络、后端服务的瓶颈

前端性能分析及优化流程

页面性能反馈收集——性能分析——实现优化——部署&验收

页面性能反馈收集

  • 用户:“打开个十秒视频,等了一分半,合适吗?”
  • BOSS:“为什么竞品能做到秒开”
  • APM报警:Page X-LCP 10s-p50

性能分析

  • Lighthouse
    • 资源体积
    • 文件编码、压缩效益
    • 网络、缓存
    • js解析、执行时间
  • Webpack
  • Bundle
  • Analyzer
  • 谷歌浏览器自带的Devtools
0条评论
作者已关闭评论
t****m
98文章数
1粉丝数
t****m
98 文章 | 1 粉丝
t****m
98文章数
1粉丝数
t****m
98 文章 | 1 粉丝
原创

前端性能分析工具的演进

2023-07-03 02:11:34
4
0

性能问题的产生

  • 前端承载交互逻辑增加
  • 性能优化设计知识面广,对开发人员要求高
  • 业务需求排期太紧,没时间优化性能
  • 网络、后端服务的瓶颈

前端性能分析及优化流程

页面性能反馈收集——性能分析——实现优化——部署&验收

页面性能反馈收集

  • 用户:“打开个十秒视频,等了一分半,合适吗?”
  • BOSS:“为什么竞品能做到秒开”
  • APM报警:Page X-LCP 10s-p50

性能分析

  • Lighthouse
    • 资源体积
    • 文件编码、压缩效益
    • 网络、缓存
    • js解析、执行时间
  • Webpack
  • Bundle
  • Analyzer
  • 谷歌浏览器自带的Devtools
文章来自个人专栏
js
57 文章 | 1 订阅
0条评论
作者已关闭评论
作者已关闭评论
0
0