背景
性能优化是所有前端人的追求,在这条路上,方法多种多样。这篇文章,说一下可以怎样定义性能指标及上报。
指标
FP
含义
FP,全称 First Paint
,翻译为首次绘制
,是时间线上的第一个时间点
,它代表网页的第一个像素渲染到屏幕上所用时间,也就是页面在屏幕上首次发生视觉变化的时间。
统计逻辑
通过performance.getEntriesByType('paint’),取第一个pain的时间。如:
function getFPTime(){
const timings = performance.getEntriesByType('paint')[0];
return timings ? Math.round(timings.startTime) : null
}
FCP
含义
FCP,全称 First Contentful Paint
,翻译为首次内容绘制
,顾名思义,它代表浏览器第一次向屏幕绘内容
。
注意:只有首次绘制文本、图片(包含背景图)、非白色的canvas或SVG时才被算作FCP。
统计逻辑
通过performance.getEntriesByType('paint’),取第二个pain的时间,或者通过Mutation Observer观察到首次节点变动的时间。如:
const domEntries = []
const observer = new MutationObserver((mutationsList)=>{
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
if (mutation.type == 'addedNodes') {
//TODO新增了节点,做处理,计算此时的可见性/位置/出现时间等信息,然后 push 进数组
...
domEntries.push(mutation)
}
}
});
function getFPTime(){
const timings = performance.getEntriesByType('paint');
if(timings.length > 1)return timings[1]
return timings ? Math.round(timings.startTime) : null
//伪代码,算 DOM 变化时的最小那个时间,即节点首次变动的时间
return Math.round(domEntries.length ? Math.min(...domEntries.map(entry => entry.time)) : 0);
}
MutationObserver
理解及使用补充:
https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
https://javascript.ruanyifeng.com/dom/mutationobserver.html