javascript-性能优化

《javascript-性能优化》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、浅谈JavaScript性能优化龙刚（@RainoXu）TaobaoUEDwww.rainoxu.com优化JavaScript性能，使它运行足够快一个关键因素：运行的时间响应时间与用户的体验0.1s用户觉得很流畅1.0s用户的操作可能偶尔受到影响，并且用户已经能感觉到有些不流畅10s对用户的影响比较严重，需要相应的进度提示。用户也会有一些沮丧WhatToDo&&HowToDo?管理作用域操作数据流控制ReflowDOM操作长时间运行的脚本处理管理作用域functionadd(num1,num2){returnnum1+num2;}varresult=add(5,

2、10);使用局部变量局部变量存在于活动对象中，解析器只需查找作用域中的单个对象vara=1;functiontest(){//对变量a进行一系列操作}functiontest2(){vara=1;//对变量a进行一系列操作}另一个例子(function(win,S,undefined){......vardoc=win['document'],loc=location,EMPTY='',......})(window,'KISSY');数据操作使用局部变量，它是最快的缓存频繁使用的对象、数组及相关的属性值obj.name比obj.xxx.name访问更快，访问属性

3、的速度，与其在对象中的深度有关“.”操作的次数直接影响着访问对象属性的耗时varobjName=obj.name;KISSY.add('switchable',function(S,undefined){varDOM=S.DOM,Event=S.Event,......});functionprocess(data){if(data.count>0){for(vari=0;i

4、>0){for(vari=0;i标准浏览器逐个拷贝到一个新数组中=>ForIE大部分JS库都有提供将Array-Like的对象转变成Array的方法（如KISSY提供的makeArray()方法）；部分JS库在返回元素集合时，已预处理成Array（例子：YUI的DOM相关操作方法）遍历NodeList时，不做对当前NodeList相关结构有影响的DO

5、M操作，并且如之前所提到的，要缓存一些频繁使用到的属性值，以避免杯具发生。vardivs=document.getElementsByTagName('DIV');//假定页面中有div，所以divs.length是大于0的for(varidx=0;idx

6、eList的引用，任何对其相关的DOM操作都会立即反应在这个NodeList上面通过不断地往document.body下插入div节点，for循环的终止条件（div.length也随之改变）失效，陷入死循环。LiveNodeListvsStaticNodeList理论上，静态的东西应该是最快的，但是实际情况是，LiveNodeList更快。LiveNodeListvsStaticNodeList原因：目前市场上的浏览器，对LiveNodeList做了缓存LiveNodeListvsStaticNodeList结论：优先使用LiveNodeList，通过选择器获取以

7、后，再进一步转换成数组来使用。这也是目前许多JS库在使用的方案。DOM操作指明操作DOM的contextYUI:ArraygetElementsByClassName(className,tag,root,apply,o,overrides)KISSY:Arrayquery(selector,context)即便是用原生的JS，也应该指明:context.getElementsByTagName()DOM操作增删、修改节点使用DocumentFragment使用cloneNode()复制一份目标节点来处理如果是直接修改DOM，请先将其di

8、splay