使用 JavaScript 和 Internet Explorer 9 测量网页性能
在这篇文章中，我将解释什么是 msPerformance 以及如何使用它来测量网页性能。
引言
IE9 目前提供的一项功能是新的 msPerformance JavaScript 对象，它使开发者能够测量网站的实际性能。在这篇文章中，我将解释什么是 msPerformance 以及如何使用它来测量网页性能。
msPerformance 对象
如今，希望 Web 应用程序具有出色的性能是一项非常常见且至关重要的需求。借助 IE9 Beta，开发者在 DOM 的核心中集成了一组新的 JavaScript 分析 API – msPerformance 对象。 msPerformance 捕获有关根文档加载以及页面上发生的所有网络活动的关键时间信息。这些数据在页面加载后从 DOM 获取。使用这些指标，开发者可以测量浏览器在 Web 应用程序运行期间花费的时间。这当然有助于开发者在发现瓶颈或其他问题时进行性能调整。
如何使用 msPerformance？
位于 window DOM 对象下的 msPerformance 暴露了三个属性
navigation– 对 MSPerformanceNavigation 对象的引用，该对象包含导航数据timing– 对 MSPerformanceTiming 对象的引用，该对象包含时间数据timingMeasures– 对 MSPerformanceTimingMeasures 对象的引用，该对象包含时间度量
这些对象包含大量关于当前运行的网页性能的属性和信息。以下代码示例演示了如何使用一些网页性能测量值填充表格
<%@ 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>
在这个简单的页面中，当单击按钮时，我首先检查 windows.msPerformance 是否存在。然后，我提取一些性能数据并将其显示给用户。单击按钮后，可以生成的表格示例为
请注意，性能数据仅在页面加载后可用！
摘要
IE9 包含许多可以帮助开发者日常工作的特性。其中一项特性是新的 msPerformance JavaScript 对象，它可以帮助开发者调整网页性能。目前，此功能与其他浏览器不兼容，因此请勿尝试在 IE9 之外使用它。