`
当时我就震惊了
  • 浏览: 33142 次
  • 性别: Icon_minigender_1
  • 来自: 火星
社区版块
存档分类
最新评论

JQuery preferment improvement

阅读更多
 1.Always descend From an #id
 
 //The faster selector in jQuery is the ID selector ($('#elementid'))
 //This is because the ID SELECTOR maps directly to a native JavaScript
 //method,getElementById();

  //***********************important tips***************************
  //(1)kernel point.
  $("#element-id") = getElementById() //[native JavaScript method]  

  //(2)multiple elements selecting
  To minimum the performance hit,Always descend from the closet parent ID
  //从最近的开始选择

 2.Use Tag selector before Classes selector
 
  //This is the second fastest selector,again this' because 
  //Tag selector maps to another native JavaScript method 
  //getElementByTagName();
  //***********************important tips***************************
  //(1)always prefix a class with a tag name
       //(and also always remember descend from an ID)
  //(2)along the same lines,it's redundant to descend from multiple IDs
     //example
     //var traffic_light = $('#content #traffic_light');

 3.Cache jQuery Objects
  //example
  //var jQueryObj = $(....);
  //jQueryObj.css('border':'1px solid #dcdcdc');
  //jQueryObj.bind('click',function(){.....});
  //jQueryObj.fadeIn('slow');

  //***********************important tips***************************
  //(1)never repeat a jQuery selection operation

 4.Storing jQuery results for later
  
  //If you intend to use the jQuery result object(s) in another part 
  //of your program, or should your function execute more than once, 
  //cache it in an object with a global scope. By defining a global 
  //container with jQuery results, we can reference them from within 
  //other functions:
  
  //***********************important tips***************************
  //(1)Cache the element in an JavaScript Container 
    
     window.$my = {
        title : $('title'),
        tBody : $('body'),
        element : $('.....')
     };//Create a global scope container
     
     $my.title.html('Hello World!');
     $my.element.bind('click',function(){....});

 5.Chaining
   $(....).css(..).bind(...).....

 6.Use Sub-queries
   $my = $(...);
   $mySub = $my.find(...);
 7.Leverage Event Delegation (a.k.a. Bubbling)
   
   $('#myList li').bind('click',function(){
      
         $(this).addClass('clicked');
   });
   
   Better like below:
   
   $('#myList').bind('click',function(e){

         //e = e || window.event;
         var target = e.target;
         $target = $(target);
         if($target.nodeName === 'LI'){
              
             $target.addClass('clicked');
         }
   });
   
 to be continued...
 reference: http://www.artzstudio.com/2009/04/jquery-performance-rules/
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics