在这篇文章叙述的关于Javascript代码优化,其实并没有什么新意,关于这方面的优化,一直都是Nicholas C. Zakas的专利。我在这里将要说的是对当前众多关于Javascript代码优化的方式一个小总结,并尝试去归类各种不同的优化方式,方便于记忆众说纷纭的优化技巧。本人归类的结果如下图所示: Javascript代码优化无非主要围绕:DOM操作、循环、闭包、对象重复出现、对象的声明方式、作用域链、字符串操作、类的声明方式等等。循环、闭包、对象重复出现是从作用域链的角度去优化的;DOM操作主要围绕HTMLCollection、NodeList等来优化;对象的声明方式主要是对象(Object)、数组(Array)、字符串(String)、函数(Function)、正则(RegExp)等内置的对象使用字面量的方式来声明,这个比使用new来实例化相应的对象在性能上要强很多;字符串操作的优化方式主要是通过数组的push和join方法;类的声明方式优化方式主要是分清属性和方法的声明的方式,方法使用prototype的方式来声明;Javascript语言本身的流程操作语句的优化(if、switch、with、eval等等)。 因此,我将Javascript代码优化主要分为六类:DOM“真空”空间、缩短作用域链、字面量声明方式、字符串操作、类声明方式、流程操作语句。下面将逐个叙述:
//////////////// 2010-05-25 updates ////////////// [javascript] var getPointerPosition=function(evt){ evt = evt || window.event; return { x:evt.pageX || evt.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft), y:evt.pageY … 了解更多
/////////////// 2010-6-26 update ///////////////// 鉴于在添加DOM元素的style行内样式的时候有时候可能需要连续插入几个的需求,使用循环插入的方式可能会造成多次的reflow,故一次性的插入可能会好些,不过下面实现的需求比较单一,不能重复后续添加其他的style的属性值,除非重复设置。看具体需求而定吧: [javascript] var setStyle=function(elem,s){ var styles=[]; if(Object.prototype.toString.call(s) === "[object Object]"){ for(var k in s){ styles.push(k+":"+s[k]); } … 了解更多