|
组内同时总结的关于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 对象去获取 . 1. 使用类似 JSONML 的格式 (HTML in JSON) 描述 DOM 结构，以补充 HTML 转义字符串的表达形式，规范格式中可支持以下 HTML 语义： l 标签名 l 属性 ( 标识符 , 类名 , 事件名 , 内联样式等 ) 注：事件名上注册的侦听函数将自动通过 Event.observe 方式添加 l 嵌套标签
格式规范可简单描述为：
{ tag:string, // 元素的标记名，如果没有，默认为 div
children|cn: string|Array|json, // 子结点对应的 json 数组或字节点的 html 或单个 json
html:string, // 对应的 html ，如果有 cn 或 children 属性就忽略
style:function|string|json, // 元素的样式，可以是函数，字符串， json 对象
cls:string, // 元素的 class 属性的值
x:y // x 表示其他名字， y 表示变量值、非空字符串
onXXX: function // 以 on 为首的属性是事件侦听器 }
一个具体的例子为： var list = DomBuilder.append( 'my-div' , { tag : 'ul' , cls : 'my-list' , children : [ { tag : 'li' , id : 'item1' , html : 'List Item 1' , onclick : function () { alert( 'List Item1 Clicked' ) } }, { tag : 'li' , id : 'item2' , html : 'List Item 2' , customattr : 'customValue' }] });
2. 在实际修改 DOM 结构时，提供两种方式可供调用者选择，以便应需使用： l W3C 标准 DOM 操作 (appendChild, removeChild) 方式 l 使用 innerHTML,insertAdjacentHTML 等的实效模式
一个具体例子为： DomBuilder.useDom = true ; // 显示申明使用 W3C Dom 操作方式
3. 另外提供 DOM 节点的有效回收方法 var abandoned = DomBuilder.destroy(list); // 将 DOM 节点从文档中移除 |
|
|
