Share
La llegada de jQuery ha hecho que el proceso de escritura de JavaScript sea risiblemente fácil. Sin embargo, notará que hacer pequeños cambios en su código mejora significativamente la legibilidad y / o el rendimiento. Estos son algunos consejos para que pueda comenzar a optimizar su código..
Necesitaremos una plataforma sólida para realizar nuestras pruebas. Aquí está el marcado HTML para la página de prueba en la que ejecutaremos todas nuestras pruebas:
Probando mejoras de rendimiento - Siddharth / NetTuts+ Algun texto aqui
- Oh hola!
No hay nada especial aquí; Solo un montón de elementos que podemos apuntar y probar. Estamos usando Firebug para registrar los tiempos aquí. perfil comienza el proceso, y perfilEnd lo detiene y toma nota de cuánto tiempo tomó la tarea. Normalmente uso el método de perfil principal de Firebug, pero para nuestros propósitos tortuosos, esto será suficiente.
Como suele ser el caso, se le entregará un único archivo de secuencia de comandos que contiene su código a todas las páginas de su sitio. Generalmente, este es un código que a menudo realiza acciones en elementos inexistentes en la página actual. Aunque jQuery maneja problemas como estos con bastante gracia, esto no significa que solo pueda ignorar cualquier problema. De hecho, si llama a los métodos de jQuery en una colección vacía, no se ejecutarán.
Como práctica recomendada, solo ejecute el código que sea aplicable a la página actualmente cargada, en lugar de agrupar todo su código en un solo documento listo para la verificación, y entregarlo al cliente.
Veamos el primer escenario:
Accentsconagua
console.profile (); var ele = $ ("# somethingThatisNotHere"); ele.text ("Algún texto"). slideUp (300) .addClass ("edición"); $ ("# mainItem"); console.profileEnd (); // Un código más impresionante, que rompe el suelo aquí ._. Firebug's escupe el siguiente resultado:
Esta vez, verifiquemos si el elemento que estamos buscando para realizar acciones existe antes de hacerlo..
console.profile (); var ele = $ ("# somethingThatisNotHere"); if (ele [0]) ele.text ("algo de texto"). slideUp (300) .addClass ("edición"); $ ("# mainItem"); console.profileEnd (); // Un código más impresionante, que rompe el suelo aquí ._. Y los resultados:
¿Ver? Es bastante simple, al punto y hace el trabajo.. Tenga en cuenta que no necesita verificar si existe un elemento para cada bit de su código. Notará en su página que ciertas partes más grandes generalmente se beneficiarán de este método. Usa tu juicio aquí.
Trate de usar una identificación en lugar de pasar una clase.
Este es un gran tema, así que lo mantendré lo más conciso posible. En primer lugar, al pasar los selectores, intente usar una identificación en lugar de pasar una clase. jQuery usa directamente el nativo getElementById método para encontrar un elemento por ID, mientras que en el caso de una clase tiene que hacer algo de vudú interno para adquirirlo, al menos en navegadores más antiguos.
Veremos los diferentes selectores que puede usar para apuntar al segundo. li elemento. Probaremos cada uno de ellos y cómo modifican el rendimiento..
El primer método, el más fácil, será apuntarlo claramente usando el seleccionado clase. Veamos que devuelve el perfilador de Firebug..
console.profile (); $ (". seleccionado"); console.profileEnd (); 
Y el resultado: 0.308ms. A continuación, prefijamos un nombre de etiqueta para restringirlo. De esta manera, podemos restringir nuestra búsqueda al primero apuntar solo a los elementos DOM seleccionados, con document.getElementsByTagName.
console.profile (); $ ("li.selected"); console.profileEnd (); 
Y el resultado: 0.291ms. Aproximadamente 0.02 ms afeitado. Esto es insignificante debido al hecho de que estamos probando en Firefox; Sin embargo, debe tenerse en cuenta que este aumento de rendimiento será notablemente mayor en los navegadores más antiguos, como Internet Explorer 6..
A continuación, descendemos del ID del elemento padre..
console.profile (); $ ("# someList .selected"); console.profileEnd (); 
Y el resultado: 0.283ms. Intentemos ser un poco más específicos. También especificamos el tipo de elemento además de la ID del antepasado.
console.profile (); $ ("# someList li.selected"); console.profileEnd (); 
Y el resultado: 0.275 ms. Otra pequeña parte afeitada. Por último, vamos a apuntarlo directamente usando una identificación para.
console.profile (); $ ("# mainItem"); console.profileEnd (); 
Y el resultado: 0.165ms. ¡Impresionante! Esto realmente muestra cuánto más rápido es ejecutar métodos nativos. Tenga en cuenta que mientras que los navegadores modernos pueden aprovechar las ventajas de getElementsByClassName, los navegadores más antiguos no pueden hacerlo, lo que resulta en un rendimiento mucho más lento. Siempre considera esto cuando codificas.
Sizzle, el motor de selección que utiliza jQuery, construido por John Resig, analiza los selectores de derecha a izquierda, lo que genera algunas cadenas de análisis inesperadas..
Considere este selector:
$ ("# someList .selected"); Cuando Sizzle encuentra un selector de este tipo, primero construye la estructura DOM, utilizando el selector como raíz, descarta los elementos que no tienen la clase requerida y, para cada elemento con la clase, verifica si su padre tiene un ID de alguna lista.
Para tener en cuenta esto, asegúrese de que la parte más a la derecha de su selector sea lo más específica posible. Por ejemplo, especificando li.selected en lugar de .seleccionado, se reduce el número de nodos que tiene que comprobar. Esta es la razón por la que el rendimiento saltó en la sección anterior. Al agregar restricciones adicionales, reduce efectivamente la cantidad de nodos que tiene que verificar.
Para ajustar mejor la forma en que se obtienen los elementos, debe considerar agregar un contexto para cada solicitud.
var someList = $ ('# someList') [0]; $ (". selected", someList); Al agregar un contexto, la forma en que se busca el elemento cambia completamente. Ahora, el elemento que proporciona el contexto. - alguna lista en nuestro caso: primero se busca, y una vez que se ha obtenido, se eliminan los elementos secundarios que no tienen la clase requerida.
Tenga en cuenta que generalmente es una buena práctica pasar un elemento DOM como el contexto de su selector jQuery. Usar un contexto es más útil cuando se almacena en alguna variable. De lo contrario, puede simplificar el proceso y usar find (), lo que jQuery, en sí mismo, hace bajo el capó..
$ ('# someList'). find ('. selected'); Me gustaría decir que el aumento de rendimiento estará claramente definido, pero no puedo. He ejecutado pruebas en varios navegadores y si el rendimiento del enfoque de ámbito supera al de la versión de vainilla depende de varios factores, incluido si el navegador admite métodos específicos.
Cuando navegas por el código de otra persona, a menudo encontrarás.
// Otro código $ (elemento) .doSomething (); // Más código $ (elemento) .doSomethingElse (); // Incluso más código $ (elemento) .doMoreofSomethingElse ();
Por favor no hagas esto. Siempre. El desarrollador está creando una instancia de este "elemento" una y otra vez. Esto es un desperdicio.
Veamos cuánto tiempo tarda en ejecutarse ese código tan horrible..
console.profile (); $ ("# mainItem"). hide (); $ ("# mainItem"). val ("Hello"); $ ("# mainItem"). html ("Oh, hey there!"); $ ("# mainItem"). show (); console.profileEnd (); 
Si el código está estructurado como el anterior, uno después del otro, puede usar el encadenamiento como sigue:
console.profile (); $ ("# mainItem"). hide (). val ("Hello"). html ("Oh, hey there!"). show (); console.profileEnd (); Mediante el encadenamiento, el elemento que se pasa inicialmente se adquiere y se pasa una referencia a cada llamada subsiguiente que reduce el tiempo de ejecución. De lo contrario, se creará un nuevo objeto jQuery cada vez..
Pero si a diferencia de lo anterior, las secciones que hacen referencia al elemento no son concurrentes, tendrá que almacenar el elemento en la caché y luego hacer todas las mismas operaciones que antes..
console.profile (); var elem = $ ("# mainItem"); elem.hide (); // Algún código elem.val ("Hola"); // Más código elem.html ("Oh, hey there!"); // Incluso más código elem.show (); console.profileEnd (); 
Como es evidente a partir de los resultados, el almacenamiento en caché o el encadenamiento disminuye considerablemente el tiempo de ejecución.
La sugerencia de una manipulación no tradicional de DOM en mi artículo anterior generó algunas críticas de algunas personas antes de demostrar que el aumento de rendimiento realmente vale la pena. Ahora lo probaremos nosotros mismos.
Para la prueba, crearemos 50. li elementos, y adjúntelos a la lista actual, y determine cuánto tiempo lleva.
Primero revisaremos el método normal e ineficiente. Básicamente, agregamos el elemento a la lista cada vez que se ejecuta el bucle..
console.profile (); var list = $ ("# someList"); para (var i = 0; i<50; i++) list.append('Vamos a ver cómo lo hizo, vamos?
Ahora, vamos a seguir un camino ligeramente diferente. Básicamente, agregaremos la cadena HTML requerida a una variable firs, y luego solo haremos que el DOM vuelva a fluir una vez..
console.profile (); var list = $ ("# someList"); var items = ""; para (var i = 0; i<50; i++) items += '
Como era de esperar, el tiempo empleado ha disminuido significativamente..
Si está utilizando jQuery como reemplazo de getElementById, pero nunca utiliza ninguno de los métodos proporcionados, entonces lo está haciendo mal..
Si desea ir más lejos, pregúntese si realmente necesita crear un nuevo objeto jQuery, todo con el propósito de apuntar a algún elemento. Si está utilizando jQuery como reemplazo de document.getElementById, pero nunca utiliza ninguno de sus métodos proporcionados, entonces lo está haciendo mal. En este caso, podemos salirnos con JS en bruto..
console.profile (); var list = document.getElementById ('someList'); var items = "; para (var i = 0; i<50; i++) items += 'Notará que la diferencia en el tiempo de ejecución entre el código optimizado y el código no optimizado se encuentra en la fracción de un rango de milisegundos. Esto se debe a que nuestro documento de prueba es muy pequeño con un número increíblemente pequeño de nodos. Una vez que comience a trabajar con sitios de nivel de producción con unos pocos miles de nodos en él, realmente se sumará.
También tenga en cuenta que en la mayoría de estas pruebas, simplemente estoy accediendo a los elementos. Cuando empieces a aplicarles funciones apropiadas, el delta en el tiempo de ejecución aumentará.
También entiendo que este no es el más científico de los métodos para evaluar el rendimiento, sin embargo, para tener una idea general de cuánto afecta cada uno de estos cambios al rendimiento, creo que esto es lo suficientemente adecuado.
Finalmente, en la mayoría de sus aplicaciones web, la velocidad de conexión y el tiempo de respuesta del servidor web en cuestión jugarán un papel más importante en el rendimiento de su aplicación más que los ajustes en el código que realizará. Sin embargo, esta información sigue siendo importante y lo ayudará a bajar de línea cuando trate de obtener el máximo rendimiento posible de su código..
Y hemos terminado. Algunos puntos a tener en cuenta cuando intenta optimizar su código; Esta no es la lista que abarca todos los ajustes, por supuesto, y los puntos no necesariamente se aplican a todas las situaciones. De cualquier manera, estaré observando atentamente los comentarios para leer lo que tiene que decir sobre el tema. ¿Algún error lo ves aquí? Déjame una línea abajo.
Preguntas? Cosas bonitas que decir? Criticas? Pulsa la sección de comentarios y déjame un comentario. Feliz codificacion!
