web 性能优化

[Yang03]

首先看几个关键点： 1.firstPaintTime（白屏时间） 2.domContentLoaded (DOM 和 CSSOM 均准备就绪的时间点) 3.domComplete (网页及其所有子资源都准备就绪的时间点)

firstPaintTime 发生在  domContentLoaded 之后。    

firstPaintTime（白屏时间）

如何定义白屏时间

 我们把浏览器请求发布，到浏览器fisrtPaintTime的时间作为白屏时间
 借助 chrome 的 window.chrome.loadTimes.firstPaintTime
 它返回一个精确到毫秒的时间戳

如何跨平台获取firstPaintTime

moz 支持 MozAfterPaint 事件
IE 有 window.performance.timing.msFirstPaint

var results = {};
var mozFirstPaintTime = null;

function mozPaintHandler() {
    window.removeEventListener('MozAfterPaint', mozPaintHandler);
    mozFirstPaintTime = new Date().getTime();
}
window.addEventListener('MozAfterPaint', mozPaintHandler, true);

if (typeof window.chrome !== 'undefined') {

    var first_paint_secs = window.chrome.loadTimes().firstPaintTime - window.chrome.loadTimes().startLoadTime;
    results['first_paint'] = first_paint_secs * 1000;
}) else if (typeof window.performance.timing.msFirstPaint !== 'undefined') {
    results['first_paint'] = window.performance.timing.msFirstPaint - window.performance.timing.navigationStart;
} else if (mozFirstPaintTime !== null) {
    results['first_paint'] = mozFirstPaintTime - window.performance.timing.navigationStart;

}

[Yang03]

https://github.com/axemclion/karma-telemetry/blob/master/src/scripts/benchmarks.js