jQuery最佳实践完整篇

2020-05-23 06:08:32易采站长站整理



  $(‘:hidden’)


属性选择器的例子则是:



  $(‘[attribute=value]’)


这两种语句是最慢的,因为浏览器没有针对它们的原生方法。但是,一些浏览器的新版本,增加了querySelector()和querySelectorAll()方法,因此会使这类选择器的性能有大幅提高。


最后是不同选择器的性能比较图。



可以看到,ID选择器遥遥领先,然后是标签选择器,第三是Class选择器,其他选择器都非常慢。


3. 理解子元素和父元素的关系


下面六个选择器,都是从父元素中选择子元素。你知道哪个速度最快,哪个速度最慢吗?



  $(‘.child’, $parent)


  $parent.find(‘.child’)


  $parent.children(‘.child’)


  $(‘#parent > .child’)


  $(‘#parent .child’)


  $(‘.child’, $(‘#parent’))


我们一句句来看。


(1) $(‘.child’, $parent)


这条语句的意思是,给定一个DOM对象,然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find(‘child’),这会导致一定的性能损失。它比最快的形式慢了5%-10%。


(2) $parent.find(‘.child’)


这条是最快的语句。.find()方法会调用浏览器的原生方法(getElementById,getElementByName,getElementByTagName等等),所以速度较快。


(3) $parent.children(‘.child’)


这条语句在jQuery内部,会使用$.sibling()和javascript的nextSibling()方法,一个个遍历节点。它比最快的形式大约慢50%。


(4) $(‘#parent > .child’)


jQuery内部使用Sizzle引擎,处理各种选择器。Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.child,然后再一个个过滤出父元素#parent,这导致它比最快的形式大约慢70%。


(5) $(‘#parent .child’)


这条语句与上一条是同样的情况。但是,上一条只选择直接的子元素,这一条可以于选择多级子元素,所以它的速度更慢,大概比最快的形式慢了77%。


(6) $(‘.child’, $(‘#parent’))


jQuery内部会将这条语句转成$(‘#parent’).find(‘.child’),比最快的形式慢了23%。


所以,最佳选择是$parent.find(‘.child’)。而且,由于$parent往往在前面的操作已经生成,jQuery会进行缓存,所以进一步加快了执行速度。