JavaScript执行效率优化和内存管理优化.doc

word文档整理分享 参考资料 JS执行效率及内存管理 执行效率 DOM 使用DocumentFragment优化多次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); 通过模板元素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); 使用一次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(p + i + /p); } document.body.innerHTML = html.join(); 使用firstChild和nextSibling代替childNodes遍历dom元素 说明：约能获得30%-50%的性能提高。逆向遍历时使用lastChild和previousSibling。 优化前： var nodes = element.childNodes; for (var i = 0, l = nodes.length; i l; i++) { var node = nodes; …… } 优化后： var node = element.firstChild; while (node) { …… node = node.nextSibling; } 字符串 使用Array做为StringBuffer，代替字符串拼接的操作 说明：IE在对字符串拼接的时候，会创建临时的String对象；经测试，在IE下，当拼接的字符串越来越大时，运行效率会急剧下降。Fx和Opera都对字符串拼接操作进行了优化；经测试，在Fx下，使用Array的join方式执