This is a mirror of official site: http://jasper-net.blogspot.com/

Using Javascript to Measure Web Page Performance with IE9

| Sunday, October 17, 2010
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:

navigation – a reference to MSPerformanceNavigation object, which holds navigation data.
timing – a reference to MSPerformanceTiming object, which holds timing data.
timingMeasures – a reference to MSPerformanceTimingMeasures object, which holds timing measures.

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;
            }

Read more: .NET Zone

Posted via email from .NET Info

0 comments: