JS技术

JavaScript之缓存对象成员的值

字号+ 作者: 来源: 2014-11-16 22:20 我要评论( )

JavaScript之缓存对象成员的值

       由于所有性能问题与对象成员有关,所以如果可能的话请避免使用它们。更确切地说,你应当小心地,只在必要情况下使用对象成员。例如,没有理由在一个函数中多次读取同一个对象成员的值:
      function hasEitherClass(element, className1, className2){
            return element.className == className1 || element.className == className2;
      }
      在此代码中,element.className 被访问了两次。很明显,在这个函数过程中它的值是不会改变的,但仍然引起两次对象成员搜索过程。你可以将它的值存入一个局部变量,消除一次搜索过程。修改如下:
      function hasEitherClass(element, className1, className2){
            var currentClassName = element.className;
            return currentClassName == className1 || currentClassName == className2;
      }

      此重写后的版本中成员搜索只进行了一次。既然两次对象搜索都在读属性值,所以有理由只读一次并将值存入局部变量中。局部变量的访问速度要快得多。
      一般来说,如果在同一个函数中你要多次读取同一个对象属性,最好将它存入一个局部变量。以局部变量替代属性,避免多余的属性查找带来性能开销。在处理嵌套对象成员时这点特别重要,它们会对运行速度产生难以置信的影响。
      JavaScript 的命名空间,如YUI所使用的技术,是经常访问嵌套属性的来源之一。例如:
      function toggle(element){
            if (YAHOO.util.Dom.hasClass(element, "selected")){
                  YAHOO.util.Dom.removeClass(element, "selected");
                  return false;
            } else {
                  YAHOO.util.Dom.addClass(element, "selected");
                  return true;
            }
      }
      此代码重复YAHOO.util.Dom 三次以获得三种不同的方法。每个方法都产生三次成员搜索过程,总共九次,导致此代码相当低效。一个更好的方法是将YAHOO.util.Dom 存储在局部变量中,然后访问局部变量:
      function toggle(element){
            var Dom = YAHOO.util.Dom;
            if (Dom.hasClass(element, "selected")){
                  Dom.removeClass(element, "selected");
                  return false;
            } else {
                  Dom.addClass(element, "selected");
                  return true;
            }
      }
      总的成员搜索次数从九次减少到五次。在一个函数中,你绝不应该对一个对象成员进行超过一次搜索,除非该值可能改变。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • WEB前端教程-JavaScript里的类和继承

    WEB前端教程-JavaScript里的类和继承

    2016-01-21 15:28

  • 高性能动画“box-shadow”属性 - FedFun - 博客频道 - CSDN.NET FedFun 爱前端,乐分

    高性能动画“box-shadow”属性 - FedFun - 博客频道 - CSDN.NET FedF

    2015-12-14 16:15

  • JS开发者调查 - FedFun - 博客频道 - CSDN.NET FedFun 爱前端,乐分享,前端痴王海庆的博客!

    JS开发者调查 - FedFun - 博客频道 - CSDN.NET FedFun 爱前端,乐分

    2015-12-13 11:08

  • Jquery下编写流行的前端的应用源码_Javascript教程

    Jquery下编写流行的前端的应用源码_Javascript教程

    2015-10-01 09:24

网友点评
n