跟踪不同页面的页面下载时间以进行分析

Question

我正在尝试构建一个跟踪我网站页面性能的分析系统。

网站是内容驱动的，因此所有网页都使用相同的模板。 现在我们在页面开始时使用它：

var time  = Date.now()

...在页面末尾我们使用：

date.now - time

...并将此差异发送到跟踪API，后者存储此数据。

你能否提出更好的建议，因为我没有找到一些关于这种方法的好评。

Answer 1

Navigation Timing API提供可用于衡量网站性能的数据。与其他用于相同目的的基于JavaScript的机制不同，此API可以提供更有用和准确的端到端延迟数据。

function onLoad() { 
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}

有许多以毫秒为单位的测量事件，可以通过PerformanceTiming接口访问：

有关详细信息，请参阅http://www.w3.org/TR/navigation-timing-2/或仅试用window.performance对象。

实际上我建议使用现有的JS工具进行此类测量。例如，http://www.devmetrics.io及其lib https://github.com/devmetrics/devmetrics-js将为您提供此数据以及用于查看结果的UI。

function onLoad() { 
  devmetrics.measurePageLoad();
}