前端性能总结

一件事情如果无法衡量，就无法管理-彼得德鲁克

DevTools Network面板看到Load、DOMContentLoaded时间； -- 资源角度 WebPageTest的加载屏幕录制 -- 用户角度 什么时间可以看到

performance.now() 构建首屏指标

• 均值：多个 均值 （极端、偏离）
• 分为数：百分之多少是2s以内 。中多少就是分为数 代表大部分用户，侧重需性能功能差的用户端的性能状况
• 秒开率：关注多少用户端可以达到非常高的性能水平

度量首屏

First Paint (FP) 第一次绘制 （就出背景色，由白变黑） First Content Paint (FCP 第一次有内容的绘制 顶部出现了一个导航条) First Meaningful Paint (FMP) 大部分都出来了，中部、底部图片、视频正在加载中没绘制 Time to Interactive (TTI 可交互时间) 可以交互玩啦！

如何度量FMP

• 关键逻辑倒计时：useEffect(()=>{ reportFMP(performance,now()) },[])
• Hero Element ： 最抓眼球哪个Banner或者什么什么东东html <img onload="reportNowAsFMP()"/> Google 推荐新提案 element-timing 精准html <img src="xxx" elementtiming="foobar"/>
• LCP 自动探测FMP

选定度量指标

• 大部分页面，推荐LCP
• 对于片中展示且有重点元素的页面，推荐Hero Element
• 对于有关键业务逻辑的场景，推荐使用关键逻辑计时

各有千秋，无需尽善尽美

度量流畅度

前端的复杂度提高带来的影响不只与页面打开速度有关，还包括用户在操作页面时感受到的流畅度，如滚多动卡针

流畅度指标

FPS (Frames Per Second 每秒传输帧数)。 对于一个网页来说，达到60fps就会让用户感到非常流畅，如果显著低于这个值，则用户感到卡顿 浏览器的JS执行和页面渲染(还有Layout)都是阻塞进行的，在页面执行JS的过程中无法进行渲染。而从60fps可以推算，页面至少每隔16.7ms就需要渲染一次，否则就会出现丢帧。也就是说，当页面中执行了非常复杂的任务时，就可能发生丢帧。

可视化工具 Chrome的DevTools在Performance面板中就会提供FPS的概览。此外，Chrome store中提供了很多可视化监控FPS的插件。

用户端度量 解决自己机器上度量的问题以后，应该如何度量用户机器上的流畅度？

requestAnimationFrame是一个浏览器API，用于告知浏览器期望应该在下次绘制前调用传入的回掉函数。理论上 60fps情况下每次执行时间间隔大致16.7ms

(function(){
    let lasttime = 0;
    const measure = () => {
        console.log(Date.now() - lastTime);
        lasttime = Date.now();
        requestAnimationFrame(measure);
    }
    measure();
})()

Long Task API