网上有很多关于JQuery选择器的信息,我对目前关于JQuery选择器性能的最新技术感到困惑。
无论如何,......
('#context').find('.inner') still faster than ('#context .inner')
?('li') still faster than ('.classOnAllAndOnlyOnLiElements')
?我知道我可以编写自己的JSPerf性能评估,但是,我很害怕我会使用的那种DOM树不适合这样的测试(因为我不专业,所以不知道是什么东西我需要生成,例如#DOM树级别,DOM树元素的数量等等。)
希望有人能够从理论的角度回答我的问题并通过更多地了解JQuery实现,而不是简单的性能评估,这可能只是一个特定DOM树的答案。
答案 0 :(得分:0)
jsPerf与任何能回答你问题的人的回答一样理论上。
我们只能告诉你如何编写jQuery但没有对你的DOM进行测试,这没用 - 就像jsPerf ......
但是,我仍然会使用jsPerf并对多个浏览器中的一些小DOM进行抽象测试,因此您有想法如何最好地编写应用程序,无论其大小如何 - 无论如何,这应该是 任何 Web开发的一般概念。
一般来说,编码不应该与DOM的大小联系在一起,它应该与产品的性能联系在一起 - 这就像jsPerf这样的工具可以帮助很多
- )
答案 1 :(得分:0)
这里的重要部分是,如果是简单的选择器,并且您的选择器很简单,jquery使用*MatchesSelector
或document.querySelectorAll
(如果可用)并且显然取决于浏览器。因此,唯一可以知道的方法是在您要使用的所有浏览器中对其进行概要分析。
来自jquery来源:
....
matches = docElem.webkitMatchesSelector ||
docElem.mozMatchesSelector ||
docElem.oMatchesSelector ||
docElem.msMatchesSelector,
....
jQuery.extend({
find: function( selector, context, results, seed ) {
...
if ( seed ) {
while ( (elem = seed[i++]) ) {
if ( jQuery.find.matchesSelector(elem, selector) ) {
results.push( elem );
}
}
} else {
jQuery.merge( results, context.querySelectorAll(selector) );
}
return results;
}
....
})
...
jQuery.extend( jQuery.find, {
matches: function( expr, elements ) {
return jQuery.find( expr, null, null, elements );
},
matchesSelector: function( elem, expr ) {
return matches.call( elem, expr );
},
attr: function( elem, name ) {
return elem.getAttribute( name );
}
});