Xitrus está alojado en:
En este artículo voy a comparar CSS3 y jQuery, para ejecutar animaciones y transiciones, en el campo donde se pueden comparar.
jQuery es uno de los mejores frameworks que existen de JavaScript, ¿pero hasta que punto es necesario?, últimamente en mi opinión se está usando jQuery para hacer cosas que no lo requieren, y eso puede ralentizar una web sin darnos cuenta, así que para ver quien gana en eficiencia he realizado un experimento para comparar ambas tecnologías.
CSS tiene su cometido, el de añadir estilos a una web, y jQuery tiene el suyo, que es el de simplificar la interacción con elementos de una web e incorporar funciones que por si solo no tiene JavaScript.
El objetivo de la prueba es comparar la eficiencia superior de CSS3 para realizar animaciones y transiciones sobre jQuery, lo que convierte a esta última en una tecnología estupenda si se va ha dar uso, pero se convierte es un lastre si solo se usa para un slider (por ejemplo).
jQuery, al igual que cualquier otro framework, nos puede ahorrar mucho tiempo e incluso nos brinda todo lo que nos puede hacer falta dentro de JavaScript, llegando al punto de no hacernos ni falta escribir nada en JS sin pasar por el framework por excelencia, ¿pero es necesario usarlo para pocas tareas simples?
Cuando usamos cualquier tipo de framework nos toca añadir archivos nuevos (normalmente pesados) y hacerlo ejecutar (con toda esa cantidad de código), lo que aumenta la cantidad de datos a descargar y le añade carga al PC (o dispositivo móvil, donde vemos un mayor esfuerzo para ejecutar una herramienta grande).
¿Es decir, es un lastre?: la respuesta si duda es "depende", y eso lo deberíamos de saber ver nosotros como desarrolladores, un framework compensa cuando le das uso, no tiene sentido usar Modernizr (que ayuda a detectar las características que soporta un navegador) para únicamente detectar si un navegador admite la etiqueta <audio> cuando se puede saber con una simple condición en JavaScript. Y esto igual que se aplica a Modernizr lo podemos aplicar a jQuery, que nos puede ayudar a crear rápidamente aplicaciones estupendas y eficientes, pero usarlo para añadir el slider que hemos descargado de ha saber donde se está convirtiendo en rutina y sin duda es un gran error si solo se usa para este fin, más aún cuando podemos hacerlo con CSS3 que es mucho más eficiente.
En el único ámbito donde se puede comparar CSS con jQuery es en la realización de animaciones o transiciones (que prácticamente hacen lo mismo, pero con matices).
Como bien sabemos CSS (y ahí entran las animaciones y las transiciones) se ejecuta usando el lenguaje propio del navegador que en la mayoría de los modernos está escrito en C++, mientras que cualquier framework o código propio que usemos para animar algo estará escrito en JavaScript, que es un lenguaje interpretado mucho menos eficiente que C++.
Entendiendo esto, el resumen rápido es que debemos de usar antes CSS que JavaScript para realizar movimientos en una página web y mucho menos añadir un framework entero para una función tan simple.
Para hacer una comparación he realizado una animación idéntica con ambas tecnologías, que consiste en tres cuadrados que se desplazan a distinta velocidad (el primero tarda 0.5s, el segundo 1s y el tercero 1.5s) y los analizaré con Opera Dragonfly, que nos mostrará los esfuerzos realizados por cada uno.
Los resultados muestran que tarda menos tiempo en realizar los cálculos el navegador al tratarse de CSS, como es normal al estar muchísimo más optimizado que cualquier efecto similar con JavaScript.
Podéis probarlo vosotros mismos, aunque a simple vista funcionan igual, con herramientas de pruebas de rendimeinto de los navegadores podéis comprobarlo.
Usar frameworks no es malo, nos ahorra mucho trabajo, pero tenemos que saber cuando usarlo, por ejemplo, en Xitrus encontramos dos slider en el inicio, y están henchos con unas cuantas líneas de JS y con transiciones, no vi necesario usar un framework y el resultado es el mismo.
Xitrus está alojado en:
