JavaScript针对Dom相关的优化心得
组内同时总结的关于javascript性能优化注意些节。记录一下。
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 节点注册事件监听 .
所以 , 当代码中出现在循环里注册事件时 , 也是我们该考虑事件上提机制的时候了 .
7. HTML 提纯
HTML 提纯体现的是一种各负其责的思想 . HTML 只用来显示 , 尽量不出现和显示无关的属性 . 比如 onclick 事件 , 比如自定义的对象属性 .
事件可以用前面的方法避免 , 对象属性指的是这样的一种情景 : 通常情况下 , 动态增加的内容都是有个对象和它对应 , 比如聊天室的用户列表 , 每个显示用户的 dom 节点都有一个 user 对象和它对应 , 这样在 html 中 , 应该仅保留一个 id 属性和 user 对象对应 , 而其他的信息 , 则应通过 user 对象去获取 .
JavaScript针对Dom相关的优化心得的更多相关文章
- JAVA中String对象的比较
JAVA中String对象的比较 1.首先介绍三个String对象比较的方法:(1)equals:比较两个String对象的值是否相等.例如: String str1 = "hello qu ...
- J a v a 的“多重继承”
接口只是比抽象类“更纯”的一种形式.它的用途并不止那些.由于接口根本没有具体的实施细节——也就是说,没有与存储空间与“接口”关联在一起——所以没有任何办法可以防止多个接口合并到一起.这一点是至关重要的 ...
- VMWare里安装64位Linux 的方法
1.CPU AMD系列的CPU略过 Intel系列的CPU芯片需要支持EM64T和VT技术才行,并且BIOS也要支持才可以. 为了确定你的Intel CPU是否支持VT,请查看: http://com ...
- n维向量空间W中有子空间U,V,如果dim(U)=r dim(V)=n-r U交V !={0},那么U,V的任意2组基向量的组合必定线性相关
如题取U交V中的向量p (p!=0), 那么p可以由 U中的某一组基线性组合成(系数不全是零),同时,-p也可以由V中的某一组基线性组合成(系数不全为零) 考察p+(-p)=0 可知道,U中的这组基跟 ...
- j解决sparkr中使用某些r的原生函数 发生错误Error: class(objId) == "jobj" is not TRUE的问题
Create table function in Spark in R not working João_Andre (3) 询问的问题 | 2016年12月10日 06:03BLUEMIXRSPA ...
- 关于hibernate中双向外键关联one-to-one的property-ref=的问题(转)
大家都知道hibernate中的one-to-one映射主要有两种策略,(1)一对一主键关联(单向和双向).(2)一对一外键映射(单项和双向).本文主要讲解一下,一对一外键映射中的双向问题,在此前先通 ...
- JavaScript -Array.form方法
Array.from方法可以把一个类数组或者课遍历对象转换为一个正真的数组 语法 Array.from(arrayLike[, mapFn[, thisArg]]) 参数 arrayLike 想要转换 ...
- 让javascript显原型!
相信以下的javascript让你读起来痛苦不已,告诉你一下简单的办法,就可以让它显出原型!将第一个单词,即eval换成document.write,然后再运行一下,它立即就原形毕露了! eval(f ...
- PHP清理跨站XSS xss_clean 函数 整理自codeigniter Security
PHP清理跨站XSS xss_clean 函数 整理自codeigniter Security 由Security Class 改编成函数xss_clean 单文件直接调用.BY吠品. //来自cod ...
随机推荐
- NET知识大纲
第一部分 C#编程基础 1.(30)变量.运算符(+.-.*./.++.--.括号.==.!=.>.<.>=.<=.&&.||).流程控制(if.while.f ...
- Raspberry Pi上手
2013-05-21 买的树莓派终于到手了,嘿嘿.我在官方代理ICKEY买的,是英国版,B型. 上手教程可以根据Getting Started with Raspberry Pi(网上有电子版免费下载 ...
- LeetCode(6) - ZigZag Conversion
这个题的要求是给你一个字符串,和一个行数,例如(s = "mysisteristhemostlovelygirl" , row = 4),每一行一个字符串,但是s却得按照zigza ...
- 《The Google File System》论文阅读笔记——GFS设计原理
一.设计预期 设计预期往往针对系统的应用场景,是系统在不同选择间做balance的重要依据,对于理解GFS在系统设计时为何做出现有的决策至关重要.所以我们应重点关注: 失效是常态 主要针对大文件 读操 ...
- Hadoop概念学习系列之分布式数据集的容错性(二十七)
一般来说,分布式数据集的容错性有两种方式: 1.数据检查点 2.记录数据的更新 我们面向的是大规模数据分析,数据检查点操作成本很高:需要通过数据中心的网络连接在机器之间复制庞大的数据集,而网络带宽往往 ...
- 网易及新浪IP查询接口
通过IP地址获取对应的地区信息通常有两种方法:1)自己写程序,解析IP对应的地区信息,需要数据库.2)根据第三方提供的API查询获取地区信息. 第一种方法,参见文本<通过纯真IP数据库获取IP地 ...
- HTTP中缓存相关
1.客户端如何区分缓存命中和未命中 两种情况下,返回的状态码都是200,客户端有一个方法可以判断,就是使用Date首部,将Date首部与当前时间进行比较,如果响应中时间日期值比较早,客户端可以认为这是 ...
- MFC如何添加系统消息处理函数?
http://zhidao.baidu.com/question/318026804.html 在MFC程序中,我们并不经常直接调用Windows API,而是从MFC类创建对象并调用属于这些对象的成 ...
- hdu 1176 免费馅饼(数塔类型)
http://acm.hdu.edu.cn/showproblem.php?pid=1176 免费馅饼 Time Limit: 2000/1000 MS (Java/Others) Memory ...
- JavaServer Faces 2.2 requires Dynamic Web Module 2.5 or newer
Description Resource Path Location Type JavaServer Faces 2.2 can not be installed : One or more cons ...