浅谈 JavaScript 性能优化龙刚 （RainoXu）TaobaoUED www.rainoxu.com优化 JavaScript 性能，使它运行足够快 一个关键因素：运行的时间响应时间与用户的体验 0.1s 用户觉得很流畅 1.0s 用户的操作可能偶尔受到影响，并且用户已经能感觉 到有些不流畅 10s 对用户的影响比较严重，需要相应的进度提示。用户 也会有一些沮丧What To Do var result = add(5, 10);使用局部变量局部变量存在于活动对象中，解析器只需查找作用 域中的单个对象var a = 1; function test() /对变量a进行一系列操作 function test2() var a = 1;/对变量a进行一系列操作 另一个例子(function(win, S, undefined) . .var doc = windocument, loc = location,EMPTY = , . . )(window, KISSY);数据操作使用局部变量，它是最快的缓存频繁使用的对象、数组及相关 的属性值obj.name比obj.xxx.name访问更快，访问属 性的速度，与其在对象中的深度有关“ . ”操作的次数直接影响着访问对象属性的 耗时var objName = obj.name;KISSY.add(switchable, function(S, undefined) var DOM = S.DOM, Event = S.Event, . . );function process(data) if (data. count 0) for(var i = 0; i 0) for(var i = 0; i 标准浏览器 逐个拷贝到一个新数组中 = For IE大部分JS库都有提供将Array-Like的对象转 变成Array的方法（如KISSY提供的 makeArray()方法）；部分JS库在返回元素 集合时，已预处理成Array（例子：YUI的 DOM相关操作方法）遍历NodeList时，不做对当前NodeList相关结构 有影响的DOM操作，并且如之前所提到的，要缓 存一些频繁使用到的属性值，以避免杯具发生。var divs = document.getElementsByTagName(DIV);/假定页面中有div，所以divs.length是大于0的 for (var idx = 0; idx query ( selector, context )即便是用原生的JS，也应该指明: context.getElementsByTagName()DOM操作 增删、修改节点 使用DocumentFragment 使用cloneNode()复制一份目标节点来处理 如果是直接修改DOM，请先将其display:none;一个方法尽可能只做一件事拆分功能，让一个方法只做一件事，通过不断地 调用方法来实现复杂功能，但是，这些简单方法 要避免相互交叉调用。KISSY Poster中的一些方法拆分KISSY Poster中的一些方法拆分Be Lazy使脚本尽可能少 地运行，或者不 运行。短路表达式应用：如 a switch(target.className)/或者可以是nodeName . . . );流控制if(.) elseif(.) elseif(.) elseif(.) elseif(.) elseif(.) else 在if语句中，将经常会发生的条件，放在靠上 的位置if的条件为连续的区间时，可以使用二分法的 方式来拆分较多离散值的判断，可以使用switch来替代使用数组查询的方式要注意隐式的类型转换 var foo = 0; if(foo = false) . 小心递归！function recurse() recurse(); recurse(); /又是一个杯具 浏览器对调用栈的最大限度的定义各不一 样 递归的相互调用、自身调用可能触发浏览 器的调用栈的最大极限Reflow主要引起Reflow的因素 操作DOM树 与布局有关的样式改变 改变className 窗口大小调整 字休大小优化运行时间较长的脚本 原因： 大量DOM操作 过多的循环与递归 解决问题的最佳实践： 使用定时器最后，优化原则？考虑大多数情况，极端情况，有能力则兼 顾之，适当取舍2/8原则性能与可维护性权衡之一原则YAHOO的前端小组、John Resig、Nicholas C.Zakas等都已经总结了很多有用的性能优 化方面的经验，以他们的研究成果做为优 化时的参考。站在巨人的肩膀上，看得更远 不以善小而不为 思先于行，不必过早优化好的编程习惯最后，感谢玉伯、云谦、圆心、龙俊、释然对我此次的分享提供了许多帮助和建议。Question?