js性能优化小点

https://www.cnblogs.com/liyunhua/p/4529086.html#_label11 参考原文

1. 使用DocumentFragment优化多次append

• 给页面注入大量li怎么提高速率
  • 使用文档碎片 document.createDocumentFragment
  • 减少页面重绘重排

for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    document.body.appendChild(el);
}

var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);

2. 使用一次innerHTML赋值代替构建dom元素

• 对于大的DOM更改，使用innerHTML要比使用标准的DOM方法创建同样的DOM结构快得多。

var html = [];
for (var i = 0; i < 1000; i++) {
    html.push('<p>' + i + '</p>');
}
document.body.innerHTML = html.join('');

3. 删除dom节点之前,一定要删除注册在该节点上的事件

• 否则将会产生无法回收的内存
• 在removeChild和innerHTML=’’选择后者

4. 使用事件代理

• 解释：把一个或一组元素的事件委托到它的父层或更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数
• 优点：减少内存消耗，动态绑定事件（新增元素也会绑定上事件）