<h2>1.尽量使用最新版本的jQuery 类库。</h2>    <p>jQuery 每一个新的版本都会较上一版本进行bug修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的jQuery来提高性能。不过更换新版本之后,不要忘记测试代码的兼容性。</p>    <h2>2. 使用合适的选择器</h2>    <p>1.$(“#id”) 使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery 底层将直接调用javascript的原生方法document.getElementById()。此外选择元素时,应该尽量缩小DOM的查找范围。例如在某个id下查找 div.$("#id").find("div"); 这样也能提高查找效率。</p>    <p>2.使用标签选择器 $("div") $("input")<br> 使用标签选择器将会直接调用javascript的document.getElementsByTagName()方法来定位DOM元素。</p>    <p>3.使用类选择器 $(".class")。<br> 使用类选择器,如果浏览器支持javascript的document.getElementsByClassName()方法,则直接使用该方法,否则就逐个遍历DOM元素。</p>    <p>4.使用属性选择器 $("[attribute=value]")<br> 较新的浏览器可能支持document.querySelectorAll()方法,但是有的浏览器可能不支持,这在于他们的内核不一样。使用这种方式来查找DOM元素,性能并不理想,在开发中应该尽量避免使用。</p>    <p>5.使用伪选择器 $(":hidden")<br> 和上面的属性选择器是同一类,javascript并没有对这类的实现,只有通过逐个遍历DOM元素来查找满足要求的元素,这个尽量不要使用。如果必须查找,则尽量缩小范围,从其父元素来进行搜索。例如: $("#id").find(":hidden");$("div.div").filter(":hidden") 等。</p>    <p>上面的选择器性能自上而下依次下降,如果对上面有所疑问,可以自己在页面上进行测试。</p>    <h2>3.缓存对象</h2>    <p>如果在jQuery开发中经常使用一个对象,建议进行对其缓存,否则你每次使用$()这种方式都会创建一个jQuery对象。<br> 例如有的人喜欢这样写:</p>    <pre>  <code class="language-javascript">$("#btn").bind("click",function(){});  $("#btn").css("border","1px");  $("#btn").css("backgroud-color","red");  $("#btn")....</code></pre>    <p>这样最终会使jQuery创建很多的$(“#btn”)对象,而且在创建之前都必须进行DOM 查找一次。所以建议使用缓存对象或者链式的方式。</p>    <pre>  <code class="language-javascript">//缓存对象  $btn=$("#btn");  $btn.bind("click",function(){});  btn.css("border","1px");  btn.css("backgroud-color","red");  btn....  //链式操作  $("#btn").bind("click",function(){})           .css("border","1px")           .css("backgroud-color","red")           ....；   //如果像上面有相同的方法可以进行合并   $("#btn").bind("click",function(){})           .css({"border":"1px"},                {"backgroud-color":"red"})           ....；</code></pre>    <p>如果某个对象经常使用也可以添加到全局函数中<br> window.myCustomGlob={<br> head: ( “ h e a ” ) , t i t l e :</p>    <p>(“title”),<br> btn:$(“#btn”)<br> };</p>    <p>记住：永远不要让相同的选择器在代码里面出现多次。</p>    <h2>4.循环时的DOM操作</h2>    <p>例如:</p>    <pre>  <code class="language-javascript">$ulList=$("#ulList");//ul列表集合  for(var i=0;i<10;i++)  {  $ulList.append("<li>"+i+"</li>");  }</code></pre>    <p>上面代码将每一个新的li元素添加到ul中,实际上jQuery操作消耗的性能也不低,因为上面对DOM操作了10次,最好是在插入之前把li创建好。</p>    <pre>  <code class="language-javascript">$ulList=$("#ulList");//ul列表集合  var li="";  for(var i=0;i<10;i++)  {  li+="<li>"+i+"</li>";  }  $ulList.append(li);</code></pre>    <h2>5.使用js数组的join()方法来拼接字符串</h2>    <p>上面使用+号拼接的li字符串,但是现在可以使用数组来转换字符串,性能比+号拼接微好些了,尤其是处理长字符串。</p>    <pre>  <code class="language-javascript">$ulList=$("#ulList");//ul列表集合  var liArr=[];  for(var i=0;i<10;i++)  {  liArr[i]="<li>"+i+"</li>";  }  $ulList.append(liArr.join(''));</code></pre>    <p>我自己大概测试了一下,</p>    <table>     <tbody>      <tr>       <td>数量</td>       <td>+</td>       <td>数组</td>      </tr>      <tr>       <td>100</td>       <td>1</td>       <td>0</td>      </tr>      <tr>       <td>1000</td>       <td>7</td>       <td>4</td>      </tr>      <tr>       <td>10000</td>       <td>53</td>       <td>49</td>      </tr>     </tbody>    </table>    <p>但是在循环100000的情况下,+号大部分比数组的时间稍微小一些。这两个性能可以自行选择。</p>    <h2>6.数组方式使用jQuery对象</h2>    <p>使用jQuery选择器获取的结果是一个jQuery对象。jQuery类库会让你感觉正在使用一个定义了索引和长度数组。在性能方面,建议使用for或者while循环处理,而不是使用$.each()。这样使你的代码更快。</p>    <pre>  <code class="language-javascript">$.each(array,function(i){    });</code></pre>    <p>可以使用for代替each方法,代码如下:</p>    <pre>  <code class="language-javascript">for(var i=0,len=array.length;i<len;i++)  {  }</code></pre>    <p>另外,检查长度也是检查一个jQuery对象是否存在的方式。</p>    <pre>  <code class="language-javascript">var $btn=$("#btn");  if($btn)//总是true  {};  if($btn.length)//元素存在才返回true  {}</code></pre>    <h2>7.事件代理</h2>    <p>每一个JavaScript事件（click,mousedown）都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。比如,给一个表格绑定点击td后,背景色设置为红色。代码如下:</p>    <pre>  <code class="language-javascript">$("#table td").click(function(){      $(this).css("background","red");  });</code></pre>    <p>如果table中有100个td,在使用上面的方式时,就绑定了100个事件,这将带来负面的性能影响。代替这种效率很差的多元素事件监听的方法是,只需要向它们的父节点绑定一次事件,然后通过event.target获取当前点击的元素即可。</p>    <pre>  <code class="language-javascript">$("#table").click(function (event) {                      var $td = $(event.target);//捕捉触发的目标元素                      if ($td[0].nodeName == "TD") {                          $td.css("background", "red");                      }                  });</code></pre>    <p>在改进的代码中,你只为一个元素绑定了1个事件,这种方式的性能要优于之前那种。<br> 在jQuery1.7以后的版本中提供了一个新的方式on()，来帮助将整个事件监听封装到一个更加便利的方法中,如下:</p>    <pre>  <code class="language-javascript">$("#table").on("click",'td',function(){      $(this).css("background","red");  });</code></pre>    <p> </p>    <p> </p>    <p>来自：http://blog.csdn.net/u010533180/article/details/53816040</p>    <p> </p>