導(dǎo)航定時(shí)API通過(guò)提供精確的頁(yè)面加載時(shí)間數(shù)據(jù)來(lái)幫助開(kāi)發(fā)者測(cè)量網(wǎng)頁(yè)性能。它利用JavaScript中的performance對(duì)象，記錄從用戶發(fā)起導(dǎo)航到頁(yè)面完全加載各關(guān)鍵階段的時(shí)間戳，如DNS查找、服務(wù)器響應(yīng)和頁(yè)面交互時(shí)間。借助這些時(shí)間戳差值，可計(jì)算出首字節(jié)時(shí)間、DOM加載時(shí)間和完整頁(yè)面加載時(shí)間等指標(biāo)。其優(yōu)勢(shì)在于跨瀏覽器標(biāo)準(zhǔn)化、無(wú)需額外庫(kù)且能捕捉完整加載流程。但需注意舊版瀏覽器支持有限、跨域限制及某些環(huán)境下數(shù)據(jù)可能缺失的問(wèn)題。

The Navigation Timing API is a browser tool that helps developers measure how fast a webpage loads. Instead of guessing or relying on rough estimates, this API gives precise timing data for different parts of the page load process — like when the DNS lookup starts, when the server responds, or when the page becomes interactive. It’s built into modern browsers and doesn’t require any libraries, making it a reliable way to track performance.

How Does the Navigation Timing API Work?

This API collects detailed timing information through the performance object in JavaScript. You can access it using performance.timing, which returns a bunch of timestamps marking key moments during navigation and loading.

For example:

• navigationStart: When the user initiates a navigation (like typing a URL or clicking a link).
• responseEnd: When the last byte of the response is received.
• domContentLoadedEventEnd: When the initial HTML document has been completely loaded and parsed.

By subtracting these timestamps from each other, you can calculate things like:

• Time to First Byte (TTFB): responseStart - domainLookupStart
• Page Load Time: loadEventEnd - navigationStart

These numbers are super useful if you're trying to understand or improve your site's performance.

What Can You Measure With It?

You can get a lot of insights from the Navigation Timing API. Here are some common metrics people track:

• DNS Lookup Time: How long it takes to resolve the domain name.
• TCP Connection Time: The time taken to establish a connection with the server.
• Time to First Byte (TTFB): How long before the browser receives the first byte of the page.
• DOM Load Time: From when the document starts loading until it finishes parsing.
• Full Page Load Time: Until everything (like images and scripts) is fully loaded.

Each of these gives you a piece of the performance puzzle. For instance, a slow DNS lookup might point to issues with your DNS provider, while a high TTFB could mean your server needs optimization.

Why Use Navigation Timing Instead of Other Methods?

There are other ways to measure page speed — like wrapping code in Date.now() calls or using third-party tools — but those usually don’t give you the full picture. Navigation Timing is better because:

• It's standardized across browsers.
• It captures every step from navigation to full load.
• It’s passive — no need to instrument every request manually.
• It works even if JavaScript runs late or fails.

Also, since it's part of the Performance API, it plays well with newer tools like PerformanceObserver, allowing you to monitor performance changes over time more accurately.

A Few Things to Keep in Mind

While the Navigation Timing API is powerful, there are a few gotchas:

• Some older browsers may not support all fields.
• If you're measuring from a service worker or iframe, the data might be limited.
• Privacy features in browsers (like cross-origin restrictions) can affect what data is available.

One easy mistake is assuming all values will always be there. So when you’re reading from performance.timing, check that the values make sense — sometimes they can be zero or missing, especially on redirects or secure connections.

基本上就這些。

以上是導(dǎo)航正時(shí)API是什么？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！