Dojo 控件性能优化最佳实践

value=think@cn.ibm.compromptMessage="请输入 Email 地址" invalidMessage="

请输入正确格式的　Email"　required="true"　trim="true"　
　regExp="^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)　
　(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$"/><br　/>　
　<label>　入职时间：</label>　
　<input　type="text"　dojoType="dijit.form.DateTextBox"　id="onboard"　
　value="2009-4-20"　/><br　/>　
　</div>　
　</body>　

图 7. 使用声明方式初始化的效果及分析：

我们看到整个页面加载文件的大小是 448K，完成时间是 1.713S，也就是红色的 TimeLine 所在的位置，但是页面的反应在这个时间点上并没有初始化成功，而后面的三张图片排队的时间却用去了将近 7S 的时间。这是为什么呢？在页面加载的过程中，我们会看到很有意思的现象，开始的初始化的时候页面中只是普通的 input 框，在一段时间以后才变成 Dojo widget，这是因为使用声明方式初始化，dojo.parse 方法会遍历整个页面节点，找到具有 dojoType 属性的元素，再逐个将这些元素转换成为相应的 Dojo widget，并且为他们渲染 CSS 效果，在渲染的过程中才开始将 blank.gif，validationInputBg.png，waring.png 装载到页面中，由此可见这三张图片排队的时间主要是集中在 dojo.parse 遍历的过程里面，页面中 widget 数量越大，dojo.parse 方法执行的时间越长，从而导致页面装载时间变长，效率变慢。