大家好，欢迎来到IT知识分享网。
原文地址：http://www.cnblogs.com/aaronjs/p/3337531.html
ID > Tag > Class
- ID 选择器是速度最快的，这主要是因为它使用 JavaScript 的内置函数 getElementById()；
- 其次是类型选择器，因为它使用 JavaScript 的内置函数 getElementsByTag()；
- 速度最慢的是 Class 选择器，其需要通过解析 HTML 文档树，并且需要在浏览器内核外递归，这种递归遍历是无法被优化的。
选择器性能优化建议
- 尽量使用 ID 选择器
- 少直接使用 Class 选择器，尽量结合 Tag 使用，如 input.myclass
- 多用父子关系，少用嵌套关系
- 缓存 jQuery 对象
- 链式调用
性能分析
1 > 2 > 3 > 4 > 5 > 6
$parent.find('.child') // 1
$('.child', $parent) // 2
$('.child', $('#parent')) // 3
$parent.children('.child') // 4
$('#parent > .child') // 5
$('#parent .child') // 61. 这条是最快的语句。.find()方法会调用浏览器的原生方法（getElementById，getElementByName，getElementByTagName等等），所以速度较快。
2. 给定一个DOM对象，然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find(‘child’)，这会导致一定的性能损失。它比最快的形式慢了5%-10%。
3. jQuery内部会将这条语句转成$(‘#parent’).find(‘.child’)，比最快的形式慢了23%。
4. 这条语句在jQuery内部，会使用$.sibling()和javascript的nextSibling()方法，一个个遍历节点。它比最快的形式大约慢50%
5. jQuery内部使用Sizzle引擎，处理各种选择器。Sizzle引擎的选择顺序是从右到左，所以这条语句是先选.child，然后再一个个过滤出父元素#parent，这导致它比最快的形式大约慢70%。
6. 这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以于选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/22914.html
