这阵子在做一个仿Outlook发邮件时输入收文人的控件,要求在用户输入字符串后能显示出以该字符串开头的用户/组列表(总数接近4000)供选择。用户/组列表在HTML里存储在Table的TBody里,每一个TR代表一个列表项。当用户输入字符串的时候需要去遍历这些列表项,使用了如下的for语句:
js 代码
-
for
(i = 0; i <
this
.tbody.rows.length; i++)
测试后发现这个for循环大概需要2200毫秒左右,这个速度根本不能接受。刚开始还以为是for循环里面代码的问题,测试了一下,发现里面代码的效率不至于如此低。后来更改了一下for语句的写法:
js 代码
-
var
l =
this
.tbody.rows.length;
-
for
(i = 0; i < l; i++)
for循环的执行时间降低到了70多毫秒,可见问题是出在this
.tbody.rows.length的计算上。当HTML页面的DOM树很大时,其访问效率应该是比较差的,不过我没想到访问一个数组的长度都有如此大的效率问题。
一方面,这个问题的造成是由于我的疏忽引起的,使用循环时,循环条件语句里最好都使用计算好的本地变量(除非循环体内代码会影响到循环条件),这样可以将效率提高到最优。其实循环内的不变量使用本地变量预先缓存可以提高执行效率。这个原则不只对Javascript代码适用,应该大多数甚至全部编程语言都适用。(当然这样做也可能带来代码可阅读性的下降和代码长度的增加,这就要看具体情况决定如何做了,如果循环的次数相当大时,则最好是使用本地变量缓存不变量)
另一方面,这个问题也说明了Javascript访问HTML DOM树的效率是比较慢的,当DOM树比较小时还无所谓,当DOM树大到了一定程度时,其效率就难以接受了。上面的例子中,循环体内有一句访问TBody里每一行数据的代码:
js 代码
-
if
(
this
.tbody.rows[i].cells[0].innerText.toLowerCase().indexOf(str) == 0)
加上这段代码后,即使是使用上面for循环的第二种写法,也需要500多毫秒的执行时间,而将数据缓存在一个数组中,使用如下代码访问数据时,执行时间则是70多毫秒:
js 代码
-
if
(
this
.data[i][0].toLowerCase().indexOf(str) == 0)
分享到:
相关推荐
12.5 访问和操纵DOM节点 12.5.1 打开每一个盒子--遍历节点 12.5.2 弄清层级关系--父子与兄弟 12.5.3 如何搜索特定节点 12.5.4 克隆节点--一个使用cloneNode()复制表格的例子 12.5.5 移动节点...
有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳“过桥费”,访问DOM的次数越多,费用也就越高。因此,推荐的...
优化的几个思路:1.变量和数据的访问;...6.选择合适的传输类型(json轻量html节省dom效率),用state==3分段解析;7.不要执行字符串,用[],{}直接量,去掉重复的如判断操作;8.压缩合并缓存;9.利用一些性能工具
1.4.2 效率和用户优先 4 1.4.3 化繁为简 4 1.4.4 通用访问 5 1.5 无插件范式 5 1.6 html5的新功能 8 1.6.1 新的doctype和字符集 8 1.6.2 新元素和旧元素 9 1.6.3 语义化标记 9 1.6.4 使用selectors api简化...
1.4.2 效率和用户优先 4 1.4.3 化繁为简 4 1.4.4 通用访问 5 1.5 无插件范式 5 1.6 HTML5的新功能 8 1.6.1 新的DOCTYPE和字符集 8 1.6.2 新元素和旧元素 9 1.6.3 语义化标记 9 1.6.4 使用Selectors API简化选取操作 ...
1.4.2 效率和用户优先 4 1.4.3 化繁为简 5 1.4.4 通用访问 5 1.5 无插件范式 5 1.6 HTML5的新功能 8 1.6.1 新的DOCTYPE和字符集 8 1.6.2 新元素和旧元素 9 1.6.3 语义化标记 10 1.6.4 使用Selectors API...
1.4.2 效率和用户优先 4 1.4.3 化繁为简 4 1.4.4 通用访问 5 1.5 无插件范式 5 1.6 HTML5的新功能 8 1.6.1 新的DOCTYPE和字符集 8 1.6.2 新元素和旧元素 9 1.6.3 语义化标记 9 1.6.4 使用Selectors API简化选取操作 ...
1.4.2 效率和用户优先 4 1.4.3 化繁为简 4 1.4.4 通用访问 5 1.5 无插件范式 5 1.6 HTML5的新功能 8 1.6.1 新的DOCTYPE和字符集 8 1.6.2 新元素和旧元素 9 1.6.3 语义化标记 9 1.6.4 使用Selectors API简化选取操作 ...
在实际开发中,程序员经常需要使用一些小技巧来提高开发效率和解决一些常见的问题。下面是JavaScript常用代码小技巧的总结: 事件处理 * 事件源对象:`event.srcElement.tagName`、`event.srcElement.type` * 捕获...
1.4.2 效率和用户优先 4 1.4.3 化繁为简 4 1.4.4 通用访问 5 1.5 无插件范式 5 1.6 HTML5的新功能 8 1.6.1 新的DOCTYPE和字符集 8 1.6.2 新元素和旧元素 9 1.6.3 语义化标记 9 1.6.4 使用Selectors API简化选取操作 ...
1.4.2 效率和用户优先 4 1.4.3 化繁为简 4 1.4.4 通用访问 5 1.5 无插件范式 5 1.6 HTML5的新功能 8 1.6.1 新的DOCTYPE和字符集 8 1.6.2 新元素和旧元素 9 1.6.3 语义化标记 9 1.6.4 使用Selectors API简化...
1.4.2 效率和用户优先 4 1.4.3 化繁为简 4 1.4.4 通用访问 5 1.5 无插件范式 5 1.6 HTML5的新功能 8 1.6.1 新的DOCTYPE和字符集 8 1.6.2 新元素和旧元素 9 1.6.3 语义化标记 9 1.6.4 使用Selectors API简化...
1.4.2 效率和用户优先 4 1.4.3 化繁为简 4 1.4.4 通用访问 5 1.5 无插件范式 5 1.6 HTML5的新功能 8 1.6.1 新的DOCTYPE和字符集 8 1.6.2 新元素和旧元素 9 1.6.3 语义化标记 9 1.6.4 使用Selectors API简化...
1.4.2 效率和用户优先 4 1.4.3 化繁为简 4 1.4.4 通用访问 5 1.5 无插件范式 5 1.6 HTML5的新功能 8 1.6.1 新的DOCTYPE和字符集 8 1.6.2 新元素和旧元素 9 1.6.3 语义化标记 9 1.6.4 使用Selectors API简化...
1.4.2 效率和用户优先 4 1.4.3 化繁为简 4 1.4.4 通用访问 5 1.5 无插件范式 5 1.6 HTML5的新功能 8 1.6.1 新的DOCTYPE和字符集 8 1.6.2 新元素和旧元素 9 1.6.3 语义化标记 9 1.6.4 使用Selectors API简化...
jQuery:这是一个广泛使用的JavaScript库,简化了DOM操作、事件处理和动画等任务。它可以与其他JavaScript库一起使用,以提高开发效率。 PHP:这是一种服务器端脚本语言,用于处理表单提交、数据库操作和用户认证等...
jQuery是一个流行的JavaScript库,提供了许多有用的方法和函数,用于简化DOM操作、事件处理和动画效果等。 在OA系统中, jQuery框架扮演着重要角色,负责处理用户交互、动画效果和数据提交等任务。例如,在OA系统的...
核心技术课程 HTML基础加强、css(包含Div+CSS布局)、JavaScript、Dom(事件、window对象、document对象、对话框、定时器、粘贴板、动态Dom、跨浏览器兼容性解决方案、JS压缩和CDN、Internet Explorer Developer ...
微思象棋播放器是一个基于jQuery开发的简单迷你并且高效的在线中国象棋棋谱播放器,基于网络访问并且兼容IE 7.0 ,Firefox 3.0 ,Opera 9.6 ,Chrome 1.0 ,Safari 3.22 ,并对IE 6.0提供部分支持。微思象棋播放器完全...
API全称Application Programming Interface,它是访问和操作对象的规则。而DOM就是一种详细描述HTML/XML文档对象规则的API。它规定了HTML/XML文档对象的命名协定,程序模型,沟通规则等。在XML文档中,我们可以将每...