Dojo 控件性能优化最佳实践

　2010-03-09 00:00:00　来源：WEB开发网　　　

核心提示： YSlow 会通过分析页面各种元素，请求响应时间以及 CSS 和 JavaScript 的位置、加载方式等等方面给出页面性能的分析结果，Dojo 控件性能优化最佳实践(8)，并且会罗列出这些分析的结果并给出相应的提高页面性能的解决办法，YSlow 在浏览器的状态栏中显示出了在页面加载时对其分析的

YSlow 会通过分析页面各种元素，请求响应时间以及 CSS 和 JavaScript 的位置、加载方式等等方面给出页面性能的分析结果，并且会罗列出这些分析的结果并给出相应的提高页面性能的解决办法。YSlow 在浏览器的状态栏中显示出了在页面加载时对其分析的结果，包括页面加载所有相关控件的总大小以及页面加载响应的总时间，右击 YSlow 图标可以配置 YSlow 的一些常规的选项。YSLow 帮您分析页面的响应速度并给出相应的解决方案。

在下面的例子中，我们来利用 Firebug 和 YSlow 提供的这些功能来分析一下 Dojo 控件的三种初始化方式在初始化的时候分别消耗的页面响应时间，以此来验证本文的论点。

Dojo 控件初始化性能测试

在这里准备一个简单的 Demo，页面所有的 input 框都使用 Dojo widget 实现，如下图所示：

图 6. 雇员信息界面
Dojo 控件性能优化最佳实践

本文的目的在于分析三种方式装载页面效率的差别，页面中的五个 Dojo widget 的效果不够明显，为了更加清晰的展现差别的效果，我们把页面中 Dojo widget 的数量扩大，使用一段脚本把 DIV 中包含的元素循环 100 次输出，通过这种方式把效果放大，我们可以更加清晰的分析每种 Dojo widget 初始化的方式。

我们在进入页面之前先清理一下浏览器的缓存，分别加载每一个页面，打开 Firebug 面板，可以得到以下的结果，让我们逐一进行分析：

清单 5. 使用声明方式初始化 Dojo 控件性能测试

　<script　djConfig="parseOnLoad:　true,　isDebug:　true,　locale:'zh-cn'"　　src="<%=Context%>/javascript/dojo/dojo.js"　></script>　　<style　type="text/css">　　@import　"<%=Context%>/javascript/dijit/themes/tundra/tundra.css";　　@import　"<%=Context%>/javascript/dojo/resources/dojo.css";　　</style>　　<script　type="text/javascript">　　dojo.require("dojo.parser");　　dojo.require("dijit.form.DateTextBox");　　dojo.require("dijit.form.TextBox");　　dojo.require("dijit.form.ValidationTextBox");　　</script>　　<body　class="tundra">　　<h1　class="testTitle">　雇员信息　</h1><br　/>　　<div>　　<label>　编号：</label>　　<input　type="text"　dojoType="dijit.form.TextBox"　id="eid"　value="51246"/><br/>　　<label>　姓名：</label>　　<input　type="text"　dojoType="dijit.form.TextBox"　id="ename"　value="ThinkVision"/>　　<br/>　　<label>　职务：</label>　　<input　type="text"　dojoType="dijit.form.TextBox"　id="duty"　value="工程师"　/><br　/>　　<label>　电子邮箱：</label>　　<input　type="text"　dojoType="dijit.form.ValidationTextBox"　id="email"　