Ya hay muchas formas de optimizar NG en línea. El núcleo se trata de los atributos internos del alcance de los observadores de $$. Hoy hablaré de otra cosa, la esencia permanece sin cambios porque esto es un defecto de Ng. Sin embargo, creo que mientras use los métodos apropiados, estos problemas aún se pueden evitar.
Introducción
AngularJS se abrevia como ng, que es un marco MVVM producido por Google. Esto mejora la eficiencia del desarrollo de los proyectos front-end (en la práctica, puede mejorar la eficiencia del desarrollo). Utiliza controladores, instrucciones y servicios para girar en torno a todo el proyecto, y utiliza DI único para resolver los problemas de llamadas antes de la tercera capa. Para obtener más detalles, consulte el análisis del código fuente NG que escribí antes.
La herida dura de Ng
Cuando se trata de fallas, primero debemos hablar sobre su principio de enlace de datos simple
El modelo definido en cada página en NG en realidad agregará un oyente al alcance actual. El contenedor interno es la matriz $$ Wachers. Mientras cualquier modelo en la página cambie, se activará el método $ Digest dentro del alcance. Buscará todos los modelos en el árbol de alcance actual a su vez para garantizar que los modelos de la página puedan obtener la sincronización de datos, por lo que esto requiere mucho tiempo. La declaración oficial es que cuando aparecen 2.000 oyentes en la página, el rendimiento de la página disminuirá significativamente. Por lo tanto, para mejorar el rendimiento de NG, debe comenzar desde este aspecto.
Consejo1: vinculación única
De hecho, alguien más ya ha dicho esto en línea. Aquí hay un nuevo uso. La versión 1.3.0+ de Ng ya ha proporcionado una sintaxis incorporada para respaldar la situación en la que el modelo solo está vinculado una vez. Vea el siguiente ejemplo:
código antiguo
La copia del código es la siguiente:
Hola
nuevo código
La copia del código es la siguiente:
Hola
Puede ver que la nueva sintaxis es agregar :: frente al modelo. Creo que esta sintaxis es mucho más conveniente que los complementos de terceros utilizados en línea.
La copia del código es la siguiente:
Tip2: $ alcance. $ Digest vs $ alcance. $ Aplicar
Creo que muchas personas están familiarizadas con el método $ aplicado. Generalmente se usa al ejecutar el código en el entorno NG, para garantizar que la sincronización de datos de la página, llame al método $ Aplicar después de la ejecución del código, active el Digest $ interno para verificar todos los modelos en el alcance. De hecho, esto se llama dentro, y solo algunos fragmentos de código se escriben a continuación.
La copia del código es la siguiente:
...
...
$ Rootscope. $ Digest
...
...
Todos ellos están llamando a $ Digest bajo el alcance de la raíz de $ Rootscope. Entonces, ¿cuál es la diferencia entre $ Digest con diferentes ámbitos? De hecho, la diferencia más importante es que
La copia del código es la siguiente:
$ Digest solo Búsquedas profundas Todos los modelos debajo de la persona que llama
Por lo tanto, en comparación con $ alcance, $ Rootscope, ahorra mucho tiempo para encontrar modelos.
Sin embargo, si desea asegurarse de la sincronización de todos los datos del modelo en la página, aún tiene que llamar a $ Rootscope, por lo que es mejor pensar qué datos deben sincronizarse antes de escribir el código.
Consejo3: Llame a Ng-Repeat lo menos posible
Ng-Repeat creará muchos oyentes de forma predeterminada, por lo que cuando el volumen de datos es grande, esto consume rendimiento de la página. Creo que NG-Repeat solo es necesario cuando necesita actualizar la lista de datos con frecuencia, de lo contrario sería un desperdicio poner a tantos oyentes allí. En este momento, puede usar el propio servicio $ interpolate de Ng para analizar un fragmento de código, similar a un motor de plantilla estática, que se basa principalmente en el servicio de análisis básico de Ng $ Parse, y luego asignar directamente estos fragmentos de código después de llenar los datos a un modelo de un solo tiempo.
Consejo4: Intente escribir sintaxis nativa en el comando
Aunque NG proporciona muchas instrucciones como Ng-Show y Ng Hide, su función es mostrar u ocultar un fragmento de código en función del verdadero y falso del modelo. Aunque puede implementar rápidamente los requisitos comerciales, estas instrucciones aún agregarán oyentes de forma predeterminada. Si estos fragmentos de código existen en una gran instrucción, la mejor manera es escribir métodos JQ similares como .show () y .Hide () en el enlace de instrucciones para controlarlo, lo que puede guardar el número de oyentes e instrucciones de eventos similares. Estos en realidad pueden unir eventos en instrucciones periféricas utilizando AddEventListener. De todos modos, antes de escribir código, es mejor pensar en cómo minimizar el número de oyentes, para que el rendimiento de la página pueda mejorarse exhaustivamente.
TIP5: Use filtros lo menos posible en la página
Al agregar filtros detrás del modelo en la página, esto hará que el modelo actual se ejecute dos veces en $ Digest, causando desechos de rendimiento innecesarios. La primera vez es cuando cambia la tarea de detección de observadores $$; La segunda vez ocurre cuando se modifica el valor del modelo, así que intente usar la sintaxis del filtro cuando esté en línea lo menos posible. Como lo siguiente afecta en gran medida el rendimiento de la página
Se recomienda utilizar el servicio $ filtro para llamar a una función de filtro en el fondo, lo que puede mejorar significativamente el rendimiento de la página. El código es el siguiente
La copia del código es la siguiente:
$ filtro ('filtro') (matriz, expresión, comparación);
Resumir
Los anteriores son algunos consejos para mejorar el rendimiento de los proyectos NG. Aunque NG es muy poderoso, el código irregular también destruirá su rendimiento. Por lo tanto, es mejor pensar en dónde no se necesitan los oyentes antes de escribir código.