《javascript执行效率优化及内存管理优化》由会员分享，可在线阅读，更多相关《javascript执行效率优化及内存管理优化（13页珍藏版）》请在金锄头文库上搜索。
1、JS执行效率及内存管理1 执行效率1.1 DOM1.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.appen
2、dChild(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.1.2 通过模板元素clone，替代createElement说明：通过一个模板dom对象cloneNode，效率比直接创建element高。性能提高不明显，约为10%左右。在低于100个元素create和ap
3、pend操作时，没有优势。优化前：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 =
4、 0; i 1000; i+) var el = pEl.cloneNode(false);el.innerHTML = i;frag.appendChild(el);document.body.appendChild(frag);1.1.3 使用一次innerHTML赋值代替构建dom元素说明：根据数据构建列表样式的时候，使用设置列表容器innerHTML的方式，比构建dom元素并append到页面中的方式，效率有数量级上的提高。优化前：var frag = document.createDocumentFragment();for (var i = 0; i 1000; i+) var e
5、l = 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.1.4 使用firstChild和nextSibling代替childNodes遍历dom元素说明：约能获得30%-50%的性能提高。逆向遍历时使用lastChild和previousSibli
6、ng。优化前：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;1.2 字符串1.2.1 使用Array做为StringBuffer，代替字符串拼接的操作说明：IE在对字符串拼接的时候，会创建临时的String对象；经测试，在IE下，当拼接的字符串越来越大时，运行效率会急剧下降。Fx和Opera都对字符串拼接操作进行了优化；
7、经测试，在Fx下，使用Array的join方式执行时间约为直接字符串拼接的1.4倍。优化前：var now = new Date();var str = ;for (var i = 0; i 10000; i+) str += ;alert(new Date() - now);优化后：var now = new Date();var strBuffer = ;for (var i = 0; i 10000; i+) strBuffer.push();var str = strBuffer.join();alert(new Date() - now);1.3 循环语句1.3.1 将循环控制量保存
8、到局部变量说明：对数组和列表对象的遍历时，提前将length保存到局部变量中，避免在循环的每一步重复取值。优化前：var list = document.getElementsByTagName(p);for (var i = 0; i list.length; i+) 优化后：var list = document.getElementsByTagName(p);for (var i = 0, l = list.length; i l; i+) 1.3.2 顺序无关的遍历时，用while替代for说明：该方法可以减少局部变量的使用。比起效率优化，更能直接看到的是字符数量的优化。该做法有程序员
9、强迫症的嫌疑（= =！）。优化前：var arr = 1,2,3,4,5,6,7;var sum = 0;for (var i = 0, l = arr.length; i 2）条件分支时，使用switch优于if说明：switch分支选择的效率高于if，在IE下尤为明显。4分支的测试，IE下switch的执行时间约为if的一半。1.4.3 使用三目运算符替代条件分支优化前：if (a b) num = a; else num = b;优化后：num = a b ? a : b;1.5 定时器1.5.1 需要不断执行的时候，优先考虑使用setInterval说明：setTimeout每一次都会
10、初始化一个定时器。setInterval只会在开始的时候初始化一个定时器优化前：var timeoutTimes = 0;function timeout () timeoutTimes+;if (timeoutTimes = 10) clearInterval(interv);var interv = setInterval(interval, 10);1.5.2 使用function而不是string说明：如果把字符串作为setTimeout和setInterval的参数，浏览器会先用这个字符串构建一个function。优化前：var num = 0;setTimeout(num+, 10
11、);优化后：var num = 0;function addNum () num+;setTimeout(addNum, 10);1.6 其他1.6.1 尽量不使用动态语法元素说明：eval、Function、execScript等语句会再次使用javascript解析引擎进行解析，需要消耗大量的执行时间。1.6.2 重复使用的调用结果，事先保存到局部变量说明：避免多次取值的调用开销。优化前：var h1 = element1.clientHeight + num1;var h2 = element1.clientHeight + num2;优化后：var eleHeight = elemen
12、t1.clientHeight;var h1 = eleHeight + num1;var h2 = eleHeight + num2;1.6.3 使用直接量说明：var a = new Array(param,param,.) - var a = var foo = new Object() - var foo = var reg = new RegExp() - var reg = /./1.6.4 避免使用with说明： with虽然可以缩短代码量，但是会在运行时构造一个新的scope。OperaDev上还有这样的解释，使用with语句会使得解释器无法在语法解析阶段对代码进行优化。对此说
13、法，无法验证。优化前：with (a.b.c.d) property1 = 1;property2 = 2;优化后：var obj = a.b.c.d;obj.property1 = 1;obj.property2 = 2;1.6.5 巧用|和&布尔运算符优化前：function eventHandler (e) if(!e) e = window.event;优化后：function eventHandler (e) e = e | window.event;优化前：if (myobj) doSomething(myobj);优化后：myobj & doSomething(myobj);1.6.6 类型转换说明：1).数字转换成字符串，应用 + 1，性能上：( +) String() .toString() new String()；
