jquery代码优化，想到一条在随时更新。。。

我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今，我们越来越多的注意到另一个影响网站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架，使节点选择和DOM操作变得越来越容易，如果使用不当，有可能影响整个网页的响应速度。

咱们细谈：

1.总是使用#id去寻找element.   jQuery中最快的选择器是ID选择器 ($('#someid')). 这是因为它直接映射为JavaScript的getElementById()方法。
选择单个元素    

选择多个元素的时候，我们真正需要知道的是DOM的遍历和循环才是性能低下的原因。为了尽量减少性能损失， 总是使用最近的父ID去寻找。  var traffic_lights = $('#traffic_light input')

2、在Classes前面使用Tags ,jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是因为它直接映射到JavaScript的getElementsByTagName()方法。

总是在一个Class前面加上一个tag名字（记得从一个ID传下来）  var active_light = $('#traffic_light input.on');   在查找的类名称前面加标签，可以减少DOM查询遍历

3、缓存jQuery对象

养成保存jQuery对象到一个变量上（就像上面的例子）的习惯，首现保存jQuery变量到一个本地变量后，再继续你的操作，jquery采用链式编程：例如

var $active_light = $( '#traffic_light input.on' );

 

$active_light.bind( 'click' , function (){...})

 

  .css( 'border' , '3px dashed yellow' )

 

  .css( 'background-color' , 'orange' )

 

  .fadeIn( 'slow' );

 

4.使用子查询

我们可以利用子查询缓存active和inactive lights以便后面的操作。 在父元素下查找子元素。find（），，children（）

var $traffic_light = $( '#traffic_light' ),

 

$active_light = $traffic_light.find( 'input.on' ),

 

$inactive_lights = $traffic_light.find( 'input.off' );

5.、限制直接对DOM操作

例如：我们在进行遍历循环的时候，不能在循环内部每次循环都进行字符串的拼接，或者追加元素，而是在全部循环以后，直接一次性进行追加等操作

字符串拼接特别耗费性能，能不用就不用，哈哈哈

6.事件委托（时间冒泡）

每一个JavaScript事件（如click, mouseover 等）在DOM结构树上都会冒泡到它的父元素上。如果我们想让很多elements(nodes)调用同一个function这是非常有用的。取而代之的是 你可以只对它们的父级绑定一次，而且可以计算出是哪一个节点触发了事件，而不是绑定一个事件监听器到很多节点上这种效率低下的方式。例如，假如我们要开发 一个包含很多input的大型form，当input被选择的时候我们想绑定一个class name。像这样的帮定是效率低下的：、

$( '#myList).bind(' click ', function(e){

 

  var target = e.target, // e.target grabs the node that triggered the event.

 

   $target = $(target); // wraps the node in a jQuery object

 

  if (target.nodeName === ' LI ') {

 

   $target.addClass(' clicked');  // do stuff

 

  }

 

});

7、遵从$(windows).load

有 一种诱惑会使jQuery开发者hook所有事情到 $(document).ready 这个虚伪的事件里。毕竟在大多数例子里都可以看到这样使用。虽然$(document).ready 非常有用，它在页面呈现时发生，虽然其它对象还在下载中。如果你发现你的页面在下载中停顿，就有可能是$(document).ready 引起的。你可以通过把jQuery functions帮定到$(window).load事件来减少下面下载时的CPU使用率，它是在所有HTML（包括iframe内容）都下载完以后才 去调用所有对象的

8.压缩JS

虽然和jQuery无关，但在这里也要提一下。使JavaScript函数和变量变得可读是一个趋势，这对开发者来讲是必不可少的，但对普通用户来 讲没有任何关系。不用什么借口，是时候把JS压缩纳入我们的工作流程中来了。注释你的代码，在投放到生产环境之前找一个压缩工具进行压缩。使用 YUICompressor 压缩你代码中多余的浪费的字节。根据我们的经验，它可以安全的把JavaScript压缩的尽可能小，而不会多占用CPU。

转载于:https://www.cnblogs.com/ccnNL/p/8595291.html