JS提高优化性能完全秘籍

一．执行效率 1. DOM 1.1 使用Docu mentFragment 优化多次append 说明：添加多个dom 元素时，先将元素append 到DocumentFragment中，最后统一将DocumentFragment 添加到页面。 该做法可以减少页面渲染 dom 元素的次数。经 IE 和 Fx 下测试，在append1000 个元素时，效率能提高 10%-30%，Fx 下提升较为明显。 服用前： 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); 1.2 通过模板元素clone，替代createElement 说明：通过一个模板dom 对象cloneNode，效率比直接创建element高。 性能提高不明显，约为 10%左右。在低于 100 个元素create 和 append操作时，没有优势。 服用前： 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); 服用后： var frag = document.createDocumentFragment(); var pEl = document.getElementsByTagName('p')[0]; for (var i = 0; i < 1000; i++) { var el = pEl.cloneNode(false); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag); 1.3 使用一次innerHTML 赋值代替构建dom 元素 说明：根据数据构建列表样式的时候，使用设置列表容器innerHTML 的方式，比构建dom 元素并append 到页面中的方式，效率有数量级上的提高。 服用前： 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); 服用后： var html = []; for (var i = 0; i < 1000; i++) { html.push('

' + i + '

'); } document.body.innerHTML = html.join(''); 1.4 使用firstChild 和nex tSibling 代替childNodes 遍...