jquery前端性能优化（持续添加。。。）

１.选择器的使用

（１）$('#id')

  使用id来定位dom元素是性能最高的方法。jQuery底层将直接调用本地方法document.getElementById()。如果id直接可以找到所要对象，一定不要加任何修饰。如果这个方式不能直接找到需要的元素，那么可以考虑调用.find()方法。如下：

　$('#id').find('tag');

 

（２）$('p'),$('input'),$('div') ...

  使用标签名是第二优化选择，因为jQuery将直接调用本地方法document.getElementsByTagName_r()来定位DOM元素。但是，容易增加代码耦合性，需谨慎。

 

（３）$('.class')

  对于比较新的浏览器例如，IE9，它支持本地方法document.getElementsByClassName()，而对于老的浏览器，例如，IE8或者更早版本来说，不得不使用DOM搜索方式来实现，自然会对于性能产生比较大的影响。所以大家得选择使用。

  如果要用class，最好在其前面加上tag，并且不要忘了就近的id，如下：

  $('#id tag.class');

 

（４）$('[attribute=value]')

  对于利用属性来定位DOM元素，本地javascript方法中并没有直接的实现。所以大都都是使用DOM搜索方式来达到效果，很多现代浏览器支持querySelectorAll()方法，但是不同浏览器的性能还是有区别。总体来说，使用这种方式来定位DOM元素，并不是非常理想。所以为了获得更好的优化效果，你需要尽量避免这个对性能有害的使用方式。

 

（５）$(':hidden')

  和上面使用属性来定位DOM的方式类似，这种伪选择器也同样没有本地js方法来直接实现。而且jQuery需要搜索每一个元素来定位这个选择器，将会对你的应用带来比较大的性能问题。所以大家尽量不要使用，当然，如果你非要使用的话，请先是用find方法定位父元素，然后，再使用这个选择器，这样会帮助你很好的优化性能，如下：

  $("#id").find(":hidden")

 

２.使用最新版本的jquery。

　新的版本在性能上肯定会进行一些优化，不可能越改越差。需要注意的是如将旧版本移植新版本，一些用法需要修改，花费这样的时间是否值得。

 

３.使用链式调用，重复的dom对象要进行缓存

    链式调用是jquery的一个特性，看自己代码情况使用，如在不同地方多次使用同一dom对象，要缓存。如下：

    var $dom = $('dom') ;

 

４.事件代理

  //不好的方法 

  $('#id').find('img').click(function(){

    $(this).toggleClass('class');

  });

  如果#id中有1000个img，就要绑定1000次

 

  //优化方法

  $('#id').on('click','img',function(){

    $(this).toggleClass('class');

  });

 

５.循环语句中dom操作

例如append，先把要插入的内容整体拼好字符串，最后再整体append，不要在每个循环中都append。

字符串拼接中，用数组和join()方法代替字符串相加。

 

６.$(function(){})代替$(document).ready(function(){})

７.$.data(elem,key,value)代替$(elem).data(key,value)

８.从父元素中选择子元素，用.find方法速度最快。