Skip to main content

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

传统方式一

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 数量 一部加载部分静态资源 延迟加载