Monday, December 16, 2013

Measurement webpage performance





To measure webpage performance, we can use window.performance.timing object.
To calculate loading time, we can use loadEventEnd - navigationStart under use window.performance.timing.
Example code
<script type='text/javascript'>
    function loadingtime() {
        if (!!window.performance) {
            // navigation time is loadEventEnd - navigationStart
            var timingData = window.performance.timing;
            document.querySelector("#loadtime").innerHTML = (timingData.loadEventEnd - timingData.navigationStart);
             }
        else {
            document.querySelector("#message").innerHTML = "<p>This browser does not support the <code>performance</code> object</p>";
        }
    }

    function init() {
        setTimeout(loadingtime, 500);
    }
    window.onload = init;
    </script>

<div id="message">
<p><span class="label">Load Time: </span><span id="loadtime"></span>ms</p>
</div>

No comments:

Post a Comment