getElementById basado en contexto es 1000 veces más lento que getElementById nativo. ¿Los motores de selección como chisporroteo utilizan una estrategia más inteligente?

Question

Siendo interesado en construir html chunks off-dom antes de insertarlos en el dom, he hecho algunas pruebas usando dynatrace. Utilicé el método de Bobince: Is there any way to find an element in a documentFragment?

Me pareció casi 1000 veces más lento (en IE7), lo que me sorprendió mucho.

Dado que la función es bastante básica, me preguntaba acerca de la estrategia utilizada por motores como chisporroteo.

Me gustaría saber si hay formas más eficientes de seleccionar los nodos según el contexto.

Answer 1

Los motores de selector de marco generalmente se evalúan con la mano derecha, por lo que esperaría un selector de ID contextual a document.getElementById la ID y luego verificar si los resultados estaban en el nodo de contexto incrementando el parentNode s. Esto es razonablemente rápido, pero no funcionará para árboles DOM fuera del documento como en este ejemplo. Los motores de selección tendrían que hacerlo de forma desesperadamente lenta, o no les importa (por ejemplo, Sizzle no funciona con DocumentFragment).

Hay una forma mejor de obtener la ID dentro de un fragmento que he recordado desde entonces, para los navegadores que implementan Selectors-API (IE8, Firefox 3.5, Opera 10, Safari 3.1, Chrome 3). Puede utilizar querySelector aplicar un selector CSS con el DocumentFragment como un nodo de contexto, ya que la API requiere DocumentFragment implementos NodeSelector:

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

Esto no es tan rápido como getElementById, pero es muchísimo mejor que la versión DOM .

Desafortunadamente la mayoría de los marcos que tienen optimizaciones Selectores-API no las van a utilizar en este caso o cualquier otro con nodos de contexto, porque la forma en que funciona el nodo de contexto es diferente en querySelector [All] a cómo los marcos implementados tradicionalmente, haciéndolos incompatibles.

Selectors-API Level 2 propone métodos de 'ámbito' que se comportan como los selectores de marcos tradicionales ... pasará un tiempo antes de que se pueda usar, pero probablemente no veremos selectores contextuales optimizados en los marcos existentes hasta entonces. Creo que es una lástima, ya que aunque el método querySelector de usar el nodo de contexto para el filtrado pero no el alcance no es tan bueno, todavía es bastante útil para todos los casos comunes.

Answer 2

Si no te importa la inserción de su DocumentFragment en DOM temporalmente ...

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 
} 

Esto funciona de forma fiable el tiempo que su documentFragment no contiene elementos con el ID que ya existen en document y desea buscar en esa identificación.