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 快得多。

现代浏览器支持querySelectorand 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