Velocidad de CSS

Esta es solo una pregunta para ayudarme a entender mejor el procesamiento de CSS.Velocidad de CSS

Digamos que tenemos un millón de líneas de esto.

<div class="first"> 
    <div class="second"> 
     <span class="third">Hello World</span> 
    </div> 
</div>

¿Cuál sería la forma más rápida de cambiar la fuente de Hello World a rojo?

.third { color: red; } 
div.third { color: red; } 
div.second div.third { color: red; } 
div.first div.second div.third { color: red; }

Además, ¿y si no estaba en la etiqueta en el medio que tenía una identificación única de "foo". ¿Cuál de los métodos de CSS anteriores sería el más rápido?

Sé por qué se usan estos métodos, etc., estoy tratando de captar mejor la técnica de renderizado de los navegadores y no tengo idea de cómo hacer una prueba que lo mida.

ACTUALIZACIÓN: Buena respuesta Gumbo. Por lo que parece, sería más rápido en un sitio normal hacer la definición completa de una etiqueta. Ya que encuentra a los padres y reduce la búsqueda de cada padre encontrado.

Eso podría ser malo en el sentido de que tendría un archivo CSS bastante grande.

Fuente

2009-02-11 Ólafur Waage

Dos cosas para recordar:

Esto va a depender de la CSS analizador/motor de renderizado: es decir, que varía de un navegador a otro.
CSS es muy, muy, realmente rápido de todos modos, incluso en él es el más lento de la observación humana no debe observar

En general las cosas más simples son los más rápidos (como Gumbo ilustra muy bien), pero como ya estamos en un entorno tan rápido, no piense que debe sacrificar la claridad y el alcance apropiado (la baja especificidad es como hacer que todo sea público). Evita a * dondequiera que puede :)

Fuente

2009-02-11 09:52:40 annakata

Usted tiene que entender cómo se procesan los selectores:

.third: conseguir cada elemento y compruebe si hay un nombre de clase third,
div.third: conseguir cada elemento DIV y compruebe si hay un nombre de clase third,
div.second div.third: obtener cada DIV elemento, comprobar si hay un nombre de clase second, correr a través de estos y encontrar cada DIV elemento decendant y compruebe si hay un nombre de clase third,
div.first div.second div.third: conseguir cada elemento DIV, compruebe si hay un nombre de clase first, correr a través de estos y encuentre cada elemento descendente DIV, busque el nombre de clase second, revise estos y, finalmente, busque el nombre de clase third.

Editar Tengo que admitir, que el procedimiento anterior sería el enfoque ingenuo y no es eficiente en general. De hecho, existen implementaciones que van de abajo hacia arriba en lugar de arriba a abajo:

div.first div.second div.third: conseguir cada elemento DIV, compruebe si hay un nombre de clase third, obtener el primer DIV ancestro que tiene un nombre de clase second, obtenga el primer antecesor DIV que tenga el nombre de clase first.

Fuente

2009-02-11 09:42:58 Gumbo

incluso hay motores que navegan por el dom en lugar del CSS. ¿Este elemento coincide con este selector? ¿No? ¿Que tal este? Todo tipo de lógica de acceso directo existe también. – annakata

Google's Page Speed tiene información muy útil: http://code.google.com/speed/page-speed/docs/rendering.html; en resumen, dicen que usan solo clases e ID por su cuenta, sin etiquetas de calificación. , es el más rápido. – DisgruntledGoat

Yo diría que esto depende del navegador. Nada es mejor que un experimento, en este caso un simple JavaScript probablemente lo haría.

Actualización: que quería hacer algo como esto:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>CSS Speed Test</title> 
    <style type="text/css"> 
    .first { color: red; } 
    </style> 
    <script type="text/javascript"> 
    window.onload = function() 
    { 
     var container = document.getElementById("container"); 
     var totalTime = 0; 
     var passes = 100; 
     for (var p=1; p<=passes; p++) 
     { 
      var startTime = new Date(); 
      for (var i=0; i<1000; i++) 
      { 
       var outerDiv = document.createElement("div"); 
       var innerDiv = document.createElement("div"); 
       var span = document.createElement("span"); 
       outerDiv.className = "first"; 
       innerDiv.className = "second"; 
       span.appendChild(document.createTextNode("Hello, world!")); 
       outerDiv.appendChild(innerDiv); 
       innerDiv.appendChild(span); 
       container.appendChild(outerDiv); 
      }      
      var endTime = new Date(); 
      totalTime += (endTime - startTime); 
     }       
     alert("Average time: " + totalTime/passes); 
    } 
    </script> 
</head> 
<body> 
    <div id="container"></div> 
</body> 
</html>

... pero las diferencias de tiempo causadas por diferentes selectores parecen ser demasiado pequeños para medir, tal como dijo annakata.

Fuente

2009-02-11 09:50:08 zoul

Oh, por supuesto, quise * time * los diversos selectores usando JavaScript. – zoul

oic - tiene sentido ahora :) – annakata

De acuerdo con la Mozilla Developer Center, el selector más eficiente para este caso sería simplemente .third

De hecho, afirman que hay, de forma explícita, "No calificar reglas de la clase con la etiqueta nombres ". En general, para una mayor eficiencia, use el selector más simple que coincida. Es por eso que .third latidos span.third late .second span.third, etc.

no puedo decir lo que la conclusión del Gumbo está destinado a ser, pero Ólafur parece estar llegando a la conclusión de que que el uso de más cosas en el selector hace que el análisis de la CSS más eficiente , cuando, de hecho, es todo lo contrario (suponiendo que otros motores de análisis de CSS funcionen de manera similar a los de Mozilla).

Fuente

2010-05-24 05:22:50

Buena respuesta allí. –

Respuesta

Cuestiones relacionadas