Navigation Timing API入门

前端

2024-01-18 22:26:30

前言

网页加载时间对用户体验至关重要。一个加载缓慢的页面会让用户感到沮丧并可能导致他们离开您的网站。为了解决这个问题，前端开发者可以使用各种工具和技术来优化网页加载时间。

Navigation Timing API 简介

Navigation Timing API是一种浏览器API，允许您测量网页加载时间的各个阶段。该API提供了有关以下内容的信息：

页面加载开始时间 ：浏览器开始加载页面时的时间。
DNS查询开始时间 ：浏览器开始查询DNS服务器以查找页面主机的IP地址时的时间。
TCP连接开始时间 ：浏览器开始与页面主机的服务器建立TCP连接时的时间。
HTTP请求开始时间 ：浏览器向页面主机的服务器发送HTTP请求以获取页面时的时间。
HTTP响应开始时间 ：服务器开始向浏览器发送HTTP响应时的时间。
页面DOM加载完成时间 ：浏览器加载完成页面的DOM树时的时间。
页面onload事件处理程序完成时间 ：浏览器完成页面onload事件处理程序时的时间。

使用指南

要使用Navigation Timing API，您需要在您的网页中添加以下代码：

<script>
window.onload = function() {
  var timing = performance.timing;

  console.log("页面加载开始时间：" + timing.navigationStart);
  console.log("DNS查询开始时间：" + timing.domainLookupStart);
  console.log("TCP连接开始时间：" + timing.connectStart);
  console.log("HTTP请求开始时间：" + timing.requestStart);
  console.log("HTTP响应开始时间：" + timing.responseStart);
  console.log("页面DOM加载完成时间：" + timing.domComplete);
  console.log("页面onload事件处理程序完成时间：" + timing.loadEventEnd);
};
</script>