コメント：HTML5は、非常に「特別な」APIページの可視性を開始しました。特別な理由は、このAPIがブラウザタグ（タブ）がアクティブ化されているかどうかに注意を払う人がほとんどない機能に焦点を当てているためです
ここで、この「アクティベーション」とは、タグがユーザーによって閲覧されているかどうか、または現在のタグであるかどうかを説明する必要があります。
それで、このAPIの目的は何ですか？通常、ユーザーがアクティブ化しない場合、多くの従来のページが機能し続けます。たとえば、ユーザーがニュースポータルを閲覧しており、以前に開いたNBAゲームページが更新され続け、最新の結果が得られる場合、ビデオWebサイトは引き続き帯域幅とロードリソースを占有します。したがって、あまりにも多くの不必要な作業が必要な場合、多くのリソース廃棄物が引き起こされます。したがって、これは非常に便利です：
1. Webプログラムは、ユーザーがタイムリーな情報を取得できるように、時々ページ情報を自動的に更新します。ただし、ユーザーが他のページを閲覧している場合、更新を一時停止するように制御できます。
2.ビデオWebサイトがオンラインビデオを再生すると、ビデオがロードされるまでビデオを継続的にロードします。ただし、ユーザーが他のページを閲覧している場合、ビデオリソースのロードを一時停止して帯域幅を節約できます。
3.自動的に再生されるWebサイトのホームページに大きなスライドがあります。ユーザーが他のページを閲覧すると、再生が一時停止する可能性があります。
したがって、ページの可視性を通じて、次の利点の少なくとも1つ以上を達成できます。
1.サーバーリソースを保存します。 Ajaxの投票はしばしば無視されます。このリクエストを閉じると、リソースを節約できます。
2。メモリ消費を保存します。
3.帯域幅の消費を保存します。
したがって、ページの可視性を使用することは、ユーザーとサーバーの両方にとって有益です。
次に、このAPIを正式に紹介しましょう。ページの可視性は、ブラウザのドキュメントオブジェクトに隠された2つのプロパティとvivivilibilitystateを追加します。現在のタグがアクティブになっている場合、document.hiddenの値はfalseで、それ以外の場合は真です。 VisibilityStateには4つの可能な値があります。
1.ハイド：ブラウザが最小化され、タグを切り替えてコンピューター画面をロックすると、VisibilityState値が非表示になります
2.可視：ブラウザのトップレベルコンテキストのドキュメントが少なくとも1つの画面に表示されると、表示されます。ブラウザウィンドウが最小化されていないが、ブラウザが他のアプリケーションによってブロックされている場合、それも表示されます
3.Prerender：ドキュメントが画面の外側にロードされているか、見えない場合にプレレンダーを返します。これは非必須プロパティであり、ブラウザはそれを選択的にサポートできます。
4.非ロード：ドキュメントが近づいているときにアンロードされた返品（アンロード）、およびブラウザはこのプロパティを選択的にサポートすることもできます。
さらに、DivivileChangeイベントがドキュメントに追加されます。これは、ドキュメントの可視性が変更されたときにトリガーされます。
さて、プロパティを導入した後、使用例を掲載します（コードをコピーしてHTMLファイルに保存し、タグを切り替えて開いた後に効果をテストします）。
<！doctype html>
<html lang = "zh-cn">
<head>
<Meta charset = "utf-8" />
<Title>テストHTML5ページの可視性API </title>
</head>
<body> </p> <p> <div> </div>
<スクリプト>
function browserkernel（）{
var結果;
['webkit'、 'moz'、 'o'、 'ms']。
result = prefix;
}
}）;
返品結果;
}
function init（）{
prefix = browserkernel（）;
var showtip = document.getElementById（ 'showtip'）;
document.addeventlistener（prefix + 'visibilitychange'、function onvisibilitychange（e）{
var tip = null;
if（document [prefix + 'vidibilitystate'] == 'hidden'）tip = '<p>ページを残します</p>';
else if（document [prefix + 'vidibilitystate'] == 'visible'）tip = '<p>ページを入力</p>';
showtip.innerhtml = showtip.innerhtml + tip;
}）;
}
window.onload = init（）;
</script>
</body>
</html>
この例の目的は、タグの可視性が変更されたときにタグの可視性が変化し、プロンプトを生成するかどうかを監視することです。
現在、ブラウザはプライベート属性を介したページの可視性をサポートしていることは注目に値します。したがって、ページの可視性によって提供されるプロパティを検出または利用する場合、ブラウザのプライベートプレフィックスを追加する必要があります。たとえば、Chromeの上記のVisicibilityStateプロパティを検出する場合、document.visibilityStateの代わりにdocument.webkitvisabilitystateを検出する必要があります。したがって、デモは最初にブラウザタイプを検出し、次にページVisibility APIを使用します。