12. • DOMをカプセル化し、DOMツリーのコンポーネ
ント化を実現する仕組み
var dialog = document.getElementById("dialog");
var root = new ShadowRoot(dialog);
root.appendChild(…);
Shadow DOM
57. • メディアデータのメタデータを取得するための
API
• タイトル/言語/日時/(撮影)場所/説明/ジャンル/コ
ピーライト/幅・高さ/動画の再生時間/フレームレー
ト…など
• ステータス:勧告候補
var res = new MediaResource();
var mr = res.createMediaResource("test.jpg", [], 1);
mr.getMediaProperty(["title"], function(props) {
var result = props.Title;
var label = result.titleLabel;
}, function(prop) { … });
API for MediaResource1.0
67. • DNSルックアップ、接続開始/、ページの読み込
み開始/完了など、様々なタイミングを取得でき
るAPI
• navigationStart,domainLookupStart, connectStart, f
etchStart, …
• ステータス:勧告候補
onload = function() {
var now = new Date().getTime();
var t = now – performance.timing.navigationStart;
alert("ページ読み込みまでにかかった時間:" + t);
};
Navigation Timing
68. • プログラム内で時間を測定するための、便利で正
確なAPI
• 基本はマーク&メジャー
• ステータス:ラストコール
performance.mark("mark1");
performance.measure("measure1", "mark1");
var times = performance.getMeasures("measure1");
times.forEach(function(t) {
console.log(t);
});
User Timing
69. • 画像、CSS、スクリプトなど、Webページを構成
するリソースの読み込み時間を取得するメソッド
var resourceList = performance
.getEntriesByType(performance.PERF_RESOURCE);
for (var i = 0; i < resourceList.length; i++) {
console.log(
resourceList[i].responseEnd –
resourceList[i].startTime);
}
Resource Timing
70. • User Timing, Resource Timingを一貫したイン
ターフェースで扱うようにするための仕様
Performance Timeline