如何统计打开一个网页所用的时间

传统方式一

var t0 = new Date().getTime();
window.onload = function() {
     var now = new Date().getTime();
     var latency = now -t0;
     alert("page loading time: " + latency);
}

传统方式二

var t0 = 135131321312; // 后端输出服务器时间戳
window.onload = function() {
     var now = new Date().getTime();
     var latency = now -t0;
     alert("page loading time: " + latency);
}

传统方式三

// page1
window.onbeforeunload = function() {
     var t0 = new Date().getTime();
     // 将离开page1页面的时间写入cookie
     KISSY.Cookie.set("t0", t0);
}
// page2
var t0 = KISSY.Cookie.get("t0");
window.onload = function() {
     var now = new Date().getTime();
     var latency = now -t0;
     alert("page loading time: " + latency);
}

缺点：页面间关联依赖，部署和实现复杂，无法统计直接进入的页面

W3C Navigation Timing API console.dir(window.performance)

优化原则：

尽早返回首字节内容，一部加载页面底部的 HTML 内容，适量压缩 HTML 并开启 GZIP

将 CSS 放到页面顶部，优化 CSS 和 JS 的顺序，控制 DOM Tree 数量 一部加载部分静态资源 延迟加载