javascript-性能优化.ppt

浅谈 JavaScript 性能优化 龙刚 （@RainoXu）TaobaoUED 优化 JavaScript 性能，使它运行足够快一个关键因素：运行的时间 响应时间与用户的体验 0.1s 用户觉得很流畅 1.0s 用户的操作可能偶尔受到影响，并且用户已经能感觉到有些不流畅 10s 对用户的影响比较严重，需要相应的进度提示。用户也会有一些沮丧 What To Do How To Do? 管理作用域 操作数据 流控制 Reflow DOM操作 长时间运行的脚本处理 管理作用域 function add(num1, num2){ return num1 + num2; } var result = add(5, 10); 使用局部变量 局部变量存在于活动对象中，解析器只需查找作用域中的单个对象 var a = 1; function test(){ //对变量a进行一系列操作 } function test2(){ var a = 1; //对变量a进行一系列操作 } 另一个例子 (function(win, S, undefined) { ... ... var doc = win[document], loc = location, EMPTY = , ... ... })(window, KISSY); 数据操作 使用局部变量，它是最快的缓存频繁使用的对象、数组及相关的属性值 比访问更快，访问属性的速度，与其在对象中的深度有关 “ . ”操作的次数直接影响着访问对象属性的耗时 var objName = ; 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 data.count; i++){ processData(data.item[i]); } } } function process(data){ var count = data.count; if (count 0){ for(var i = 0; i count ; i++){ processData(data.item[i]); } } } NodeList 不直接操作NodeList，将其转换成静态数组后再使用 方法： Atotype.slice.call() = 标准浏览器 逐个拷贝到一个新数组中 = 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 divs.length; idx++){ document.body.appendChild( //杯具悄然而置 document.createElement(DIV) ); (divs.length); } 杯具的原因？ 通过getElementsByTagName()获取得到的是一个Live NodeList的引用，任何对其相关的DOM操作都会立即反应在这个NodeList上面 通过不断地往document.body下插入div 节点，for循环的终止条件（ div.length也随之改变）失效，陷入死循环。 Live NodeList vs Static NodeList 理论上，静态的东西应该是最快的，但是实际情况是，Live NodeList更快。 Live NodeList vs Static NodeList 原因：目前市场上的浏览器，对Live NodeList做了缓存 Live NodeList vs Static NodeList 结论：优先使用Live NodeList，通过选择器获取以后，再进一步转换成数组来使用。这也是目前许多JS库在使用的方案。 DOM操作 指明操作DOM的context YUI: Array getElementsByCla