Click here to Skip to main content
13,257,276 members (53,470 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

8.6K views
2 bookmarked
Posted 6 Oct 2010

Using JavaScript to Measure Web Page Performance with Internet Explorer 9

, 6 Oct 2010
Rate this:
Please Sign up or sign in to vote.
In this post I’ll explain what is msPerformance and how you can use it to measure web page performance.

Introduction

Using Javascript to Measure Web Page Performance with IE9

One ability that is 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 its 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 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Gil Fink
Technical Lead sparXys
Israel Israel
Gil Fink is a web development expert and ASP.Net/IIS Microsoft MVP. He is the founder and owner of sparXys. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also co-author of several Microsoft Official Courses (MOCs) and training kits, co-author of "Pro Single Page Application Development" book (Apress) and the founder of Front-End.IL Meetup. You can read his publications at his website: http://www.gilfink.net

You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171114.1 | Last Updated 6 Oct 2010
Article Copyright 2010 by Gil Fink
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid