注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

{'coding': 'life'}

          I want to be a geek

 
 
 

日志

 
 
 
 

js优化  

2013-12-01 14:52:55|  分类: 前端 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
第一次做js优化,实在是一点头绪都没有。不知道怎么开始,在网上查了很多,看着似懂非懂。但首先要做的还是根据网上说的js优化的五大原则来跟自己的代码做对比尝试!
           下面是对JavaScript代码优化的原则:
    (1)为IE6(未打补丁的JScript 5.6或更早版本)做优化!
     与其他语言不同,JS的效率很大程度是取决于JS engine的效率。除了引擎实现的优劣外,引擎自己也会为一些特殊的代码模式采取一些优化的策略。例如FF、Opera和Safari的JS引擎,都对 字符串的拼接运算(+)做了特别优化。所以对于不同的引擎,所作的优化极有可能是背道而驰的。而如果做跨浏览器的web编程, 则最大的问题是在于IE6(JScript 5.6)!因为在不打hotfix的情况下,JScript引擎的垃圾回收的bug,会导致其在真实应用中的performance跟其他浏览器根本不在 一个数量级上。因此在这种场合做优化,实际上就是为JScript做优化!

    (2)以大规模循环体为最主要优化对象。
      如果你的程序已经优化到在IE6下可以接受的性能,那基本上在其他浏览器上性能就完全没有问题。因此,注意下面讲的许多问题在其他引擎上可能完全不同,例 如在循环中进行字符串拼接,通常认为需要用Array.join的方式,但是由于SpiderMonkey等引擎对字符串的“+”运算做了优化,结果使用 Array.join的效率反而不如直接用“+”!但是如果考虑IE6,则其他浏览器上的这种效率的差别根本不值一提。JS优化与其他语言的优化也仍然有 相同之处。优化的关键,仍然是要把精力放在最关键的地方,也就是瓶颈上。一般来说,瓶颈总是出现在大规模循环的地方。这倒不是说循环本身有性能问题,而是 循环会迅速放大可能存在的性能问题。

(注:以下的优化原则,只在大规模循环中才有意义,在循环体之外做此类优化基本上是没有意义的)

    (3)尽量避免过多的引用层级和不必要的多次方法调用目前绝大多数JS引擎都是解释执行的,而解释执行的情况下,在所有操作中,函数调用的效率是较低的。 此外,过深的prototype继承链或者多级引用也会降低效率。JScript中,10级引用的开销大体是一次空函数调用开销的1/2。这两者的开销都 远远大于简单操作(如四则运算)。

     (4)尽量使用语言本身的构造函数和内建函数。
      值得注意的是,有些情况下看似是属性访问,实际上是方法调用。例如所有DOM的属性,实际上都是方法。在遍历一个NodeList的时候,循环条件对于 nodes.length的访问,看似属性读取,实际上是等价于函数调用的。而且IE DOM的实现上,childNodes.length每次是要通过内部遍历重新计数的。(My god,但是这是真的!因为我测过,childNodes.length的访问时间与childNodes.length的值成正比!)这非常耗费。所以 预先把nodes.length保存到js变量,当然可以提高遍历的性能。
同样是函数调用,用户自定义函数的效率又远远低于语言内建函数,因为后者是对引擎本地方法的包装,而引擎通常是c,c++,java写的。进一步,同样的功能,语言内建构造的开销通常又比内建函数调用要效率高,因为前者在JS代码的parse阶段就可以确定和优化。

       (5)尽量减少不必要的对象创建。
         本身创建对象是有一定的代价的,但是这个代价其实并不大。最根本的问题是由于JScript愚蠢之极的垃圾回收调度算法,导致随着对象个数的增加,性能严重下降(据微软的人自己说复杂度是O(n^2))。
比如我们常见的字符串拼接问题,经过我的测试验证,单纯的多次创建字符串对象其实根本不是性能差的原因。要命的是在对象创建期间的无谓的垃圾回收的开销。而Array.join的方式,不会创建中间字符串对象,因此就减少了那该死的垃圾回收的开销。
因此,如果我们能把大规模对象创建转化为单一语句,则其性能会得到极大的提高!例如通过构造代码然后eval——实际上PIES项目中正在根据这个想法来做一个专门的大规模对象产生器……
我的优化结果;
           源代码:  if(text == ""  || text == null  ||  text == "undefind"){//判断值是否为空
                                flag = false;
                           }else{
                               where += text + "#";
                            }
           if优化成 :if(text == ""  || text == null) 效果是一样的


以前的草稿,开放出来哈
  评论这张
 
阅读(202)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017