首页 > 代码库 > 一下子游篇学习之DOM编程
一下子游篇学习之DOM编程
每次想到“DOM”编程就会自然联想到“性能瓶颈”。我觉得有两部分原因:
1.DOM自己本身操作代价昂贵,因为浏览器通常要求DOM 实现和JavaScript 实现保持相互独立;
2.嘿嘿,本人自身的原因,没有本质全面认识她,没有学习和思考如何高效运用其。
显而见之,我目前可以着手改进第二条呀。。。。
忘了哪位大牛说过的一句话,“轻轻地触摸DOM,并尽量保持在ECMAScript 范围内。”
具体做法:
first:DOM 访问和修改
who? innerHTML or标准的DOM方法
使用DOM 方法更新页面内容的另一个途径是克隆已有DOM 元素
second:HTML集合(是用于存放DOM 节点引用的类数组对象)
document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName_r()
document.images
document.links
document.forms
document.forms[0].elements
HTML 集合是一个“虚拟存在,意味着当底层文档更新时,它们将自动更新”,HTML 集合实际上在查询文档,当你更新信息时,每次都要重复执行这种查询操作,正是低效率的来源。
--------方案
1.将length 缓存一下。
2.先将集合元素拷贝到数组(数组副本,评估是否有意),因为遍历数组比遍历集合快。
3.如果同一个DOM 属性或方法被访问一次以上,最好使用一个局部变量缓存此DOM 成员。
third:抓取DOM
1.用nextSibling 抓取DOM 是首选方法
2.DOM 属性诸如childNode,firstChild,和nextSibling 不区分元素节点和其他类型节点。
元素节点:children
3.函数querySelectorAll()接收一个CSS 选择器字符串参数并返回一个NodeList(由符合条件的节点构成的类数组对象)。此函数不返回
HTML 集合
列浏览器支持选择器API:Internet Explorer 8,Firefox 3.5,Safari 3.1,Chrome 1,Opera 10。
forth: 重绘和重排版
当浏览器下载完所有页面的html标记、javascript、css、图片之后,它解析文件并创建两个内部数据结构
a dom tree(表示页面结构)+ a render tree(表示dom节点如何显示)渲染树上的节点称为“框”或者“盒”。
获取布局信息的操作将导致刷新队列动作:
• offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop, scrollLeft, scrollWidth, scrollHeight
• clientTop, clientLeft, clientWidth, clientHeight
• getComputedStyle() (currentStyle in IE)(在IE 中此函数称为currentStyle)
该将多个DOM 和风格改变合并到一个批次中一次性执行:cssText 属性实现、修改CSS 的类名称
firth:批量修改DOM
1.从文档流中摘除该元素---》对其应用多重改变----》将元素带回文档中
1.1隐藏元素,进行修改,然后再显示它。
1.2使用一个文档片断在已存DOM 之外创建一个子树,然后将它拷贝到文档中。
1.3将原始元素拷贝到一个脱离文档的节点中,修改副本,然后覆盖原始元素。
sixth:事件托管
事件逐层冒泡总能被父元素捕获。采用事件托管技术之后,你只需要在一个包装元素上挂接一个句柄,用于处理子元素发生的所有事件。
一下子游篇学习之DOM编程