- 浏览: 51262 次
- 性别:
- 来自: 深圳
很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑。在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这并不是什么夸张的数字)。
1. 批量增加Dom
尽量使用修改innerHTML的方式而不是用appendChild的方式; 因为使用innerHTML开销更小,速度更快,同时也更加内存安全.
有一点需要注意的是,用innerHTML方式添加时,一定不要在循环中使用 innerHTML += 的方式添加,这样反而会使速度减慢; 而是应该中间用array缓存起来,循环结束后调用 xx.innerHTML = array.join(‘’);的方式,或者至少保存到string中再插到innerHTML中.
针对用户列表一块采用这种方式优化后,加载速度提升一倍.
2. 单个增加Dom
这里是指要将新节点加载到一个内容不断变化的节点的情形,对于内容稳定的节点来说,随便怎么加都没有问题. 但是对于有动态内容的节点来说,为其添加子节点尽量使用 dom append的方式.
这是因为,dom append不会影响到其他的节点;而如果修改innerHTML属性的话,该父节点的所有子节点都会从dom树中剥离,再根据新的innerHTML值来重绘子节点dom树;所有注册到原来子节点的事件也会失效.
综上,如果在一个有动态内容的节点上 出现了 innerHTML += 的代码,就该考虑是否有问题了.
3. 创建Dom节点
用 createElement方式创建一个dom节点,有一个很重要的细节: 在执行完createElement代码之后,应该马上append到dom树中; 否则,如果在将这个孤立节点加载到dom树之前所做的赋值它的属性和innerHTML的操作都会引发该dom片段内存无法回收的问题. 这个不起眼细节,一旦遇到大量dom增删操作,就会引发内存的灾难.
4. 删除Dom节点
删除dom节点之前,一定要删除注册在该节点上的事件,不管是用observe方式还是用attachEvent方式注册的事件,否则将会产生无法回收的内存.
另,在removeChild和innerHTML=’’二者之间,尽量选择后者. 因为在sIEve(内存泄露监测工具)中监测的结果是用removeChild无法有效地释放dom节点.
5. 创建事件监听
现有的js库都采用observe方式来创建事件监听,其实现上隔离了dom对象和事件处理函数之间的循环引用,所以应该尽量采用这种方式来创建事件监听.
6. 监听动态元素
Dom 事件默认是向上冒泡的,发生在子节点中的事件,可以由父节点来处理. Event的 target/srcElement 仍是产生事件的最深层子节点. 这样,对于内容动态增加并且子节点都需要相同的事件处理函数的情况,可以把事件注册上提到父节点上,这样就不需要为每个子节点注册事件监听了.
同时,这样做也避免了产生无法回收的内存.即使是用Prototype的observe方式注册事件并在删除节点前调用stopObserving,也会产生出少量无法回收的内存,所以应该尽量少的为dom节点注册事件监听.
所以,当代码中出现在循环里注册事件时,也是我们该考虑事件上提机制的时候了.
来源于
http://hi.baidu.com/lim_ao/blog/item/a1495e5d52b5ae52faf2c060.html
1. 批量增加Dom
尽量使用修改innerHTML的方式而不是用appendChild的方式; 因为使用innerHTML开销更小,速度更快,同时也更加内存安全.
有一点需要注意的是,用innerHTML方式添加时,一定不要在循环中使用 innerHTML += 的方式添加,这样反而会使速度减慢; 而是应该中间用array缓存起来,循环结束后调用 xx.innerHTML = array.join(‘’);的方式,或者至少保存到string中再插到innerHTML中.
针对用户列表一块采用这种方式优化后,加载速度提升一倍.
2. 单个增加Dom
这里是指要将新节点加载到一个内容不断变化的节点的情形,对于内容稳定的节点来说,随便怎么加都没有问题. 但是对于有动态内容的节点来说,为其添加子节点尽量使用 dom append的方式.
这是因为,dom append不会影响到其他的节点;而如果修改innerHTML属性的话,该父节点的所有子节点都会从dom树中剥离,再根据新的innerHTML值来重绘子节点dom树;所有注册到原来子节点的事件也会失效.
综上,如果在一个有动态内容的节点上 出现了 innerHTML += 的代码,就该考虑是否有问题了.
3. 创建Dom节点
用 createElement方式创建一个dom节点,有一个很重要的细节: 在执行完createElement代码之后,应该马上append到dom树中; 否则,如果在将这个孤立节点加载到dom树之前所做的赋值它的属性和innerHTML的操作都会引发该dom片段内存无法回收的问题. 这个不起眼细节,一旦遇到大量dom增删操作,就会引发内存的灾难.
4. 删除Dom节点
删除dom节点之前,一定要删除注册在该节点上的事件,不管是用observe方式还是用attachEvent方式注册的事件,否则将会产生无法回收的内存.
另,在removeChild和innerHTML=’’二者之间,尽量选择后者. 因为在sIEve(内存泄露监测工具)中监测的结果是用removeChild无法有效地释放dom节点.
5. 创建事件监听
现有的js库都采用observe方式来创建事件监听,其实现上隔离了dom对象和事件处理函数之间的循环引用,所以应该尽量采用这种方式来创建事件监听.
6. 监听动态元素
Dom 事件默认是向上冒泡的,发生在子节点中的事件,可以由父节点来处理. Event的 target/srcElement 仍是产生事件的最深层子节点. 这样,对于内容动态增加并且子节点都需要相同的事件处理函数的情况,可以把事件注册上提到父节点上,这样就不需要为每个子节点注册事件监听了.
同时,这样做也避免了产生无法回收的内存.即使是用Prototype的observe方式注册事件并在删除节点前调用stopObserving,也会产生出少量无法回收的内存,所以应该尽量少的为dom节点注册事件监听.
所以,当代码中出现在循环里注册事件时,也是我们该考虑事件上提机制的时候了.
来源于
http://hi.baidu.com/lim_ao/blog/item/a1495e5d52b5ae52faf2c060.html
发表评论
-
JS的replace方法
2011-08-05 10:34 1132from http://www.cnblogs.com/mxw ... -
要写出在各大主流浏览器上都兼容的JS代码,就要关注他们的区别,下是IE和FF综合考虑的通用DOM!
2011-08-04 14:36 890来源于 http://hi.baidu.com/g ... -
<input type="text" id="start" />输入true取布尔true
2011-07-28 14:22 823"true" and true is di ... -
Js获取当前日期时间+日期验证+判断闰年+日期的天数差+日期格式化+JS判断某年某月有多少天
2011-07-27 17:47 4708字符串转日期型+Js当前日期时间+日期验证+判断闰年+日期的天 ... -
form page jump
2011-07-07 10:49 819页面跳转 <input type="hidd ... -
jquery widget sample
2011-07-06 08:39 3403<!DOCTYPE html PUBLIC &quo ... -
jquery apply wait for update
2011-07-05 10:36 1619<!DOCTYPE html PUBLIC &quo ... -
deal with a great quantity domelements add event wait for update
2011-06-29 14:34 1112<!DOCTYPE html PUBLIC " ... -
JS中的attachEvent、addEventListener如何传递参数
2011-06-29 14:02 6239<!DOCTYPE html PUBLIC " ... -
window.onload 和 $(document).ready 区别 待续......
2011-06-27 09:50 2713jquery 学习之一(js中window ... -
js operate frame
2011-06-14 14:04 1160我的页面框架如下 <frameset rows=&quo ... -
js中frame的调用
2011-06-14 12:27 1012js中frame的调用 关键词 ... -
js 事件冒泡 和其它问题
2011-06-10 09:25 775js事件冒泡 <html> <head> ... -
js inner iframe get dom of parent
2011-06-02 15:00 698parent.$("#id");//jqu ... -
ajax
2011-05-27 14:18 607<!DOCTYPE html PUBLIC " ... -
add event to all the dom elements in one page except one dom
2011-05-18 10:20 837<!DOCTYPE html PUBLIC &quo ... -
count down 倒计时
2011-05-13 12:42 546<!DOCTYPE html PUBLIC " ... -
js IE与FireFox的兼容性问题 事件
2011-05-13 09:16 983# window.event * IE:有windo ... -
deal with href remove the same element
2011-05-11 09:38 766var url="http://zhidao.bai ... -
document.form.item 问题集合的(0)和[0]取法
2011-05-09 15:10 1888<!DOCTYPE html PUBLIC " ...
相关推荐
javascript_DOM,javascript_DOM,javascript_DOM,javascript_DOM
实现使用JavaScript DOM 操作实现网页局部刷新
js_HTML_Dom操作练习,比较基础的
Javascript_Dom操作案例 总结了一些javascript对DOM操作的案例,希望对大家有所帮助
JavaScript中Dom操作实例详解.docx
javascript_DOM操作.rar
JavascriptDOM基本操作 dom 精品操作
Javascript操作XML Dom学习资料
neat是一个追求极致简洁 ,高效, 优雅,只为移动端的 javascript dom操作库
原生js操作dom实现上下左右移动.docx
1 展示了一个动态操作表格的例子 2 有简单的CSS布局 3 主要供自己查阅参考
JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源...
JavaScript 的DOM操作
本篇主要是对JS操作iframe里的dom进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
下面小编就为大家分享一篇解决vue页面DOM操作不生效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
用js操作DOM来实现的分页!绝对的有用,只需改改就能变出很多的花样!
做了这么久web开发,凡是涉及用js操作dom元素位置、测量dom元素大小时就心虚,因为js整整提供了二十几个属性对dom元素的位置、大小进行操作。比如:clientTop、offsetTop、scrollTop、clientWidth、offsetWidth、...
js操作dom,让你能更快速掌握dom,能更准确的操作dom
原生JavaScript,对数据表格进行操作,使用DOM实现数据的动态操作,包括增加、删除、查询、修改。
NULL 博文链接:https://nofengzi.iteye.com/blog/1960173