Cómo comenzar rápidamente con VUE3.0: Ingrese al aprendizaje.
He estado buscando consejos sobre la optimización del rendimiento de jQuery para aligerar mi inflada aplicación web dinámica. Después de buscar en muchos artículos, decidí enumerar algunas de las mejores y más utilizadas sugerencias para optimizar el rendimiento. [Aprendizaje recomendado: video tutorial de jQuery]
1. Sugerencias de optimización del rendimiento del selector
1. Heredar siempre del selector #id
Esta es una regla de oro para los selectores de jQuery. La forma más rápida de seleccionar un elemento en jQuery es seleccionarlo por ID.
2. Usar etiqueta delante de la clase
El segundo selector más rápido en jQuery es el selector de etiquetas (como $('head')), porque proviene directamente del método nativo de Javascript getElementByTagName(). Por lo tanto, es mejor usar siempre etiquetas para modificar clases (y no olvide la ID más cercana).
El selector de clases en jQuery es el más lento porque atravesará todos los nodos DOM en el navegador IE. Intente evitar el uso de selectores de clases. Tampoco utilice etiquetas para modificar ID.
3. Utilice subconsultas
para almacenar en caché los objetos principales para uso futuro.
4. Optimice los selectores para adaptarse al modelo "de derecha a izquierda" de Sizzle
. Desde la versión 1.3, jQuery utiliza la biblioteca Sizzle, que es la misma que las versiones anteriores en el motor de selección. Las expresiones son muy diferentes. Reemplaza el modelo "de derecha a izquierda" por un modelo de "izquierda a derecha".
5.
De hecho, es más rápido usar find() en lugar de usar el contexto para buscar la función find(). Pero si una página tiene muchos nodos DOM, puede llevar más tiempo buscar hacia adelante y hacia atrás:
6. Utilice operaciones en cadena potentes. Usar
las operaciones en cadena de jQuery es más efectivo que almacenar en caché los selectores.
7. Escriba su propio selector
si usa selectores con frecuencia. su código, así que extienda el objeto $.expr[':'] de jQuery para escribir sus propios selectores.
2. Sugerencias para optimizar las operaciones DOM
8. Caché de objetos jQuery y
elementos
de caché que usa con frecuencia
9. Al insertar en el DOM, encapsule todos los elementos en un solo elemento.
luego actualice el DOM. Esta no es una práctica recomendada de jQuery, pero es necesaria para operaciones válidas de JavaScript. Las operaciones DOM directas son muy lentas. Cambie la estructura HTML lo menos posible.
10. Aunque jQuery no arroja excepciones, los desarrolladores también deben verificar los objetos.
Aunque jQuery no arroja una gran cantidad de excepciones a los usuarios, los desarrolladores no deben confiar en esto. jQuery generalmente ejecuta un montón de funciones inútiles antes de determinar si un objeto existe. Entonces, antes de hacer una serie de referencias a un objeto, primero debes verificar si el objeto existe.
11. Utilice funciones directas en lugar de funciones equivalentes.
Para un mejor rendimiento, debe utilizar funciones directas como .ajax() en lugar de .ajax() en lugar de .ajax(). No utilice .get(),.getJSON(). .getJSON(),.getJSON(),.post(), porque estos últimos llamarán a $.ajax().
12. Almacene en caché los resultados de jQuery para su uso posterior.
A menudo obtendrá un objeto de aplicación de JavaScript; puede usar App. para guardar los objetos que selecciona con frecuencia para uso
futuro
. olvídese de usar la función .data() para almacenar información.
14. Utilice la función de utilidad jQuery
. No olvide la función de utilidad jQuery simple y práctica. Mis favoritos son $.isFunction(), isA array() y isArray() y isArray() y .each().
15. Agregue la clase "JS" al bloque HTML
. Después de cargar jQuery, primero agregue una clase llamada "JS" al HTML $('HTML').addClass('JS'); Puedes agregar estilos CSS.
3. Sugerencias para optimizar el rendimiento de eventos
16. Aplazar a (ventana). Load
a veces usa (window).load A veces usa (window).load A veces usa (window).load() que $(document).ready. .() es más rápido porque este último no espera hasta que se hayan descargado todos los elementos DOM. Deberías probarlo antes de usarlo.
17. Utilice la delegación de eventos
cuando tenga muchos nodos en un contenedor y desee vincular un evento a todos los nodos, la delegación es muy adecuada para tales escenarios de aplicación. Al usar la delegación, solo necesitamos vincular el evento en el padre y luego ver qué nodo secundario (nodo de destino) desencadenó el evento. Esto resulta muy conveniente cuando tiene una tabla con muchos datos y desea configurar eventos en el nodo td.
18. Use la abreviatura de evento listo.
Si desea comprimir el complemento js y guardar cada byte, debe evitar usar $(document).onready()
4. Pruebe jQuery
19. Prueba unitaria de jQuery
La mejor manera de probar. El código JavaScript es para usar personas. Ven y prueba. Pero puede utilizar algunas herramientas automatizadas como Selenium, Funcunit, QUit, QMock para probar su código (especialmente complementos). Quiero discutir este tema en otro tema porque hay mucho que decir.
20. Estandarice su código jQuery.
Estandarice su código con frecuencia, vea qué consulta es más lenta y reemplácela. Puedes usar la consola Firebug. También puede utilizar las funciones de acceso directo de jQuery para facilitar las pruebas.
5. Otras sugerencias comunes de optimización del rendimiento de jQuery
21. Utilice la última versión de jQuery.
La última versión suele ser la mejor. Después de cambiar de versión, no olvide probar su código. A veces no es completamente compatible con versiones anteriores.
22. Usando HMTL5
El nuevo estándar HTML5 trae una estructura DOM más ligera. Una estructura más liviana significa que se requieren menos recorridos cuando se usa jQuery y un mejor rendimiento de carga. Así que utilice HTML5 si es posible.
23. Si desea agregar estilos a más de 15 elementos,
la mejor manera de agregar etiquetas de estilo directamente a los elementos DOM es usar la función css() de jQuey para diseñar algunos elementos. Sin embargo, al agregar estilos a más de 15 elementos, es más efectivo agregar etiquetas de estilo directamente al DOM. Este método evita el uso de código físico en el código.
24. Evite cargar código redundante.
Es una buena idea colocar código Javascript en diferentes archivos y cargarlos sólo cuando sea necesario. De esta manera no cargará código ni selectores innecesarios. También es fácil administrar el código.
25. Comprima en un archivo JS principal para mantener el número de descargas al mínimo.
Cuando haya determinado qué archivos deben cargarse, empaquetelos en un solo archivo. Utilice algunas herramientas de código abierto para hacerlo automáticamente, como usar Minify (integrado con su código back-end) o usar herramientas en línea como JSCompressor, YUI Compressor o Dean Edwards JS packer para comprimir archivos por usted. Mi favorito es JSCompressor.
26. Es genial usar Javascript nativo cuando sea necesario.
Usar jQuery es una gran cosa, pero no olvides que también es un marco para Javascript. Por lo tanto, puede utilizar funciones nativas de Javascript cuando sea necesario en el código jQuery, lo que puede lograr un mejor rendimiento.
27. Cargue el marco jQuery desde Google
Cuando su aplicación se lance oficialmente, cargue jQuery desde Google CDN, porque los usuarios pueden obtener el código en el lugar más cercano. De esta manera, puede reducir las solicitudes del servidor y, si el usuario navega por otro sitio web que también utiliza jQuery de Google CDN, el navegador llamará inmediatamente el código jQuery del caché.
28. Cargar contenido lentamente no solo puede mejorar la velocidad de carga, sino también mejorar la optimización SEO. Utilice Ajax para cargar su sitio web, lo que puede ahorrar tiempo de carga del lado del servidor. Puedes comenzar con un widget de barra lateral común.
[Aprendizaje recomendado: video jQuery, desarrollo web front-end]
¿Lo anterior es cómo optimizar el rendimiento de jQuery? Para obtener detalles sobre el resumen de los métodos de optimización, preste atención a otros artículos relacionados en el sitio web chino de PHP para obtener más información.
