高性能javascript读书笔记(三.DOM 编程1)

第三章DOM Script DOM编程 读书笔记

访问和修改DOM元素

浏览器通常要求DOM实现和JavaScript保持相互独立。

<!-- 例如IE中,被称为JScript的JavaScript实现位于库文件jscript.dll中,而DOM实现位于另一个库mshtml.dll(内
部代号Trident).这种分离技术允许其他技术和语言,
如VBScript,受益于Trident所提供的DOM功能和渲染功能。
Safari使用Webkit的WebCore处理DOM和渲染,具有一个分离的JavaScriptCore引擎。
Google Chrome也使用Webkit的WebCore库渲染页面,但实现了自己的JavaScript引擎V8.
在Firefox中,JavaScript实现了TraceMonkey,与其Gwcko渲染引擎相分离。-->

访问DOM元素

function innerHTMLLoop(){
	for(var count=0; count<15000; count++){
		document.getElementById("h").innerHTML+="a";
	}
}

每次循环单元中,都对DOM元素访问两次,一次次读innerHTML属性,一次写。

使用局部变量存储更新后的内容,在循环结束时一次性写入:

function innerHTMLLoop(){
    var content=" ";
    for(var count=0; count<15000; count++){
        content+="a";
    }
     document.getElementById("h").innerHTML+="content";
}

在所有浏览器中,新版本运行速度都要快得多。

结论:访问DOM越多,代码的执行速度就越慢。
“轻轻的触摸DOM”,尽量保持在ECMAScript范围内。

比较innerHTML和纯DOM,例如createElement()

两种方式创建一个1000行的表

1.构造一个HTML字符串,然后更新DOM的innerHTML属性。

2.通过标准DOM方法document.createElement() document.createTextNode()。

innerHTML的好处在老式浏览器上显而易见,新浏览器就不那么明显。
使用DOM方法反之。

如果在一个性能苛刻的操作中更新大一块HTML页面,innerHTML在大多数浏览器中执行更快。
但对于大多数日常操作而言,其差异并不大,所以应当根据代码可读性,可维护性,团队习惯,代码风格来综合决定采

用哪种方法。

节点克隆

使用DOM方法更新页面内容的另一个途径是克隆已有DOM元素,而不是创建新的。

即 使用element.cloneNode() (element是一个已存在的节点)代替document.createElement();

在大多数浏览器上,克隆节点更有效率,但提高不太多。用克隆节点的方法重新生成前面例子中的表,
单元只创建执行复制操作,这样只是稍微快了一点。

HTML集合

是用于存放DOM节点引用的类数组对象。下列函数的返回值就是一个集合:

document.getElementByName()
document.getElementByClassName()
document.getElementByTagName()

document.images 页面中所有的<img>元素
document.links 所有的<a>元素
document.forms 所有表单
document.forms[0].elements 页面中的第一个表单的所有字段

这些方法和属性返回HTMLCollection对象 ,是一种类似数组的列表。他们不是数组(因为他们没有诸如push()和

slice()之类的方法,但是提供料一个length属性)

HTML集合实际上查询文档,当你更新信息,每次都要重复执行这种查询这种操作。例如读取集合中元素的数目(也就是

集合的length)。这正是低效率的来源。

遍历数组明显快于相同大小和内容的HTML集合,可以将集合拷贝到数组arr中。

每次迭代过程访问集合的length属性,导致集合器更细,在所有浏览器都会产生明显的性能损失。

优化:将集合的length属性那个缓存到一个变量中,然后循环判断条件中使用这个变量。

对于 任何类型的DOM 访问,如果同一个DOM属性或方法被访问一次以上,最好使用一个局部变量缓存此DOM成员。
当遍历一个集合时,第一个优化是将集合引用存储于局部变量,并在循环之外缓存length属性,然后,如果在循环体中
多次访问同一个集合元素,那么使用局部变量缓存它。

在使用DOM API时,通常要使用针对特定操作选择最有效的API.

例如 操作周围的元素,或者递归迭代所有的子节点,你可以使用childNode集合,或者使用nextsibling获得每个元素

的兄弟节点。

DOM属性诸如childNode, firstChild, nextSibling不区分元素节点和其他类型的节点,如注释节点和文本节点,
通常只有元素节点需要被访问,所以在循环中,似乎应当对节点返回类型进行检查,过滤出非元素节点,这些检查和过

滤都是不必要的DOM操作。

只返回元素节点       所有类型的节点
children          childNodes
childElementCount      childNodes.length
firstElementChild       firstChild
lastElementChild       lastChild
nextElementChild       nextSibling
previousElementSibling   previousSibling

以上支持 FF3.5 Safari 4 chrome2 opera9.62
IE6,7,8只支持children

遍历children比childNodes更快,集合项更少。

也可以用CSS选择器

var elements=document.querySelectorAll("#menu a");
返回的是NodeList 符合条件的类数组对象,不返回HTML集合

相同的方式,
var element=document.getElementById("menu").getElementsByTagName("a");
这element将是一个html集合,将它拷贝到一个数组中,如果想得到querySelectorAll()同样的返回值类型的话

querySelectorAll还可以用于联合查询
var errs=document.querySelectorAll("div.warning,div.notice");
可以一次性获得这两类节点

querySelector() 返回符合查询条件的第一个节点

时间: 2024-10-07 05:06:28

高性能javascript读书笔记(三.DOM 编程1)的相关文章

加载和运行---高性能JavaScript读书笔记(1)

众所周知大多数浏览器是使用单进程处理UI更新和JavaScript运行等多个任务的,而同一时间只能有一个任务被执行,如此说来,JavaScript运行了多长时间就意味着用户得等待浏览器响应需要花多久时间. 从认知上来说,解析器解析一个界面的时候都是从上至下依次解析的,这就是说界面上出现多少个<script>标签(不管是内联还是外部文件),页面下载和解析必须停止等待脚本下载完成并运行完成(注意这里包括运行),这个过程当中,页面解析和用户交互是被完全阻塞的. Javascript第一条定律:将脚本

数据访问---高性能JavaScript读书笔记(2)

对于任何一种编程语言来说,数据存储的位置关系到访问速度! 在JavaScript中的直接量包括字符串string.数字number.布尔值boolean.对象object.数组array.函数function.正则表达式regular expression.空值null.未定义数组undefined.而数组项则需要通过数组的数字索引来访问,对象通过字符串进行索引来访问其成员(这里顺便提一句因为数组项是通过数字进行索引.对象成员是通过字符串进行索引,所以这也就是为什么访问对象成员比访问数组项更慢的

高性能javascript读书笔记(三.DOM 编程2)

重绘和重排版 浏览器下载完所有的HTML标记,Javascript,CSS,图片之后,它解析文件并创建两个内部数据结构 DOM树 表示页面结构渲染树 表示DOM节点如何显示 渲染树中为每个需要显示的DOM树木=节点存放至少一个节点(隐藏DOM元素在选桉树中没有对应节点)渲染树上的节点称为"框"或者"盒",符合CSS模型的定义,将页面元素看作一个具有填充,边距,边框和位置的盒.一 旦DOM树和渲染树构造完毕,浏览器就可以显示(绘制)页面上的元素了. 当DOM改变影响到

DOM访问---高性能JavaScript读书笔记(3)

在JavaScript高级程序设计第一章当中就把JavaScript分成三大部分 所以事实上DOM和BOM是两在独立的部分,它们之间的通信是通过相互之间的功能接口来实现的,这样说来两个独立的部分以功能接口必定会带来性能损耗.这也就是为什么大家一致都说尽量少去访问和修改DOM元素(注意我这里说的是访问和修改,为什么包括访问,请继续往下看  哈哈). 下面用一张图来说明它们各自的作用. 1.在修改DOM元素的时候,我们应该尽量使用innerHTML而不是CreateElement再AppendChi

《世界是数字的》读书笔记 三

<世界是数字的>读书笔记 三 第六章 软件系统 操作系统是软件中的基础层,他负责管理计算机硬件,并为其他被称作应用程序的程序运行提供支持. 6.1操作系统 操作系统控制和分配计算机资源.首先,他负责管理CPU,调度和协调当前运行的程序.操作系统通常都需要管理数十个同时运行的进程或任务. 其次,操作系统管理RAM.他把程序加载到内存中以便执行指令. 最后,操作系统管理和协调外接设备的活动. 6.2操作系统怎么工作 计算机启动时首先要加载代码,加载的过程中还要检查硬件,比如哪些设备已经接入电脑,,

《大型网站技术架构》读书笔记三:大型网站核心架构要素

一.性能—响应时间决定用户 (1)浏览器端: ①浏览器缓存: ②使用页面压缩: PS:Gzip压缩效率非常高,通常可以达到70%的压缩率,也就是说,如果你的网页有30K,压缩之后就变成了9K左右.想要启用Gzip压缩,提高浏览速度,可以浏览这篇文章:http://www.chinaz.com/web/2012/1017/278682.shtml ③合理布局页面: CSS:把样式表置于顶部:避免使用CSS表达式(expression_r):使用外部JavaScript和CSS:削减JavaScri

Javascript读书笔记:函数定义和函数调用

定义函数 使用function关键字来定义函数,分为两种形式: 声明式函数定义: function add(m,n) { alert(m+n); } 这种方式等同于构造一个Function类的实例的方式: var add = new Function("m", "n", "alert(m+n);"); Function类构造方法的最后一个参数为函数体:"alert(m+n);",前面的都是函数的形参,参数必须是字符串形式的:&

构建之法阅读笔记三—结对编程

构建之法阅读笔记三——结对编程 何谓结对编程,结对编程就是程序员肩并肩,平等的,互补的进行开发工作,他们使用同一台电脑,编写同样的程序,一起分析,一起设计,一块交流想法. 然而我以前却并不是这样做的,我以前喜欢在没人打扰的环境下写代码,我觉得有人在我身边看着,会影响我的思路,还有我个人自尊心比较强,不太喜欢被人指指点点,所以每次都是,我写完代码之后,自己先找自己的bug,每当自己实在找不到之后,才会请教大神,但是有时候可能由于自己的能力不足,往往一个很简单的问题,我自己发现就会花费很久的时间,让

《你必须知道的.NET》读书笔记三:体验OO之美

一.依赖也是哲学 (1)本质诠释:"不要调用我们,我们会调用你" (2)依赖和耦合: ①无依赖,无耦合: ②单向依赖,耦合度不高: ③双向依赖,耦合度较高: (3)设计的目标:高内聚,低耦合. ①低耦合:实现最简单的依赖关系,尽可能地减少类与类.模块与模块.层次与层次.系统与系统之间的联系: ②高内聚:一方面代表了职责的统一管理,一方面又代表了关系的有效隔离: (4)控制反转(IoC):代码的控制器交由系统控制而不是在代码内部,消除组件或模块间的直接依赖: (5)依赖注入(DI): ①