JSFiddle - React, Tailwind, and code Playground

by uedatakuya

HTML

Chromeで見てね。<br>
<button id="mark">mark</button>
<button id="show">show</button>
<div>
    <h3>Marks:</h3>
    <ul id="marks"></ul>
    <h3>Result(requestStart〜):</h3>
    <div id="result"></div>
    <h3>Memory:</h3>
    <div id="memory"></div>
</div>

JavaScript

(function () {
    var count = 0;
    var marksElm = document.getElementById('marks');
    var resultElm = document.getElementById('result');
    var memoryElm = document.getElementById('memory');
    document.getElementById('mark').addEventListener('click', function () {
        count++;
        var markName = 'mark-' + count;
        window.performance.mark(markName);
        var m = window.performance.getEntriesByName(markName)[0];
        var li = document.createElement("li");
        li.innerText = JSON.stringify(m);
        marksElm.appendChild(li);
    }, false);
    document.getElementById('show').addEventListener('click', function () {
        window.performance.mark('markEnd');
        window.performance.measure('result', 'requestStart', 'markEnd');
        resultElm.innerText = JSON.stringify(window.performance.getEntriesByName('result')[0]);
        memoryElm.innerText = JSON.stringify(window.performance.memory);
        window.performance.clearMarks();
        window.performance.clearMeasures();
    }, false);
})();