前端性能优化

前端性能优化

优化目标

pass

前端性能评估

2-5-8原则

GOOGLE建议

  • 页面加载时间(Page Load Time)
  • 首屏加载时间(First Contentful Paint):FCP

FCP>=FP

  • 用户可交互时间:
  • 白屏时间:FP,首次绘制时间
1
whidow.performance.getEntriesByType('paint')[0].startTime
  • 资源文件大小

性能指标计算方法(RATL)

RAILResponseAnimationIdleLoad 的首字母缩写

具体细节

浅谈前端性能指标

加载性能

  • First Meaning Paint(FMP):首次关键内容绘制,指浏览器渲染出第一个关键内容的时间。
  • Largest Contentful Paint(LCP):最大内容绘制
  • Time to Interactive:(TTI):可交互时间

渲染性能

前端性能检测工具

performance