HTML5 で、コンピューター ハードウェアをより効率的に使用する: 新しい Web パフォーマンス API - パート 2
本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。
【元記事】Using PC Hardware more efficiently in HTML5 New Web Performance APIs Part 2 (2011/7/9 4:56 AM)
Web 開発者は、HTML5 を通じて最新のコンピューター ハードウェアを効果的に活用し、Web アプリケーションのパフォーマンスと Web プラットフォームの電力効率を向上させ、優れたカスタマー エクスペリエンスを提供するための API を必要としています。
IE10 Platform Preview 2 では、W3C Web Performance Working Group が定義する新しい API に対するサポートが導入されました。これらの API は基盤となるハードウェアを最大限に活用し、バッテリの電力をより効率的に使用するために必要な機能を提供します。
この記事では、新しい API の 1 つである Page Visibility を使用して、パフォーマンスの向上と電力消費の効率化を実現する方法について説明します。
Page Visibility: ユーザーが見ているかどうかに応じて処理を調整
ページが表示されているかどうかを知る方法があれば、開発者はページで実行する、特に電力消費とバックグラウンド タスクに関する処理について、より適切な判断を下せるようになります。Page Visibility のテスト ドライブ （英語） をご覧ください。ユーザーに対してページが表示されているかどうかを Web アプリケーションで検知できることがわかります。
Page Visibility API は現在、ベンダー プレフィックス付きの実装を通じて、IE10 と Chrome 13 で
使用可能です。
開発者は、表示状態に基づいて、ページで実行する処理を調整または削減することができます。たとえば、Web ベースの電子メール クライアントで、クライアントが表示されているときは新着メールの有無を数秒ごとにサーバーに確認し、非表示になっているときは数分間に 1 回のみ確認するような処理が可能です。他にも、ユーザーが表示していないときには一時停止するパズル アプリケーションや、ユーザーがページを表示している場合にのみ表示される広告などを作成できます。
Page Visibility 仕様では、開発者がドキュメントの現在の表示状態を特定し、表示が変更されたときに通知を受け取ることができます。この API は、以下の 2 つのプロパティと 1 つのイベントで構成されています。
· document.hidden: ページが表示されているかどうかを表すブール値。
· document.visibilityState: 詳細なページの表示状態 (PAGE_VISIBLE、PAGE_PREVIEW など) を返す属性。
· visibilitychange: ページの表示状態が変化したときに常に開始されるイベント。
IE10 では、これらの属性とイベントに、"ms" というベンダー プレフィックスを付けています。
このインターフェイスを Web アプリケーションに実装すれば、ユーザーに表示されているかどうかに基づいて、動作を変更できるようになります。たとえば、次の JavaScript コードは、Page Visibility 未使用の例として、1 秒ごとに新着メールをチェックする Web ベースの電子メール クライアントを示しています。
<!DOCTYPE html>
<html>
<head>
<title>Typical setInterval Pattern</title>
<script>
var timer = 0;
var PERIOD = 1000; //1 秒ごとにメールをチェックする
function onLoad() {
timer = setInterval(checkEmail, PERIOD);
}
function checkEmail() {
debugMessage("Checking email at " + new Date().toTimeString());
}
function debugMessage(s) {
var p = document.createElement("p");
p.appendChild(document.createTextNode(s));
document.body.appendChild(p);
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
同じページで Page Visibility を使用すると、ページが表示されていないときには電子メールをチェックする頻度を低くすることができます。
<!DOCTYPE html>
<html>
<head>
<title>Visibility API Example</title>
<script>
var timer = 0;
var PERIOD_VISIBLE = 1000; // 1 second
var PERIOD_NOT_VISIBLE = 10000; // 10 seconds
var vendorHidden, vendorVisibilitychange;
function detectHiddenFeature() {
// ドラフト版の標準実装
if (typeof document.hidden != "undefined") {
vendorHidden = "hidden";
vendorVisibilitychange = "visibilitychange";
return true;
}
// IE10 のプレフィックス付き実装
if (typeof document.msHidden != "undefined") {
vendorHidden = "msHidden";
vendorVisibilitychange = "msvisibilitychange";
return true;
}
// Chrome 13 のプレフィックス付き実装
if (typeof document.webkitHidden != "undefined") {
vendorHidden = "webkitHidden";
vendorVisibilitychange = "webkitvisibilitychange";
return true;
}
// 機能がサポートされていない場合
return false;
}
function onLoad() {
// document.hidden 機能がサポートされている場合は、表示状態に基づいて間隔を変更します。
// それ以外の場合は、setInterval で固定の間隔を指定します。
if (detectHiddenFeature()) {
timer = setInterval(checkEmail, document[vendorHidden] ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
document.addEventListener(vendorVisibilitychange, visibilityChanged);
}
else {
timer = setInterval(checkEmail, PERIOD_VISIBLE);
}
}
function checkEmail() {
debugMessage("Checking email at " + new Date().toTimeString());
}
function visibilityChanged() {
clearTimeout(timer);
timer = setInterval(checkEmail, document[vendorHidden] ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
debugMessage("Going " + (document[vendorHidden] ? "not " : "") + "visible at " + new Date().toTimeString());
}
function debugMessage(s) {
var p = document.createElement("p");
p.appendChild(document.createTextNode(s));
document.body.appendChild(p);
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
Page Visibility API によって、Web 開発者は電力効率の高い Web アプリケーションを作成できるようになります。Internet Explorer 10 Platform Preview 2 でサポートされている、W3C Web Performance Working Group 策定の他の新しい API については、requestAnimationFrame API に関する記事 (リンク) を参照してください。
—Jatinder Mann、Internet Explorer プログラム マネージャー