javascript - 当您想要搜索具有特定值的多个 HtmlObject 时，哪种 JavaScript 代码更有效？

Question

我尝试找出哪种 JavaScript 代码更高效，例如当我搜索多个 JavaScript 跨度时。

使用jquery的这种模式:

$('span[value='+value+']')

或者使用标准 javascript 的这种模式:

function gEBI(id) {
    return document.getElementById(id);
}
var spans = gEBI("content").getElementsByTagName('span'); 
for (i = 0; i < this.spans.length; i++)
 { 
     if (this.spans[i].getAttribute("value") == valueThis ) { // operations } 
 }

还有一个问题，搜索通常是 jquery 或标准 JavaScript 更高效

Answer 1

在现代浏览器(IE8 及更高版本)中，jQuery 将比手动搜索 DOM 快得多。

现代浏览器支持 querySelector 和 querySelectorAll，它们允许使用 CSS 查询来查找节点，并且比旧的 DOM 方法快得多。 jQuery 使用这些可用的功能，因此它可以从速度提升中受益。

但是，如果您确实追求速度，不需要古老的浏览器支持，并且仅使用基本的 CSS2.1 级别查询(例如您那里的查询)，请直接使用 querySelector。这将比 jQuery 更快:

// If you only need just one
var span = document.querySelector('span[value='+value+']');
// If there's more than one span like that
var spans = document.querySelectorAll('span[value='+value+']');

http://caniuse.com/#search=querySelector