Introduction
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:
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.
