該API通過navigator.connection提供網(wǎng)絡(luò)信息，用于優(yōu)化用戶體驗；1. 使用type和effectiveType判斷網(wǎng)絡(luò)類型；2. 通過downlink和rtt獲取帶寬與延遲；3. 可監(jiān)聽網(wǎng)絡(luò)變化以動態(tài)調(diào)整資源加載；4. 需注意瀏覽器支持、HTTPS限制及隱私保護，應(yīng)作為增強功能而非必要依賴。

The Network Information API in HTML5 is a browser API that allows web applications to access information about the user’s network connection, such as the type of network (e.g., Wi-Fi, cellular, Ethernet) and, in some cases, the effective connection speed (like "4G", "3G", or "slow-2G").

This API helps developers optimize the user experience based on network conditions — for example, serving lower-resolution images on slower connections to save bandwidth and improve load times.

Key Property: navigator.connection

The API is accessed through the navigator.connection object (still experimental and prefixed in some browsers). It provides properties like:

• type – Indicates the type of connection (e.g., wifi, cellular, ethernet, none, unknown).
• effectiveType – Gives a more practical assessment of the network quality (e.g., slow-2g, 2g, 3g, 4g) based on factors like round-trip time and downlink speed.
• downlink – Estimated effective bandwidth in Mbps.
• rtt – Estimated round-trip time of the network in milliseconds.

Example Usage

if ('connection' in navigator) {
  const connection = navigator.connection;

  console.log('Network type:', connection.type);
  console.log('Effective connection type:', connection.effectiveType);
  console.log('Downlink speed (Mbps):', connection.downlink);
  console.log('Round-trip time (ms):', connection.rtt);

  // Listen for changes in network
  connection.addEventListener('change', () => {
    console.log('Network changed to:', connection.effectiveType);
  });
} else {
  console.log('Network Information API not supported.');
}

Use Cases

• Adaptive content loading: Load lightweight assets on slow connections.
• Offline-first apps: Adjust behavior when on a poor or no connection.
• Analytics: Track user network conditions for performance optimization.

Browser Support and Limitations

• Not supported in all browsers (especially older ones or some mobile browsers).
• May require secure contexts (HTTPS).
• The type property only works with certain connection types and may return unknown in some cases.
• Privacy considerations: Some browsers limit access to prevent fingerprinting.

Permissions and Privacy

Because network info can be used for tracking, some browsers prompt users or restrict access. The API may require user permission or only expose data after user interaction.

Basically, the Network Information API gives developers insight into the user's network to build smarter, more responsive web apps — but it's not universally available and should be used as an enhancement, not a requirement.

以上是HTML5中的網(wǎng)絡(luò)信息API是什么？的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！