实战DHTML性能优化,改善自定义下拉框控件
先介绍一下本文演示用的代码,在我的项目中要实现一个自定义样式的下拉框,使用自定义的下拉箭头和自定义颜色的边框来取代系统默认的select。要实现这个功能就需要通过table模拟实现。那么我使用一个js方法来实现这个模拟过程,并封装为initSelect(id, width, height)方法。
并提供setSelect(id, index)进行某选项的选中,以及其他一些方法,全部功能至少同时兼容IE和FireFox。
因为当初写的比较随意,代码全部完成后,发现性能相当低下。大约出生日期这样的3个下拉框需要几百毫米的时间。
整优化过程我分3次进行
第一步
优化的技巧之一就是优先优化循环体,我把循环体内的不良做法优化,例如
for(var i=0;i<sel.options.length;i++)
--》
for(var i=0,j=a.length;i<j;i++)
sel.options[i].value;
--》
a[i].value;
本步产生代码initSelect2,祥见包内的s.js,下同
第二步
通过上面一个很小的改动,可以节省一些时间了,但是不会有什么大的改观,离我们优化要达到的目标相去甚远。那么现在静下来想一下,应该修改一下逻辑了
由于我们initSelect采用的方式是通过createElement创建TR,然后添加到table的rows集合中,由于创建和解析html都需要时间,所以效率较差,下面我们改良为数组方式
var arr = new Array(a.length);
for (var i=0,j=a.length;i<j; i++)
{
arr[i] = "<tr><td title='" + a[i].text + "' value='" + a[i].value + "'>" + a[i].text + "</td></tr>";
}
oCell.innerHTML = "<div id=\"O" + id + "\" class=\"select\" onselectstart=\"return false\" onmouseover=\"HoverOptions(event);\" onmouseout=\"OutOptions(event);\" onclick=\"ClickOptions(event, 'O" + id + "');\">\
<table cellsapcing=\"0\" cellspadding=\"3\" border=\"0\" width=100%>\
<tbody>" + arr.join() + "</tbody>\
</table>\
</div>";
这样DOM只需解析一次HTML,取得了很好的效果,速度提高了3倍,从300ms降到几十毫秒。
本步产生代码initSelect3
第三步
那么还可以进一步优化吗,答案是肯定的。我们前两步的重点是循环体,现在该着眼大局了,由于整个方法体内仍然多次使用了innerHTML,这是一个非常慢的操作,微软非常推荐使用innerText来尽可能代替innerHTML,但是显然不适合此处。而且必须要指出的是innerText不属于W3C标准,因而不被fireFox支持。
我前面的一些随便中的DHTML技巧里已经指出了insertAdjacentElement会比insertAdjacentHTML效果好,但是这次我们决定抛弃insertAdjacentElement而使用insertAdjacentHTML,因为这样以来我们可以把HTML解析降低为一次,所以我们把多个节点使用一个insertAdjacentHTML完成,而不是insertAdjacentElement配合多次innerHTML赋值。采取这些调整以后,我们的代码再次得到提速,虽然效果不很明显,但是仍有超过10%的改善。
本步产生代码initSelect4
参考时间:
initSelect 313
initSelect2 297
initSelect3 140
initSelect4 94
后记
其实这个方法在项目开发初期就有了,当时使用的是
for(var i=0;i<sel.options.length;i++)
{
td.innerHTML += "<tr><td>" + sel.options[i].text + "</td></tr>";
}
结果当时一个50项的select在我的3g cpu上竟然需要500ms以上的加载时间,这次调优,我重写了该方法,并分步进行了优化,希望能给DHTML开发者们带来一些启示。
如果诸位需要使用这个自定义下拉框,只需select.js和s.css,而优化演示请看demo1中的文件(代码不完整,只做演示)
全文完
分享到:
相关推荐
微软Dhtml网页开发控件帮助文档(翻译)微软Dhtml网页开发控件帮助文档(翻译)
DHTML 手册 DHTML 手册 DHTML 手册 DHTML 手册
完整压缩整合的DHTML完整代码,体积小,更简洁易用
TreeGrid是一个DHTML的表格控件,它完全使用JavaScript语言编写,用以实现HTML页面上的table, grid, tree view 或者 grid with tree里的数据地展示和编辑。EJS TreeGrid还提供了强大的甘特图功能,能够满足您把项目...
推荐发几个常用控件(新加DHTML控件)
DHTML手册 DHTML
dhtmltree,树型控件,方便实现jsp中的树型结构。
DHTML技术资料 DHTML的概念 DHTML 技术的核心—DOM CSS-P DHTML 编程
Dhtml手册(Dhtml手册.chm)
个人收集4种漂亮的js动态树控件
DHTML 完全手册 动态 HTML (DHTML) 对象模型参考 <br>DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 <br>HTML 元素 HTML 字符集 样式表(CSS)参考 <br...
一个基于dhtml+js实现的Web颜色拾取控件colorpicker,采用纯js实现,功能强大,界面美观。
DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 HTML 元素 HTML 字符集 样式表(CSS)参考 CSS 属性参考 CSS 长度单位参考 其他参考 命令标识符 缺省行为参考 htc 行为参考 可视化...
DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 HTML 元素 HTML 字符集 样式表(CSS)参考 CSS 属性参考 CSS 长度单位参考 其他参考 命令标识符 缺省行为参考 htc 行为参考 可视化...
DHTML电子书 DHTML电子书 DHTML电子书 DHTML电子书DHTML电子书 DHTML电子书
DHTML 手册 DHTML
DHTML 不是由万维网联盟(W3C)规定的标准。DHTML 是一个营销术语 - 被网景公司(Netscape)和微软公司用来描述 4.x 代浏览器应当支持的新技术。 DHTML 是一种用来创建动态站点的技术组合物。对大多数人来说,DHTML ...
DHTML中文版 chm