`
silentlakeside
  • 浏览: 108764 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Javascript访问HTML DOM树里的效率问题

阅读更多

这阵子在做一个仿Outlook发邮件时输入收文人的控件,要求在用户输入字符串后能显示出以该字符串开头的用户/组列表(总数接近4000)供选择。用户/组列表在HTML里存储在Table的TBody里,每一个TR代表一个列表项。当用户输入字符串的时候需要去遍历这些列表项,使用了如下的for语句:

js 代码
 
  1. for  (i = 0; i <  this .tbody.rows.length; i++)  

测试后发现这个for循环大概需要2200毫秒左右,这个速度根本不能接受。刚开始还以为是for循环里面代码的问题,测试了一下,发现里面代码的效率不至于如此低。后来更改了一下for语句的写法:

js 代码
 
  1. var  l =  this .tbody.rows.length;  
  2. for  (i = 0; i < l; i++)  

for循环的执行时间降低到了70多毫秒,可见问题是出在this .tbody.rows.length的计算上。当HTML页面的DOM树很大时,其访问效率应该是比较差的,不过我没想到访问一个数组的长度都有如此大的效率问题。

    一方面,这个问题的造成是由于我的疏忽引起的,使用循环时,循环条件语句里最好都使用计算好的本地变量(除非循环体内代码会影响到循环条件),这样可以将效率提高到最优。其实循环内的不变量使用本地变量预先缓存可以提高执行效率。这个原则不只对Javascript代码适用,应该大多数甚至全部编程语言都适用。(当然这样做也可能带来代码可阅读性的下降和代码长度的增加,这就要看具体情况决定如何做了,如果循环的次数相当大时,则最好是使用本地变量缓存不变量)

    另一方面,这个问题也说明了Javascript访问HTML DOM树的效率是比较慢的,当DOM树比较小时还无所谓,当DOM树大到了一定程度时,其效率就难以接受了。上面的例子中,循环体内有一句访问TBody里每一行数据的代码:

js 代码
 
  1. if  ( this .tbody.rows[i].cells[0].innerText.toLowerCase().indexOf(str) == 0)  

加上这段代码后,即使是使用上面for循环的第二种写法,也需要500多毫秒的执行时间,而将数据缓存在一个数组中,使用如下代码访问数据时,执行时间则是70多毫秒:

js 代码
 
  1. if  ( this .data[i][0].toLowerCase().indexOf(str) == 0)  
分享到:
评论
1 楼 lintomny 2007-01-12  
呵呵,第一个问题没遇到过,因为习惯比较好,先求总数然后再遍历,就是你的第二种写法。
但是第二个问题却经常遇到,这回到你这儿受教育了。谢谢~!

相关推荐

    JavaScriptDOM编程艺术

    《JavaScript DOM编程艺术》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是HTML和XML文档的结构化表示,JavaScript通过DOM API能够对网页内容进行动态操作,实现丰富的交互效果。...

    JavaScript & DOM Enlightenment

    DOM Enlightenment可能涵盖了如何通过JavaScript访问和修改DOM节点,包括元素选择(如querySelector和querySelectorAll)、遍历DOM树、添加和删除元素、以及事件处理。此外,还可能涉及到性能优化技巧,如使用文档...

    DOM.rar_DOM_HTML dom_dom树解析

    **HTML DOM**允许我们通过JavaScript或者其他支持DOM的语言来访问和修改网页的结构、样式和内容。例如,可以通过`getElementById`方法获取特定ID的元素,或者通过`getElementsByTagName`找到所有特定类型的元素。...

    JavaScript DOM编程艺术 第2版

    DOM是网页的核心组成部分之一,它定义了如何通过JavaScript来访问和操作HTML文档中的元素。本书旨在帮助读者深入理解DOM,并掌握利用JavaScript进行高效、优雅的编程技巧。下面将根据标题和描述,详细阐述几个重要的...

    JavaScriptDOM编程艺术.pdf

    在JavaScript中,可以使用DOM API轻松创建新的节点,并将其添加到现有的DOM树中。例如,创建一个新的`&lt;div&gt;`元素并将其添加到页面上: ```javascript var newDiv = document.createElement("div"); newDiv.innerHTML...

    javascript dom 代码

    - **DOM API**:JavaScript提供了一套标准的DOM接口,用于访问和操作这些节点。 2. **访问DOM节点** - **getElementById**:通过ID获取元素,如`document.getElementById('myId')`。 - **getElementsByClassName...

    JavaScript基础和DOM API函数

    HTMLDOM(Document Object Model)是HTML文档的树状结构模型,提供了对文档的访问和操作方式。通过DOM,JavaScript可以动态地改变页面的结构、样式和内容,实现动态网页效果。DOM的核心概念包括节点(Node)、元素...

    前端开源库-htmldom

    它能够将HTML字符串转化为一个可操作的DOM对象树,使得开发者可以通过JavaScript访问和操纵HTML元素。这个过程类似于浏览器加载HTML页面时的行为,但发生在服务器端,无需用户等待,提高了响应速度。 二、DOM操作 ...

    javascript 操作xml_dom对象整理集合

    `NodeIterator`和`TreeWalker`接口提供了一种更灵活的方式遍历DOM树,可以定制遍历规则,例如只访问特定类型的节点。 9. **JavaScript技巧** - **闭包**:理解闭包有助于编写高效且无副作用的代码,它可以保持...

    JavaScript DOM编程艺术

    通过本书,读者将学会如何利用JavaScript的DOM API来访问和修改网页内容。 1. **DOM基本概念** - DOM树:理解网页结构如何转化为一棵可以遍历的树,每个节点对应HTML中的元素、属性或者文本。 - 节点类型:包括...

    JavaScript DOM

    在JavaScript中,DOM是网页内容的抽象表示,它将页面视为一个可编程的对象树。 首先,`jsdom`是一个JavaScript实现的DOM库,它在Node.js环境中模拟了浏览器的DOM,使得开发者可以在服务器端处理DOM操作,这对于测试...

    JavaScript+DOM编程艺术

    《JavaScript+DOM编程艺术》是一本深受欢迎的编程教程,主要涵盖了JavaScript语言与DOM(Document Object Model)操作的方方面面。这本书对于任何想要深入理解和实践JavaScript的开发者,无论是初学者还是经验丰富的...

    JS + HTML DOM

    在Web开发中,JavaScript是一种客户端脚本语言,它允许我们实现交互性和动态效果,而HTML DOM则是HTML和XML文档的编程接口,使我们能够通过代码访问和改变网页内容。 1. **JavaScript基础**:JavaScript语法基于...

    html,js,jquery,css,html dom参考手册

    HTML DOM参考手册解释了如何通过JavaScript访问和修改这个结构,例如,添加、删除或改变元素、属性和文本。 这些参考手册是开发者不可或缺的工具,它们提供了全面的信息,帮助解决在开发过程中遇到的问题,提高开发...

    javascript dom

    8. **DOM选择器API**:CSS选择器被引入到JavaScript中,如`document.querySelector()`和`document.querySelectorAll()`,它们允许我们根据CSS规则选取DOM元素,极大地提高了代码的可读性和效率。 9. **Shadow DOM**...

    Web前端开发手册(Javascript/DOM/CSS)

    《Web前端开发手册》是一本综合性的资源,涵盖了JavaScript、CSS和DOM操作的关键知识点,旨在帮助开发者快速查询和理解这些核心技术。以下是对这些主题的详细解释: **JavaScript**: JavaScript是一种广泛应用于...

    IEdom查看javascript工具

    总结来说,"IEdom查看javascript工具"是前端开发者在使用Internet Explorer时的得力助手,通过它,我们可以更高效地进行网页开发和调试工作,提高工作效率,同时加深对DOM和JavaScript的理解。在不断发展的Web技术...

    准确找到DOM树的元素

    在网页开发中,DOM(Document Object Model)是一个关键的概念,它是一种标准的、与语言无关的接口,用于表示HTML或XML文档的结构,并允许程序和脚本动态地访问和更新文档的内容、结构和样式。本篇文章将围绕"如何...

Global site tag (gtag.js) - Google Analytics