browser-performance v0.0.4

browser-performance

网页加载性能度量：

DOMMutation_i:5_c:1202_a:5_r8_rt29 字段说明
i: index
c: dom count , element.querySelectorAll('*').length
a: mutation addedNodes.length
r: mutation removeddNodes.length
rt: repaintTime current timestamp minus next repaint timestamp in requestAnimationFrame

Usage

SSR

//ssr(server side render)
(function(){
    var performance = window.performance  = window.performance || window.webkitPerformance || window.msPerformance || window.mozPerformance;
    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.__perfStats__ = []
    requestAnimationFrame(function(){ //next repaint
        window.__perfStats__.push({
            timestamp: Date.now(),
            custom: 'firstScreen'
        })
    })
})()

如果页面用了类jQuery工具， 可以直接添加统计和识别首屏代码：

window.addEventListener('load', ()=>{
    setTimeout(()=>{
        $.getScript('http://{{cdnUrl}}/broswer.performance.min.js', function(){
           var browserPerformance = new BrowserPerformance({
                autoPrint: 1
            })
        })
    }, 3500)
})
browserPerformance.getData() //获取性能数据
browserPerformance.printAll() //打印数据

或者直接appendScript:

setTimeout(()=>{
    callback = ()=>{
       var browserPerformance = new BrowerPerformance({
            autoPrint: 1
        })
    }

    var head= document.getElementsByTagName('head')[0]; 
    var script= document.createElement('script'); 
    script.type= 'text/javascript'; 
    script.onload= function(){ 
        callback(); 
    } 
    script.src= 'http://{{cdnUrl}}/browser.performance.min.js'; 
    head.appendChild(script);
}, 4000)
browserPerformance.getData() //获取性能数据

CSR

//csr(client side render)
import performance from 'browser-performance'
performance({
	scriptUrl: 'http://{{cdnUrl}}/browser.performance.min.js',
	autoPrint: 1, //自动打印数据
    callback: function(){
        var browserPerformance = new BrowerPerformance()
    }
})
browserPerformance.getData() //获取性能数据

自定义事件Custom Event

window.__perfStats__.push({
    timestamp: Date.now(),
    custom: 'MutationObserved'
})

How

如何度量首屏时间？
如何精准度量首屏,业界一直没有定论,上次在大讲堂请教X5内核的同学,也是直接用高速摄像设备记录分析快照,W3C Web性能工作组联席主席Grigorik, 也在这个issue中解释了为什么没有把first paint time 和 First meaningful paint 放到Navigation Timing API中, 其中指出we can't define this in the spec, since this varies for every site。 但开发人员很清楚自己开发的页面,新增了多少个node或页面多少个dom节点时是首屏,所以可以用MutationObserver,去监听DOM的变化, 然后, 在requestAnimationFrame回调里记录下一帧的时间,辅以Navigation Timing API就可以计算首屏时间。 简化后的代码：

new MutationObserver(function (records) {
    window.__mutationMap__[index] =  {timestamp: Date.now()} //用于记录下一帧的时间
    requestAnimationFrame(function(){ //下一帧
        window.__perfStats__.push({
            index: index,
            timestamp: Date.now(),// 这个时间减navigationStart就是首屏时间
            count: document.querySelectorAll('*').length,  //判断count 和 modifiedDetail识别首屏
            modifiedDetail: records //变更的nodes
        })
    })
});

计算出来的首屏与chrome performance screenshot有50~110ms的差异， chrome devtools 0~1000ms采样10次，采样周期100ms， 采样本身对网页性能会有影响(也是X5内核的同学没用直接用devTools的原因), 总体来说在差异在可接收的范围内。

Compare To Chrome Performance Screenshot

ssr

csr by vue