前端性能优化

Posted on Edited on In , ,

前端性能优化

优化目标

pass

前端性能评估

2-5-8原则

GOOGLE建议

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

FCP>=FP

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

性能指标计算方法（RATL）

RAIL 是 Response、Animation、Idle 和 Load 的首字母缩写

具体细节

浅谈前端性能指标

加载性能

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

渲染性能

前端性能检测工具

performance