JavaScript を使用してブラウザ ウィンドウの非アクティブを検出するにはどうすればよいですか?

JavaScript によるブラウザ ウィンドウの非アクティブの検出

多くの Web サイトは、リソースを大量に消費する可能性のあるアクティビティを定期的に実行します。パフォーマンスとユーザー エクスペリエンスを最適化するには、ユーザーがページをアクティブに表示していないときにこれらのアクティビティを一時停止することが有益です。

ウィンドウの非アクティブ検出の問題

ユーザーがブラウザ ウィンドウまたはタブをアクティブに表示することは、Web 開発における基本的な課題です。 window.onfocus イベントと window.onblur イベントは基本的な機能を提供しますが、ユーザーがウィンドウを離れることなく他のタブやアプリケーションにフォーカスを移動できるため、信頼性が低い場合があります。

解決策: ページ表示 API

この問題に対する最新かつ信頼性の高い解決策は、Page Visibility API です。ほとんどの主要なブラウザでサポートされているこの API は、ページまたはタブがユーザーのビューから非表示になったことを検出する方法を提供します。

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "hidden") {
    // Pause periodic activities
  } else {
    // Resume periodic activities
  }
});

残念ながら、この API は IE 10 以前ではサポートされていません。これらの古いブラウザでは、onblur/onfocus および onpageshow/onpagehide イベントを含む信頼性の低いフォールバックを使用できます。

var hidden = "hidden";

// Compatibility checks
if (hidden in document) {
  // Supported: Page Visibility API
} else if ((hidden = "mozHidden") in document) {
  // Mozilla-specific
} else if ((hidden = "webkitHidden") in document) {
  // WebKit-based
} else if ((hidden = "msHidden") in document) {
  // Microsoft-specific
} else {
  // Legacy events
}

function onchange(evt) {
  if (evt.type in evtMap) {
    document.body.className = evtMap[evt.type];
  } else {
    document.body.className = this[hidden] ? "hidden" : "visible";
  }
}

Page Visibility API とそのフォールバックを利用することで、ウィンドウの非アクティブを効果的に検出し、パフォーマンスを最適化できます。それに応じてコードのパフォーマンスが向上します。

以上がJavaScript を使用してブラウザ ウィンドウの非アクティブを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。