Over a million developers have joined DZone.

Using Javascript to Measure Web Page Performance with IE9

· Performance Zone

Evolve your approach to Application Performance Monitoring by adopting five best practices that are outlined and explored in this e-book, brought to you in partnership with BMC.

One ability that currently available in IE9 is the new msPerformance javascript object that enables developers to measure real-world performance of websites. In this post I’ll explain what is msPerformance and how you can use it to measure web page performance.

The msPerformance Object

Wanting a web application that performs great is a very regular and crucial demand in these days. With IE9 beta developers have a new set of javascript profiling API integrated at the DOM’s core – msPerformance object. The msPerformance captures key timing information about the load of the root document and also network activity that occurs on the page. This data is available from the DOM after the page was loaded. Using these metrics the developer is able to measure where the browser is spending it’s time during the run of the web application. This of course enables performance tuning when the developer finds bottlenecks or other problems.

How to Use msPerformance?

The msPerformance which is located under the window DOM object exposes three properties:

Those objects hold a lot of properties and information about the performance of the web page that is currently running. The following code example shows how to fill a table with some web page performance measurements:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="msPerformance.aspx.cs"
    Inherits="WebApplication5.msPerformance" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>msPerformance Example</title>
    <script type="text/javascript">
     
            function InsertPerformanceData() {
                if (window.msPerformance != null) {
                    var w = window;
                    var navStart = w.msPerformance.timing.navigationStart + "ms";
                    var navStartTime = Date(w.msPerformance.timing.navigationStart);
     
                    var loadEnd = w.msPerformance.timing.loadEventEnd + "ms";
                    var loadEndTime = Date(w.msPerformance.timing.loadEventEnd);
  
                 var navigation = w.msPerformance.timingMeasures.navigation + "ms";
  
                 var runtime = (w.msPerformance.timing.loadEventEnd - w.msPerformance.timing.navigationStart) + "ms";
  
                 document.getElementById("ticksNavigationStart").innerText = navStart;
                 document.getElementById("timeNavigationStart").innerText = navStartTime;
  
                 document.getElementById("ticksLoadEnd").innerText = loadEnd;
                 document.getElementById("timeLoadEnd").innerText = loadEndTime;
  
                 document.getElementById("timeNavigation").innerText = navigation;
  
                 document.getElementById("timeRuntime").innerText = runtime;
             }
         }        
     
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <th>
                    Event
                </th>
                <th>
                    API
                </th>
                <th>
                    TICKS
                </th>
                <th>
                    TIME
                </th>
            </tr>
            <tr>
                <td>
                    Navigation Start
                </td>
                <td>
                    window.msPerformance.timing.navigationStart
                </td>
                <td id="ticksNavigationStart">
                </td>
                <td id="timeNavigationStart">
                </td>
            </tr>
            <tr>
                <td>
                    Load End
                </td>
                <td>
                    window.msPerformance.timing.loadEnd
                </td>
                <td id="ticksLoadEnd">
                </td>
                <td id="timeLoadEnd">
                </td>
            </tr>
            <tr>
                <td>
                    Run Time
                </td>
                <td>
                    window.msPerformance.timingMeasures.navigation
                </td>
                <td>
                </td>
                <td id="timeNavigation">
                </td>
            </tr>
            <tr>
                <td>
                    Run Time
                </td>
                <td>
                    timing.loadEnd - timing.navigationStart
                </td>
                <td>
                </td>
                <td id="timeRuntime">
                </td>
            </tr>
        </table>
        <input type="button" onclick="InsertPerformanceData();" value="Show Performance Data" />
    </div>
    </form>
</body>
</html>

In this simple page when the button is clicked I first check that the windows.msPerformance exists. Then I pull out some performance data and show it to the user. After pushing the button an example of the table that can be generated could be:
msPerformance Data 
Pay attention that the performance data is available only after the page was loaded!

Summary

IE9 includes a lot of features that can help developers in their daily activities. One of the these features is the new msPerformance javascript object which can help developers with their web pages performance tuning. Currently, this feature isn’t interoperable with other browsers so don’t try to use it outside IE9

Learn tips and best practices for optimizing your capacity management strategy with the Market Guide for Capacity Management, brought to you in partnership with BMC.

Topics:

Published at DZone with permission of Gil Fink, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}