在当今的互联网时代，性能已经成为了用户体验中不可或缺的一部分。随着移动设备的普及，用户对于网页加载速度的期待也越来越高。为了满足这一需求，Etsy等公司已经开始推动一种性能文化，通过教育、激励和授权每一位员工，来提升整个团队对性能的重视。
这种文化的形成受到了GitHub上的一个仓库以及StackExchange的Miniprofiler的启发。Miniprofiler是一个轻量级的性能分析工具，它可以在网页顶部显示导航时间统计数据。导航时间API是一个JavaScript API，它提供了一种简单的方式来获取页面导航和加载事件的准确和详细的计时统计数据。
在导航时间API出现之前，测量一个页面完全加载所需的时间一直是一个挑战，但现在这项技术让这一切变得简单。重要的是要理解，导航时间数据与开发者工具中的网络统计数据非常相似。
导航时间API现在得到了所有主流浏览器的支持，包括Chrome、Firefox、Safari和Edge。如果浏览器不支持这项API，将会显示错误消息。如果没有消息显示，那么不妨在GitHub上创建一个问题。
对于移动设备来说，这可能是最有趣的部分。因为移动/平板版本的开发者工具并不可用，所以没有机会评估页面加载时间，也无法解释为什么它可能会变慢。
在生产环境中，虽然不推荐向用户展示这类数据，但仍然可以找到多种方式来利用它。例如，有浏览器扩展可以注入自定义的JavaScript到任何网站，如Cjs和Greasemonkey；Fiddler允许自动注入脚本到页面中。
例如，在StackOverflow个人资料中，就有一个展示导航时间数据的例子。总之，不要忘记性能本身就是一个特性。在每个页面上向所有人展示页面加载时间，是一个很好的机会来及早发现性能问题。如果一个页面违反了服务水平协议（SLA），现在使用这个脚本可能会更容易一些。
以下是使用导航时间API的一个简单示例代码：
window.performance.getEntriesByType('navigation').forEach(function(nav) {
console.log('Navigation Timing data:');
console.log('%cDomain Lookup Time', 'color: green;', nav.domainLookupEnd - nav.domainLookupStart);
console.log('%cRedirect Time', 'color: red;', nav.redirectEnd - nav.redirectStart);
console.log('%cApp Cache Time', 'color: blue;', nav.domainLookupStart - nav.fetchStart);
console.log('%cUnload Event Time', 'color: orange;', nav.unloadEventEnd - nav.unloadEventStart);
console.log('%cTCP/TLS Handshake Time', 'color: purple;', nav.connectEnd - nav.connectStart);
console.log('%cServer Response Time', 'color: yellow;', nav.responseEnd - nav.responseStart);
console.log('%cRequest / Response Sequence', 'color: grey;', nav.domainLookupStart - nav.fetchStart);
console.log('%cDOM Construction Time', 'color: brown;', nav.domComplete - nav.domLoading);
console.log('%cDOM Elements Count', 'color: pink;', nav.domElements);
console.log('%cWindow Load Time', 'color: teal;', nav.loadEventEnd - nav.loadEventStart);
});
这段代码会打印出页面加载过程中的各个阶段所花费的时间，包括域名查找时间、重定向时间、应用缓存时间、卸载事件时间、TCP/TLS握手时间、服务器响应时间、请求/响应序列、DOM构建时间、DOM元素计数和窗口加载时间。