一些高性能的Javascript代码.doc

一些高性能的Javascript代码 一．Javascript代码执行效率 1. DOM 1.1 使用 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);? 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 和 nextSibling 代替 childNodes 遍历 dom 元素 说明：约能获得 30%-50% 的性能提高。逆向遍历时使用 lastChild 和 previousSibling 。 服用前： var?nodes?=?element.childNodes; ? for?(var?i?=?0,?l?=?nodes.length;?i??l;?i++)?{ ? var?node?=?nodes[i]; ? …… ? }? 服用后： var?node?=?element.firstChild; ? while?(node)?