[Desarrolladores] lo que el crecimiento no es en el desempeño de la trampa Vue.js

información del número de Yunqi: [ Haga clic para obtener más Noticias de la Industria ]
donde se puede encontrar información de diferentes industrias de primera mano sobre la nube, lo que estás esperando, ven!

amor del corazón I del juego, así que he estado ansioso por hacerse algunos juegos de video. Hace unos meses empecé este sueño en realidad, y por primera vez para participar en el concurso de juego global (Global Game Jam). Mi equipo y yo uso Vue.js construir un juego llamado "ZeroDaysLeft", en forma de una sola página Web aplicaciones finales. El juego es el tema de la protección del medio ambiente, tenemos en cuenta el impacto de las actividades comerciales en el medio ambiente global, que desee hacer una discusión útil sobre este tema. Uso Vue.js hacer que el juego no es mucho. Mi equipo era tarde un día, y luego elegir el marco que queremos utilizar un juego de adivinanzas dedo el camino, rápidamente terminamos el código y hacer una versión del juego se puede ejecutar al final del fin de semana. Cuando una prueba local de todo va bien. Naturalmente, estamos orgullosos de nuestro primer tiempo para escribir funciona el juego, y quiere compartirlo con el mundo.

Pero surge la pregunta - cuando construimos una aplicación buena y empezar a consultar campos, el consumo de memoria se echó mesa. Es casi imposible para funcionar correctamente, la máquina va a cambiar, no importa lo inmóvil pegado, incluso en sistemas de gran alcance basado en el programa de procesador Intel i7 se colgará. Juego límite de tiempo del torneo nos puso de nuevo a la realidad, decidimos dejar de lado los problemas de rendimiento de producción, por lo que al menos podemos hacer un juego completo se puede ejecutar en el dispositivo. Al igual que la mayor parte del proyecto "completado", al día siguiente nos ponemos en sus mentes.

Pero no podía dejar pasar. Siempre me ha molestado. El problema está en las Vue.js que? Netlify es él? O porque nuestros trucos de código? Tengo que averiguar.

Investigar la causa de la degradación del rendimiento

Yo era el primero en usar Faro de prueba rápida. Afortunadamente, Firefox tiene como objetivo proporcionar un navegador plug-in. Estos son los resultados que obtengo.

89% de la muy buena digital. De hecho, en comparación con muchos lugares de interés, este desempeño muy bien. Esta prueba identifica una serie de problemas potenciales, tales como la velocidad y el contenido de índice de la primera tiempo significativo y etapas de estiramiento, etc. En teoría, la solución de estos problemas se incrementará aún más el marcador, pero no necesariamente resolver los problemas de rendimiento de aplicaciones que se enfrenta graves.

Nuestro juego tiene algunas de las imágenes y los recursos materiales de audio, pero ambos no permitirá que el juego quede atascado en ese país. Podemos entonces otra vez sobre-optimización de estos recursos se han optimizado, pero esto puede simplemente hacer uso.

Esta prueba puede no permitirnos identificar la causa real del problema de rendimiento. Así que empecé a pensar: "Esto no va a ser un problema Vue, ¿verdad?" Esta idea no tendrá ninguna razón para salir, pero si no vigila es estúpida. Fui a ver el sitio de la consola se ha desplegado, el espacio en blanco resultado. Pero advirtió que a menudo no aparecen en la producción. Cuando realicé la misma operación en los planos local, pila Vue avisarme sorprendió.

Como la mayoría de los desarrolladores, no me importa mucho acerca de la advertencia de la consola, que son sólo una advertencia, y puede no reflejar el error; así que por lo general se centrará en otros lugares. Tal vez esa advertencia Puedo resolver problemas de producción, decidí estudiar más a fondo cada tema y solucionarlos.

Todas estas advertencias son de, para mostrar el componente de opción llamada Cards.vue I creado, por lo que los componentes pueden requerir una gran cantidad de reescritura.

Me decidí a la consola con el fin de resolver estas advertencias.

> [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
 found in 
 ---> <Cards> at src/components/Cards.vue

Vue.js tienen una gran cantidad de instrucción, de manera que podemos utilizar marco más intuitiva, v-por ejemplo, la matriz puede volverse rápidamente como una lista. Cuando se usa, necesitamos una tecla: para componentes efectivamente re-representación. Pero vamos a utilizar como un objeto clave, este es un valor que no es original, lo que resulta en este error. Decidí index.description utilizado como un duplicado de la llave, ya que es una cadena, y puede ser mejor que volver a hacer cuando cambia el valor.

> [Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.
found in
---> <Cards> at src/components/Cards.vue

Los cambios clave: a una cadena (index.description) para corregir un error, que puede resolver este error de clave duplicada. Podemos escribir el tipo de cadena DOM, por lo que cuando se pasa a un objeto renderizado convierte en cadena equivalente (es decir, [object Object]); y porque era la llave de la anterior, por lo cada objeto se convierte en [objeto objeto] (excepto para tener valores diferentes), y por lo tanto no será un duplicado de la llave de advertencia. Ahora que la clave no es el objeto, la advertencia desaparecerá, se mejorará la eficiencia.

> [Vue warn]: You may have an infinite update loop in a component render function.
found in
---> <Cards> at src/components/Cards.vue

Es una advertencia muy vaga, esta advertencia parece ser el más importante: una infinidad de medios de bucle que el consumo de memoria. Este mensaje no nos dice lo que el problema puede estar fuera, pero sí implica un problema con un componente en la función render relacionados. Tal vez sea porque escribimos el código es relativamente complicado, lo que desencadena los cambios en curso, y ocupan una gran cantidad de potencia de cálculo, tanto es así que los navegadores y dispositivos se bloquee.

Esta advertencia nos dice al menos para comprobar Cards.vue, así que mi primer pensamiento es la reacción del inspector de propiedades de montaje, ya que esto puede resultar en un error. propiedad reacción después de cambiar el disparador para volver a hacer.

Estamos index.days y mostrar datos en index.description. Pero no vamos a cambiar estos datos, obtenemos el índice de la matriz cardinfo.

Nosotros utilizamos este código para los elementos de matriz en orden aleatorio, a continuación, los primeros cuatro elementos de opciones de visualización para los jugadores elegir. Cuando el usuario hace clic en la opción de llamar a la función (), que calcula cómo una acción además de afectar el estado del juego, sino también el uso de la costura en el prototipo cardinfo borrar los cuatro primeros elementos de efectos.

En este marco utiliza virtual DOM de Vue, Pasa propiedades de reacción tales como cardinfo similares, siempre que el valor de los cambios de atributos de datos dará lugar a re-renderizado. En nuestra aplicación, vamos a utilizar directamente el prototipo sort () para cambiarlo, a continuación, elimine los elementos de reordenar. Todos estos desencadenar "ilimitado" re-prestados, causando una advertencia.

Decidí cambiar el filtrado de datos lógicos, y detener muchas veces para cambiar las propiedades de la reacción de cardinfo. He instalado lodash.shuffle y define un atributo calculado shuffledList (), se crea una copia de la lista cardinfo llamado. He aplicado la operación de ordenación aleatoria, y devuelve un "congelada" número, a continuación, se abrió para mostrar cuatro tarjetas. Utilizamos Object.freeze (), lo que nos permitirá devolver los objetos inmutables, por lo tanto re-renderizados detenido por completo todas las operaciones.

Hasta ahora, el problema ha sido resuelto.

Pit cayó en el marco de

Honestamente, cuando empecé a investigar las causas de la degradación del rendimiento, pero también se sienten definitivamente quiero para optimizar una gran cantidad de recursos para resolver el problema. Por último, los resultados sugieren que, al utilizar muchas marco abstracto que tenemos que ser muy cuidadosos - Esto es especialmente cierto en el Vue, sólo cuando es necesario utilizar alguna instrucción, y su uso no debe estar mal, ya que sin duda tienen su propio precio .

También me hizo pensar en otro trabajo que ha hecho, en el que las aplicaciones pueden ser innecesarios porque los problemas estructurales y de funcionamiento. La mayor parte del marco frontal moderno tiene una gran cantidad de abstracción, de manera que podamos hacer que sea más fácil para las aplicaciones Web. Pero hay que tener en cuenta el punto de que el uso de estas cosas podría conducir a problemas potenciales de rendimiento.

A menudo uso Vue.js, así que decidí explorar algunas de las instrucciones que he usado antes, cuando he utilizado estas instrucciones no se considera que pueda afectar al rendimiento de su aplicación trae. De los cuales tres son instrucciones muy popular en mi línea de visión.

• v-v si 和 presentas

Estas instrucciones se utilizan para hacer que los elementos de forma condicional, pero el mecanismo detrás de ellos es muy diferente, por lo que el uso es muy diferente. v-si inicialmente no se rinde componente, pero sólo si la condición es verdadera componentes de renderizado. Esto significa que cuando se cambia varias veces de montaje visibilidad, continuarán a volver a hacer. Si desea cambiar la visibilidad de múltiples componentes, no utilizar esta función. Esto afectará su rendimiento.

v-espectáculo es un buen sustituto. Independientemente de si se habilita CSS hará que sus componentes, pero sólo en función de la condición es verdadera o falsa para determinar si el componente es visible. Este enfoque tiene sus limitaciones, ya que no se brindará componentes no esenciales para posponer el tiempo que necesita en realidad ellos aparecen en la pantalla. Si su prestación inicial no es tan complicado, por lo que es muy apropiado.

• v-para

Esta instrucción se utiliza normalmente para hacer la lista de la matriz. Tiene una sintaxis especial, en forma de elemento de la lista, donde la lista es una matriz de fuentes de datos, y el artículo es un alias para iteración de los elementos de la matriz. Por defecto, Vue añadir observadores en la matriz de datos de origen, siempre que cambia se disparará re-representación. Esta constante re-renderizado rendimiento de las aplicaciones puede verse afectado negativamente. Si desea visualizar objetos, Object.freeze () es una buena solución que puede mejorar considerablemente el rendimiento. Pero asegúrese de tener en cuenta que usted no será capaz de componentes de actualización o editar los datos de objeto.

En el curso de este estudio me di cuenta, Faro posible comprobar de una manera más directa para afectar la experiencia del usuario rendimiento de las aplicaciones, por lo que mi siguiente pregunta es cómo hacer un seguimiento del rendimiento de aplicaciones en el servidor.

No somos demasiado dependientes de la intuición, no es en el supuesto de que los desarrolladores saben lo que están haciendo, sólo debe seguir las mejores prácticas? En cualquier caso, esta experiencia me ha enseñado el rendimiento de la aplicación de una sola página tenía un punto de vista diferente. Se puede ver el repositorio de estos proyectos en Github, sino también la bienvenida en Twitter y decir hola.

[Número de Yunqi de productos de las clases en línea] con técnicos expertos para compartir todos los días!
Cursos de Dirección: https://yqh.aliyun.com/zhibo

Parte de la comunidad, con la cara expertos para la cara, para mantenerse al tanto de las últimas novedades del curso!
[Número de comunidad de la clase en línea Yunqi] https://c.tb.cn/F3.Z8gvnK

Si usted encuentra que esta comunidad ha plagiado contenido, por favor envíe un correo electrónico a: [email protected] al informe, y proporcionar pruebas pertinentes, una vez verificado, esta comunidad retirará de inmediato el contenido presuntamente infractor.

Original enlace de
este artículo contenido original Yunqi comunidad no puede ser reproducido sin permiso.