He escrito un pequeño plugin que permite generar estilos al vuelo desde javascript.
Ventaja es que las reglas creadas se aplican a todos los elementos creados en un futuro mas fácil de programar y mas eficiente
si tenemos en cuenta los benchmark de abajo:
caso1:
crear 500 elementos 54ms
aplicar css complejo 6ms
crear otros 500 elementos 54ms
aplicar de nuevo el css a los 1000 elementos 12ms
total : 126ms
caso 2:
crear 500 elementos 54ms
crear reglas css : 6ms
crear otros 500 elementos 54ms
total : 114ms
Benchmark data:
añado un el div: <div class=”div” style=” width:400px; margin:auto; border: solid 1px silver; padding:10px> Hola </div>” 500 veces -> 54 – 58 ms
crear una regla css usando cssG 6-7 ms
usar jquery css con parametro unico $(“div”).css(“background”,”red”); -> 3- 14ms
usar jquery css con multiples parametros $(“.div span”).css({“background”:”yellow”,”padding”:”5px”,”cursor”:”pointer”}); -> 6- 8 ms
añadiendo complejidad:
a) $(“body”).append(‘<div class=”div” style=”width: 400px; margin:auto; border:1px solid silver; padding:10px;”><span> Hola ‘+ i+’</span> <span> seccong</span></div>’); 500 veces tarda 62 – 68 ms
b) 8-9 ms .div span
c) $(“.div span”).css(“background”,”red”); 8 ms
d) $(“.div span”).css({“background”:”yellow”,”padding”:”5px”,”cursor”:”pointer”}); 13ms
metodo de prueba:
var time = +(new Date);
$(“.div span”).css({“background”:”yellow”,”padding”:”5px”,”cursor”:”pointer”});
var d = +(new Date);
consoleOut(“aply multiple css to 500 divs=”+ (d – time) + “ms”)
en kunutu 64 bit chromium 12 i7 16Gig Ram SSD