基于上下文的getElementById比原生getElementById慢1000倍。像嘶嘶声这样的选择器引擎是否使用更聪明的策略？

Question

在将dom插入dom之前，有兴趣构建html chunks off-dom，我使用dynatrace做了一些测试。我用bobince的方法： Is there any way to find an element in a documentFragment?

我发现它慢了1000倍（在IE7中），这让我感到很吃惊。

由于该功能是非常基本的，我想知道引擎使用的策略，如嘶嘶声。

我想知道是否有一些更有效的方法来做基于上下文的节点选择？

Answer 1

框架选择器引擎通常是右手先评估的，因此我期望上下文ID选择器为document.getElementById的ID，然后通过加大parentNode来检查结果是否在上下文节点中。这是相当快的，但它不适用于像这个例子那样的文档外DOM树。然后，选择器引擎将不得不以极其缓慢的方式执行它，或者不在意（例如，Sizzle不能与DocumentFragment一起使用）。

有一个更好的方法，让我从那以后，为实现Selectors-API（IE8，Firefox 3.5，Opera 10，Safari 3.1，Chrome 3）的浏览器记得一个片段。您可以使用querySelector应用与DocumentFragment作为上下文节点的CSS选择器，因为API需要DocumentFragment工具NodeSelector：

alert(frag.querySelector('#myId')) 

这是不太一样快getElementById，但它的负载比DOM版本更好。

不幸的是，大多数具有选择器API优化的框架在这​​种情况下不会使用它们，或者任何其他使用上下文节点的框架都不会使用它们，因为上下文节点的工作方式与框架传统上实现它的方式不同，使他们不相容。

Selectors-API Level 2提出了类似于传统框架选择器的'scoped'方法......在可用之前还需要一段时间，但在此之前我们可能不会在现有框架中看到优化的上下文选择器。我认为这是一种遗憾，因为虽然使用上下文节点进行过滤但未进行范围界定的方法并不完善，但它仍然非常适用于所有常见情况。

Answer 2

如果你不介意你插入到DocumentFragment的DOM暂时...

function getElementFromFragById(frag, id) { 
    var tempDiv = document.createElement("div"); 
    tempDiv.style.display = "none"; 
    tempDiv.appendChild(frag); 
    document.body.appendChild(tempDiv); 
    var elem = document.getElementById(id); 
    document.body.removeChild(tempDiv); 
    return document.getElementById(id) ? null : elem; //if the element still exists, we have a problem 
} 

这可以可靠地工作，只要你documentFragment不包含的ID已经存在document元素和要搜索该ID。