HTML5中的document.visibilityState-有解無憂

在 HTML5 中，檔案物件（即 document 物件）具有一個 visibilityState 屬性，該屬性表示當前檔案物件的可見性狀態，

visibilityState 可能的取值有以下三種：

- visible ：表示檔案當前處于激活狀態，即當前選項卡處于前臺或當前視窗處于螢屏最上層，
- hidden ：表示檔案當前處于非激活狀態，即當前選項卡處于后臺或當前視窗被最小化或被其他視窗遮蓋，
- prerender ：表示檔案處于預渲染狀態，即當前頁面正在被預先加載并渲染，但尚未成為當前活動頁面，

通過監視 visibilityState 屬性，可以在用戶切換選項卡或最小化視窗時暫停或恢復某些頁面活動（如影片或視頻播放）等操作，從而優化頁面性能和用戶體驗，

document.visibilityState 屬性是為了提高頁面性能和節省資源而引入的新功能，在過去，開發人員通常會在頁面上運行許多 JavaScript 影片或視頻播放等操作，這些操作會消耗大量的 CPU、GPU 或網路帶寬資源，從而影響頁面的性能和回應速度，

而 document.visibilityState 屬性則使我們能夠根據檔案的可見性狀態來控制這些操作，從而避免在頁面處于非激活狀態時浪費資源，例如，在用戶切換選項卡或最小化視窗時，網頁可以選擇暫停某些操作并在用戶再次切換回來時恢復它們，從而保持頁面的流暢性和回應速度，

以下是一些示例，說明如何使用 document.visibilityState 屬性來控制頁面活動：

1. 暫停視頻播放或影片效果

// 監聽檔案的可見性變化
// visibilitychange事件： 當頁面可見性發生變化時，瀏覽器會觸發visibilitychange事件，
document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    // 頁面變為激活狀態時恢復視頻播放或影片效果
    playVideo();
  } else {
    // 頁面變為非激活狀態時暫停視頻播放或影片效果
    pauseVideo();
  }
});

2. 限制頁面資源消耗

// 在頁面處于非激活狀態時暫停某些操作，以節省資源
function doSomething() {
  if (document.visibilityState === 'visible') {
    // 執行某些操作
  } else {
    // 頁面處于非激活狀態時不執行操作，以節省資源
  }
}

3. 保持頁面流暢性和回應速度

// 在用戶切換選項卡或最小化視窗時暫停某些操作，并在用戶再次切換回來時恢復它們，以保持頁面流暢性和回應速度
function doSomething() {
  if (document.visibilityState === 'visible') {
    // 執行某些操作
  } else {
    // 頁面處于非激活狀態時暫停操作
    pauseSomething();
    // 在用戶再次切換回來時恢復操作
    document.addEventListener('visibilitychange', function() {
      if (document.visibilityState === 'visible') {
        resumeSomething();
      }
    });
  }
}

這些示例說明了如何使用 document.visibilityState 屬性來控制頁面活動，從而優化頁面性能和用戶體驗，

除了 document.visibilityState 屬性外，HTML5 還提供了其他相關的 API，幫助我們更好地控制頁面的可見性和資源消耗，以下是一些示例：

1. document.hidden 屬性

document.hidden 屬性是 document.visibilityState === 'hidden' 的簡寫形式，用于判斷當前檔案是否處于非激活狀態，

if (document.hidden) {
  // 當前檔案處于非激活狀態
}

2. visibilitychange 事件

visibilitychange 事件在檔案的可見性狀態發生變化時觸發，可以通過監聽該事件來控制頁面活動，

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    // 頁面變為激活狀態時恢復某些操作
  } else {
    // 頁面變為非激活狀態時暫停某些操作
  }
});

3. Page Visibility API

Page Visibility API 是一組用于控制頁面可見性的 JavaScript API，包括 document.visibilityState 屬性和 visibilitychange 事件，以及另外兩個方法： document.hasFocus() 和 document.activeElement ，

- document.hasFocus() 方法回傳一個布林值，表示當前檔案是否處于激活狀態，
- document.activeElement 屬性回傳當前檔案中獲得焦點的元素，

通過使用這些 API，我們可以更精確地控制頁面活動，從而提高頁面性能和用戶體驗，

總的來說，可見性 API 為我們提供了一種更精確地控制頁面活動的方式，從而提高頁面性能和用戶體驗，可以根據頁面的可見性狀態來暫停或恢復某些操作，以避免浪費資源，同時保持頁面的流暢性和回應速度，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551767.html

標籤：JavaScript

上一篇：ArcGIS Desktop（ArcMap）創建、發布、呼叫GP服務全程序示例（等高線分析）

下一篇：返回列表