Navigation Timing API

コード

var perf = performance.timing;
console.log("load elapsed sec: " + (perf.loadEventStart - perf.navigationStart) + "sec");

実行結果

High Resolution Timing API

コード

performance.now();

実行結果

Page Visiblity

            document.addEventListener('visibilitychange', function(event) {
                if (document.hidden) {
                    console.log("document is invisible");
                } else {
                    console.log("document is visible");
                }
            });

実行結果

別のタブにフォーカスを切りかえるとイベントが発生します

Resource Timing API

コード

            setTimeout(function () {
                var img = performance.getEntriesByType("resource")[0];
                var ttfb = parseInt(img.responseStart - img.startTime),
                        total = parseInt(img.responseEnd - img.startTime);
                $("#4_result").text("Time To First Byte:"+ ttfb + "\n" + "Total Time: " + total);

            }, 2000);

実行結果

Performance Timeline

コード

            performance.getEntries()[0];

実行結果

Battery Status

コード

            var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;

            console.log(JSON.stringify(battery, null, 4));

実行結果

    Chromeでは実行結果確認できず

Beacon

コード

            navigator.sendBeacon("http://twainy.github.io/tuning-blog/webperformanceapi.html", "beaconmessage");

    Beaconを送信しているだけなので出力なし