Rendimiento de los selectores de CSS, DOM Parsing

Mi pregunta está relacionada con la activación del análisis de DOM, me gustaría saber por qué es más rápido usar un selector de ID de CSS que un selector de Clase. ¿Cuándo el árbol DOM tiene que ser analizado de nuevo, y qué trucos y mejoras de rendimiento debería usar ... También, alguien me dijo que si hago algo así comoRendimiento de los selectores de CSS, DOM Parsing

var $p = $("p"); 
$p.css("color", "blue"); 
$p.text("Text changed!");

en lugar de

$("p").css("color", "blue"); 
$("p").text("Text changed!");

mejora el rendimiento, ¿es esto cierto para todos los navegadores? Además, ¿cómo puedo saber si mi árbol DOM ha sido re-analizado?

Fuente

2012-04-17 Astronaut

selector CSS rendimiento análisis microscópico sí sola es suficiente. Lanzar las diferentes formas de jQuery de interpretar diferentes selectores (CSS o no CSS) en la mezcla hace que todo sea innecesariamente confuso. No vale la pena agonizar sobre estos matices. – BoltClock

http://www.artzstudio.com/2009/04/jquery-performance-rules/ enumera muchas reglas para la mejora de rendimiento de jquery – rt2800

También tenga en cuenta que puede método de cadena. Así que puedes hacer '$ ('p'). Css (''). Text (''). Morestuff()' para mejorar el rendimiento también – mrtsherman

Bueno, un selector #id es más rápido que los selectores de clase porque: (a) solo puede haber un elemento con un valor de identificación dado; (b) los navegadores pueden contener un mapa id -> element, por lo que el selector #id puede funcionar tan rápido como una sola búsqueda de mapa.

A continuación, la primera opción que se sugiere arriba es definitivamente más rápido, ya que evita la segunda de búsqueda, lo que reduce el tiempo total de búsqueda basada en el selector en un factor de 2.

pasado, puede utilizar las herramientas de desarrollo de Chrome selector de perfiles (en los Perfiles panel) para perfilar el tiempo que tarda un navegador para procesar selectores en su página (partido + aplicar estilos a los elementos coincidentes.)

Fuente

2012-04-17 14:06:12

Oye, no sabía sobre Selector Profiler. ¡Gracias! +1 por mi – mrtsherman

Solo una biblioteca de selector de JavaScript trataría un selector de ID de CSS como una llamada 'getElementById()', y recuperaría el primer elemento con la ID correspondiente. Estrictamente hablando, un motor de selección de CSS conforme necesita unir * todos * elementos con un ID dado a ese selector de ID, incluso si hay más de uno, por lo que si un navegador contiene dicho mapa, no será relevante para este particular procedimiento de coincidencia.Pero concede que estamos hablando de jQuery aquí ... – BoltClock

@ BoltClock'saUnicorn: Sé que te gustan las especificaciones :), así que [este] (http://www.w3.org/TR/1999/REC- html401-19991224/struct/global.html # adef-id) dice que el valor del atributo 'id' debe ser ** único ** en un documento. El comportamiento del navegador en el caso de varios elementos que tienen el mismo valor 'id' no está definido de otra manera (definitivamente más si se usa 'document.getElementById()') –

Os animo a hacer sus propias pruebas de rendimiento cada vez que tengas una duda Puede obtener más información sobre cómo hacerlo aquí: How do you performance test JavaScript code?. Una vez que hayas probado el rendimiento por tu cuenta, nunca olvidarás los resultados.

En particular, la ejecución de la función $() en un selector de jquery determinado debe obtener los nodos DOM coincidentes. No estoy seguro exactamente cómo funciona esto, pero supongo que es una combinación de document.getElementById(), document.getElementsByTagName() y otros. Esto tiene un costo de procesamiento, sin importar cuán pequeño sea, si lo llamas solo una vez y luego lo reutilizas, ahorras algo de tiempo de procesamiento.

Fuente

2012-04-17 14:07:37

Un selector de ID es más rápido que un selector de clase porque solo hay un elemento con una ID, pero muchos elementos podrían compartir una clase y deben buscarse.

El código siguiente es innecesario analizar el DOM dos veces, así que por supuesto será más lento:

$("p").css("color", "blue"); 
$("p").text("Text changed!");

Fuente

2012-04-17 14:08:07

Rendimiento de los selectores de CSS, DOM Parsing

Respuesta

Cuestiones relacionadas