Este artículo dura unos 10 minutos. Los pequeños desarrolladores de programas de Lewan Alliance son todos productos secos ~
Fondo de applet
Desde que se lanzó el Programa Play Mini el año pasado, establecí el objetivo de "experimentar con una experiencia exquisita similar a una aplicación", lo que sin duda es un desafío para una persona para desarrollar el Programa Mini.
Para lograr el objetivo, el "rendimiento de la página", la "experiencia de producto amigable" y el "servicio de sistema estable" se han convertido en mis principios de implementación más básicos.
La página de inicio es la cara de la mini aplicación, y su rendimiento está estrechamente relacionado con la tasa de retención de usuarios. Por lo tanto, a principios de 2020, realicé una actualización y renovación integral de la página de inicio de Lewan, profundizando en la plasticidad del rendimiento de pequeños programas de carga, renderizado y otras dimensiones.
Además, para mejorar la eficiencia de la investigación y el desarrollo, mientras la compañía agrega nuevas necesidades, está constantemente optimizando y transformando. Se puede decir que el applet de la alianza Lewan de hoy es completamente nuevo.
¿Qué es el alto rendimiento?
Cuando se trata de alto rendimiento, todos dirán: "La página se carga lo suficientemente rápido". Parece que la velocidad de carga se ha convertido en el estándar para un alto rendimiento, pero no es suficiente para cargar rápido.
Piénselo, la página se carga rápidamente, pero la imagen del carrusel se congela, el cuadro de búsqueda no es válido, el diseño de la página no es uniforme y estéticamente agradable, abra Laton, piense lo suficiente como para permitir que los usuarios pierdan. Por lo tanto, considerar la velocidad de carga por sí sola no es suficiente.
Análisis de rendimiento de fondo del applet
WeChat Mini Program también tiene indicadores de rendimiento:
- El tiempo de la primera pantalla no excede los 5 segundos;
- El tiempo de renderizado no supera los 500 ms;
- El número de llamadas por segundo
setDatano supera las 20 veces; setDataLos datos en elJSON.stringifyfuturo no superan los 256 kb;- El nodo de la página WXML es inferior a 1000, la profundidad del árbol de nodos es inferior a 30 capas y el número de nodos secundarios no es superior a 60;
- Todas las solicitudes de red devuelven resultados en 1 segundo;
Con estos datos, puede utilizar la herramienta de puntuación de experiencia de la herramienta de desarrollo (panel de `Auditorías`) para experimentar la puntuación, de acuerdo con las sugerencias de optimización dadas, ajustes específicos
En segundo lugar, también podemos analizar los datos de acuerdo con las tres dimensiones de la plataforma de gestión de applet , el asistente de applet y el rendimiento de la red.
A través de estas herramientas auxiliares, podemos hacer análisis detallados basados en las condiciones del sistema del cliente , modelo , entorno de red y fuente de acceso , que todavía es muy valioso.
Análisis de desempeño del Mini Programa de Lewan Alliance
1. El applet comienza demasiado lento.
Primero, analice la razón:
En esta etapa, pequeños programas (incluyendo el tiempo antes y después del inicio), WeChat completará en silencio las siguientes tareas:
1. Prepare el entorno operativo:
2. Descargue el paquete de código de applet:
3. Cargue el paquete de código de applet:
4. Inicialice la página de inicio del mini programa:
En este paso, la clave es controlar el tamaño del paquete de programa pequeño , lo que puede acortar efectivamente el tiempo de descarga (controlar el tamaño del paquete puede sentir intuitivamente la mejora del rendimiento del programa pequeño)
En segundo lugar, para controlar el tamaño del paquete, mi método habitual es:
1. Eliminación de archivos, funciones y estilos inútiles:
2. Reduzca los archivos de recursos estáticos en el paquete de código: se recomienda que los recursos estáticos como imágenes y videos se coloquen en el CDN
3. Lógica hacia atrás, racionalizar la lógica de negocios: en general, la lógica de presentación que no involucra computación front-end se puede mover hacia atrás de manera apropiada. Depende de ti discutir con tus compañeros de clase de back-end, darles los requisitos de transformación y tener cuidado de que te golpeen cada minuto (una broma) ... pero esto realmente puede ahorrar mucho código frontend, y muchas veces, lo que se encuentra después de conectarte en línea Problema También se puede resolver directamente en el back-end, sin revisión, y luego lanzar
4. Reutilice el complemento de plantilla:
5. Carga de subcontrato, parte de la página es h5
2. Tiempo de pantalla en blanco
La pantalla blanca durante este período de tiempo se compone principalmente de dos elementos:
Primero, analice la razón:
1. Tiempo de carga de recursos de red:
2. Tiempo de renderizado:
Segundo, ¿cuál es la solución?
1. Inicie la memoria caché local: cuando el usuario accede a la página, los datos devueltos por la última solicitud de interfaz pueden tomarse de la memoria caché primero y luego sobrescribirse cuando se completa la solicitud de red (pero tenga en cuenta que algunos datos oportunos no funcionarán, todavía depende Escenario de uso), Lewand no ha utilizado esto todavía. Use wx.getBackgroundFetchData para proporcionar una solución de datos de caché del lado del cliente proporcionada por WeChat. Documentación oficial https://developers.weixin.qq.com/miniprogram/dev/api/storage/background-fetch/wx.getBackgroundFetchData.html
2. Representación de tiempo compartido: al retrasar el tiempo de representación de elementos que no son clave, libere recursos para rutas de representación clave.
Se puede ver que el nuevo tablero de hoy se pospone intencionalmente para renderizar, de modo que los recursos son libres para renderizar la imagen del banner (hay muchas imágenes del banner en el pequeño programa de la alianza Lewan)
3. Las imágenes usan el formato webP: un formato de archivo de imagen introducido por Google que admite la compresión con pérdida / sin pérdida, y puede ser utilizado por estudiantes con recursos
4. Recorte y degradación de la imagen: Alibaba Cloud OSS se utiliza para Lewan
5. Carga diferida de imágenes, optimización de CSS Sprite: el menú del segundo nivel de la página de inicio de Leplay es usar la imagen Sprite, la etiqueta img del programa de carga de imágenes diferidas tiene lazy-load = "true"
6. Reduzca y cargue recursos de imágenes grandes: en Leplay, casi todas las imágenes grandes usan este método (vea el banner en la página de inicio) ( primero podemos renderizar imágenes borrosas muy comprimidas y usar un nodo oculto para cargar la imagen original, Después de cargar la imagen original, se transferirá al nodo real para su representación <image> ).
<! - banner.wxml -> < image src = "{{url}}" /> <! - 图片 加载 器-> < image style = "width: 0; height: 0; display: none" src = "{{preloadUrl}}" bindload = "onImgLoad" binderror = "onErrorLoad" />
métodos: { onImgLoad () { this .setData ({ url: this .originUrl // Carga la imagen original }) } }
Lo anterior es el código clave para degradar y cargar imágenes (tenga en cuenta que las etiquetas con estilos solo cargarán recursos de imagen, pero no renderizarán ) . display: none <image>
Reciclar temporizador de página de fondo
Este paso es especialmente crítico en el applet Leplay, que tiene bastantes requisitos de página para usar setInterval , setTimeout
Durante las horas pico, una página necesitará ejecutar diez temporizadores al mismo tiempo, por lo que debe limpiar manualmente la página (componente) y restaurar el temporizador en el momento. La devolución de llamada de un temporizador es insignificante, pero no se puede ignoraronHideonShowsetData
Evite operaciones repetidas de memoria en eventos frecuentes
1. onPageScroll Aceleración para devolución de llamada de eventos: aceleración de la función de referencia Throttle
2. Evite las operaciones intensivas de CPU, como los cálculos complejos;
3. Evite llamar o reducir la cantidad de datos: setData setDatadelete datos inútiles
4. Intente utilizar IntersectionObserver [24] en lugar de SelectorQuery [25] , el primero tiene menos impacto en el rendimiento;
Resumen
A través del análisis y la resolución de los problemas anteriores, el rendimiento del Lewand Mini Program ha mejorado considerablemente. Gracias al pequeño equipo del programa Jingxi por compartir información técnica, consulte el enlace https://mp.weixin.qq.com/s/nXModRImp4H7iisMQSc2Wg
Basado en los principios de arquitectura subyacentes de los applets, el camino para estudiar el rendimiento de los applets todavía es un largo camino. Seguiré trabajando duro en el camino de la investigación del desempeño y la mejora de la experiencia.
Finalmente, espero que este intercambio le brinde un pequeño valor de referencia.