《高性能JavaScript》- 第三章DOM编程 - 学习笔记

最新推荐文章于 2024-05-21 21:29:52 发布

weixin_30832143

最新推荐文章于 2024-05-21 21:29:52 发布

阅读量72

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chunchunlike/archive/2011/07/30/2122185.html

本文深入探讨了DOM文档对象模型的基本概念与应用技巧，包括DOM与JavaScript的关系、DOM的实现方式及其与不同语言的交互。此外，还介绍了如何通过DOM进行高效的操作与优化，如减少重绘与重排，使用文档片段等。

第三章

DOM 文档对象模型与语言无关。用于操作html xml。

浏览器中主要和html打交道。

DOM是个和语言无关的API，在浏览器中这个API 由JavaScript实现。

客户端编程很多时候就是和这个文档打交道。

---

浏览器中DOM JS 会分别实现。

比如 IE： js--JScript--jscript.dll DOM另外一个库-mshtml.dll（Trident）

这中分离允许其他语言比如VBScript共享DOM及其Trident提供的渲染函数。

Chrome的DOM用的是Webkit中的WebCore，js是V8引擎。等等其他浏览器都是二者分离的。

---

二者分离好处可能是复用接口

坏处性能问题。DOM JS两个岛屿上，js访问DOM每次都要过桥，次数多了性能有问题。解决办法：尽量少过桥，尽量在js上解决问题。

例子：多次改innerHTML ，可以改一个字符串，最后付给innerHTML。

---

innerHTML ；document.createElement，（appendChild）对比。前者不是web标准，但是好像普遍支持。速度上根据浏览器不同而不同。结论：性能差不多，据习惯用。。。。。。

ps：var h=[];h.push(); 最后h.join('')很好用！

function JoinDemo(){
   var a, b;
   a = new Array(0,1,2,3,4);
   b = a.("-");
   return(b);
}

--

clonenode 比创建节点快一点，比如table多行插入时。

ps ：

在IE下，cloneNode能复制节点的所有属性（property），所有特性（attribute），所有自定义属性（expando），与所有事件（事件），

而标准浏览器则只能复制前面两个。但很不幸，有时标准浏览器也分不清哪个是哪个，一旦把它当成自定义属性就复舞曲不了。

http://www.cnblogs.com/rubylouvre/archive/2010/05/16/1736711.html

这个cloneNode ie下算完美吧但是标准浏览器下有缺陷比如checked

ps2 参数 true false 为是否子节点拷贝所有子节点包括空格文本

---

HTML集合： 1 实时状态实时存在。文档底层更新是会自动更新。HTML集合与文档保持连接，只要获得一个属性，也会实时在查询，低效的。

2 不是数组，没有push slice方法。但有length属性，可以索引方式访问。

没有终结的例子

var arr = ByTagName("div")

for(;i < arr.length;){//length 属性会同步增长循环永远不会终结。/解决办法深层拷贝html集合为数组。

body在加入div节点；

}

--即使for循环里面没有插入div 循环有终结。但是arr.length属性每次都会实时的去查询一遍效率有问题。解决 var len = arr.length；i<len；

深拷贝数组会拷贝便利一遍，这个也是废效率的。

---

childNodes - web标准，但是在ie ff下不同。

testdiv.childNodes

ff 下5个节点

ie下4个节点，ie不算空的标记之间间距。

想取节点的话看nodeType属性 1元素 2属性 3文本节点元属本

children ，非标准但在所有浏览器中都一致只取元素节点。

标准 childNodes firstChild lastChild nextSilbling previousSibling

---

querySelectAll querySelector 新浏览器支持.但是会有错误的实现,比如在节点元素下搜索。

---

下载完页面组件（html js css 图片） -会解析生成两个东西： DOM树，渲染树。

DOM树中的每个节点至少对应一个渲染树。DOM中一个节点的一些属性变化（width height），会导致其他一部分节点变化。

浏览器会使渲染树中收到影响的部分失效，重洗构造渲染树叫做--重排 reflow

浏览器重新绘制受影响的部分叫做重绘 repaint

必不是所有属性都会导致重排，比如背景颜色

重绘重排代价很昂贵尽量少用。

---

1 修改样式过程中尽量少用offsetTop scrollTop clientTop getComputedStyle() ie下currentStyle ，这些属性都会执行待渲染队列以便得到正确的值。

---

el.style.borderLeft =

el.style.borderRight =

el.style.padding =

每一次都改变结构到导致重排。旧浏览器三次重排。新浏览器1次，但改变过程中有请求获得属性，会多次重排。

可以用el.style.cssText ="border-left:2px;padding-2px;"

或者el.style.cssText +="border-left:2px;padding-2px;"

或者修改className，className轻微性能消耗，因为要检查级联样式表。

---

修改dom结构时减少重绘重排次数。

1 是元素脱离文档 2 变化结构 3 元素带回文档

脱离文档三个方法： 1元素隐藏 2文档片段 3 拷贝节点节点没有关联到DOM，修改节点再替换原始节点。

1 比如ul茶li 里里面有a连接

可以先li创建，li里面添加a，弄完之后 ul插入li。

2 display = "none" 掉

3 var tempFragment = document.createDocumentFragment();

文档碎片一个便利的语法条件：附加一个片段到节点中时，其实附加的是文档碎片的子节点。

4 cloneNode 时候在replaceNode

推荐用文档碎片 createDocumentFragment

---

缓存布局临时变量的想法。

---

记住：

οnclick=function(e){

e=e||window.event;

var target = e.target||e.srcElement;

}

if(typeof e.preventDefault === 'function'){

e.preventDefault();

e.stopPropagation();

}else{

e.returnValue = false;

e.cancelBubble = true;

}

转载于:https://www.cnblogs.com/chunchunlike/archive/2011/07/30/2122185.html