1、JS 执行效率及内存管理1 执行效率1.1DOM1.1.1 使用 DocumentFragment 优化多次 append说明：添加多个 dom 元素时，先将元素 append 到 DocumentFragment 中，最后统一将 DocumentFragment 添加到页面。该做法可以减少页面渲染 dom 元素的次数。经 IE 和 Fx 下测试，在 append1000 个元素时，效率能提高 10%-30%，Fx 下提升较为明显。优化前：for (var i = 0; i + i + );document.body.innerHTML = html.join();1.1.4 使用 first
2、Child 和 nextSibling 代替 childNodes 遍历 dom 元素说明：约能获得 30%-50%的性能提高。逆向遍历时使用 lastChild 和previousSibling。优化前：var nodes = element.childNodes;for (var i = 0, l = nodes.length; i 2）条件分支时，使用 switch 优于 if说明：switch 分支选择的效率高于 if，在 IE 下尤为明显。 4 分支的测试，IE 下 switch的执行时间约为 if 的一半。1.4.3 使用三目运算符替代条件分支优化前：if (a b) num =
3、a; else num = b;优化后：num = a b ? a : b;1.5定时器1.5.1 需要不断执行的时候，优先考虑使用 setInterval说明：setTimeout 每一次都会初始化一个定时器。setInterval 只会在开始的时候初始化一个定时器优化前：var timeoutTimes = 0;function timeout () timeoutTimes+;if (timeoutTimes = 10) clearInterval(interv);var interv = setInterval(interval, 10);1.5.2 使用 function 而不是 s
4、tring说明：如果把字符串作为 setTimeout 和 setInterval 的参数，浏览器会先用这个字符串构建一个 function。优化前：var num = 0;setTimeout(num+, 10); 优化后：var num = 0;function addNum () num+;setTimeout(addNum, 10);1.6其他1.6.1 尽量不使用动态语法元素说明：eval、Function、execScript 等语句会再次使用 javascript 解析引擎进行解析，需要消耗大量的执行时间。1.6.2 重复使用的调用结果，事先保存到局部变量说明：避免多次取值的调用
5、开销。优化前：var h1 = element1.clientHeight + num1;var h2 = element1.clientHeight + num2;优化后：var eleHeight = element1.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 re
6、g = /./1.6.4 避免使用 with说明： with 虽然可以缩短代码量，但是会在运行时构造一个新的 scope。OperaDev 上还有这样的解释，使用 with 语句会使得解释器无法在语法解析阶段对代码进行优化。对此说法，无法验证。优化前：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) e = e | window.event;优化前：if (myob
7、j) doSomething(myobj);优化后：myobj 1.6.6 类型转换说明：1). 数字转换成字符串，应用“ + 1，性能上：(“ +) String() .toString() new String()；2). 浮点数转换成整型，不使用 parseInt()， parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，建议使用 Math.floor()或者 Math.round()3). 对于自定义的对象，推荐显式调用 toString()。内部操作在尝试所有可能性之后，会尝试对象的 toString()方法尝试能否转化为 String。1.6.7 多用 id
8、，少用 classJS 在 IE 浏览器下的效率并不好，尤其当页面很大且具有繁杂的逻辑操作时在写 html 时，如果使用 id，JS 会很快在一次遍历中找到需要的元素（无论有几个 id它都会在找到第一个 id 后返回） 。而通过 class 等去寻找，程序会在整个文档中一遍又一遍的去遍历，找到一个比较判断以后再去找第二个第三个非常浪费资源。2 内存管理2.1循环引用说明：如果循环引用中包含 DOM 对象或者 ActiveX 对象，那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前，即使是刷新页面，这部分内存不会被浏览器释放。简单的循环引用：var el = document.getEleme
9、ntById(MyElement);var func = function () el.func = func;func.element = el;但是通常不会出现这种情况。通常循环引用发生在为 dom 元素添加闭包作为 expendo的时候。如：function init() var el = document.getElementById(MyElement);el.onclick = function () init();init 在执行的时候，当前上下文我们叫做 context。这个时候，context 引用了 el，el 引用了 function，function 引用了 conte
10、xt。这时候形成了一个循环引用。下面 2 种方法可以解决循环引用：2.1.1 置空 dom 对象优化前：function init() var el = document.getElementById(MyElement);el.onclick = function () init();优化后：function init() var el = document.getElementById(MyElement);el.onclick = function () el = null;init();将 el 置空，context 中不包含对 dom 对象的引用，从而打断循环应用。如果我们需要将 d
11、om 对象返回，可以用如下方法：优化前：function init() var el = document.getElementById(MyElement);el.onclick = function () return el;init();优化后：function init() var el = document.getElementById(MyElement);el.onclick = function () tryreturn el; finally el = null;init();2.1.2 构造新的 context优化前：function init() var el = doc
12、ument.getElementById(MyElement);el.onclick = function () init();优化后：function elClickHandler() function init() var el = document.getElementById(MyElement);el.onclick = elClickHandler;init();把 function 抽到新的 context 中，这样，function 的 context 就不包含对 el 的引用，从而打断循环引用。2.2通过 javascript 创建的 dom 对象，必须 append 到页面
13、中说明：IE 下，脚本创建的 dom 对象，如果没有 append 到页面中，刷新页面，这部分内存是不会回收的！示例代码：function create () var gc = document.getElementById(GC);for (var i = 0; i 5000 ; i+)var el = document.createElement(div);el.innerHTML = “test“;/下面这句可以注释掉，看看浏览器在任务管理器中，点击按钮然后刷新后的内存变化gc.appendChild(el);2.3释放 dom 元素占用的内存说明：将 dom 元素的 innerHTML
14、 设置为空字符串，可以释放其子元素占用的内存。在 rich 应用中，用户也许会在一个页面上停留很长时间，可以使用该方法释放积累得越来越多的 dom 元素使用的内存。2.4释放 javascript 对象说明：在 rich 应用中，随着实例化对象数量的增加，内存消耗会越来越大。所以应当及时释放对对象的引用，让 GC 能够回收这些内存控件。对象：obj = null对象属性：delete obj.myproperty数组 item：使用数组的 splice 方法释放数组中不用的 item2.5避免 string 的隐式装箱说明：对 string 的方法调用，比如xxx.length，浏览器会进行一个隐式的装箱操作，将字符串先转换成一个 String 对象。推荐对声明有可能使用 String 实例方法的字符串时，采用如下写法：var myString = new String(Hello World);
