Por más dudas que tengamos sobre la forma de pequeños programas, es innegable que se han integrado en todos los aspectos de nuestra vida, operaciones como salir a tomar un taxi, escanear códigos, pedir comida para llevar e incluso recolectar energía son todas realizado por pequeños programas. La razón detrás de esto es que el applet es suficientemente liviano, conveniente y multiplataforma, brindando a los usuarios funciones ricas y una experiencia de usuario de alta calidad.
En esencia, la clave de un applet que puede tener una experiencia nativa es el mecanismo de renderizado rápido, que juega un papel vital. Aquí exploramos el proceso de implementación del mecanismo de renderizado rápido, así como el papel de la tecnología de renderizado de doble subproceso y WebView en él.
1. Proceso de implementación de renderizado rápido
La representación rápida de applets pasa principalmente por las siguientes cuatro etapas: análisis y compilación, precarga, representación de página y dibujo y visualización.
1. Analizar y compilar
Cuando el usuario abre el subprograma, el marco del subprograma primero analiza y compila el código del subprograma. Este proceso incluye convertir el código del applet en instrucciones ejecutables y generar las estructuras de datos correspondientes, como un árbol de páginas y un árbol de componentes. El proceso de análisis y compilación lleva una cierta cantidad de tiempo, pero puede mejorar en gran medida la eficiencia en la presentación de páginas posteriores.
2. Precarga
Después de analizar y compilar, el marco del applet está precargado. La precarga se refiere a la carga de recursos que pueden necesitar usarse con anticipación, como imágenes y archivos de estilo, antes de que el usuario ingrese a una página específica. Mediante la precarga, los applets pueden reducir el tiempo de carga y mejorar la velocidad de visualización cuando los usuarios cambian de página.
3. Representación de página
Cuando el usuario ingresa a una página específica, el marco del applet muestra el árbol de la página y el árbol de componentes en la pantalla. El proceso de renderizado incluye calcular la posición y el tamaño de cada componente, aplicar estilos y diseños, y generar las instrucciones de dibujo finales.
4. Dibujo y exhibición
El marco del applet envía las instrucciones de dibujo obtenidas de la renderización al sistema de gráficos subyacente para el dibujo. El sistema gráfico convierte los comandos en imágenes y las muestra en la pantalla.
En segundo lugar, las ventajas de la tecnología de doble hilo.
En la renderización rápida de applets, la tecnología de doble hilo juega un papel clave. En el desarrollo web tradicional, la representación de páginas y la ejecución de JavaScript se completan en el mismo hilo, lo que genera el problema de la influencia mutua entre la representación y la ejecución de JavaScript. El applet presenta tecnología de doble subproceso, que separa el procesamiento y la lógica en diferentes subprocesos, mejorando así la velocidad y la eficiencia del procesamiento.
La tecnología de doble subproceso mencionada aquí incluye subprocesos de representación e hilos lógicos.
1. Hilo de representación
El subproceso de representación es responsable de la representación y el dibujo de la página, analizando y compilando el código del subprograma, construyendo el árbol de la página y el árbol de componentes, y representándolos en la pantalla. El subproceso de representación trabaja en estrecha colaboración con el sistema de gráficos subyacente y utiliza tecnologías como la aceleración de hardware para dibujar páginas rápidamente. Al separar las tareas de representación en subprocesos independientes, el subproceso de representación puede centrarse en dibujar la página sin verse afectado por el subproceso lógico, lo que mejora la eficiencia de representación.
Todas las tareas relacionadas con la representación de la interfaz se ejecutan en el subproceso WebView, y las interfaces que se representan se controlan a través del código de la capa lógica. Un programa pequeño tiene varias interfaces, por lo que hay varios subprocesos de WebView en la capa de representación.
2. Hilo lógico
El subproceso lógico es responsable de manejar la lógica y la interacción del applet. Ejecuta el código JavaScript del subprograma, maneja la entrada y los eventos del usuario y actualiza el estado de la página. El subproceso lógico se comunica con el subproceso de representación a través de un mecanismo de mensajes. Cuando el subproceso lógico tiene nuevas instrucciones o actualizaciones de datos, enviará un mensaje al subproceso de representación, activando actualizaciones de página y re-representación. Al separar la lógica y renderizar en diferentes subprocesos, los subprocesos lógicos se pueden ejecutar de forma independiente sin bloquear el procesamiento de la página, lo que garantiza una respuesta rápida y una experiencia interactiva fluida del subprograma.
La aplicación de la tecnología de doble subproceso permite que los applets realicen el procesamiento lógico y de procesamiento en paralelo, lo que mejora la eficiencia general del procesamiento y la experiencia del usuario. Al mismo tiempo, a través del mecanismo de comunicación del mensaje, se realiza el desacoplamiento de la representación y la lógica, para que los desarrolladores puedan procesar y optimizar con mayor flexibilidad el código de representación y lógica de los applets.
3. El papel del hilo WebView
A partir de la tecnología de doble subproceso, podemos ver que hay subprocesos WebView, pero cuando escribimos la vista de página del subprograma, parece que no nos importa WebView, así que, ¿qué es WebView? ¿Qué hace por nosotros el applet View view layer?
En la representación rápida de applets, WebView juega un papel importante. WebView es un componente que incorpora contenido web en aplicaciones móviles y proporciona un contenedor que puede mostrar contenido web.
1. Mostrar la página del applet
Las páginas del applet se muestran a través de WebView. Cuando el usuario abre el subprograma o cambia a una página diferente, el marco del subprograma representará la página correspondiente en WebView, para que el usuario pueda ver el contenido de la página. WebView proporciona un método de visualización flexible, que puede admitir operaciones como el desplazamiento y el zoom de las páginas del subprograma.
2. Analice y ejecute el código del applet
WebView puede analizar y ejecutar el código del subprograma y convertir el código en instrucciones ejecutables. Proporciona un entorno de ejecución de JavaScript que permite que los subprogramas se ejecuten e interactúen. A través de WebView, los applets pueden lograr actualizaciones de página dinámicas y efectos interactivos.
3. Proporcionar función de acceso a la red.
WebView tiene la capacidad de acceso a la red y puede cargar recursos de red en applets, como HTML, CSS, archivos JavaScript, imágenes, etc. A través del acceso a la red, el applet puede obtener datos remotos y mostrarlos en WebView. La función de acceso a la red de WebView proporciona subprogramas con la capacidad de interactuar con el servidor y actualizar datos.
4. Admite las funciones del marco de applet
WebView implementa varias funciones del marco del subprograma en la parte inferior, como el enlace de datos, el procesamiento de eventos, la representación de componentes, etc. Puede mostrar correctamente el contenido de la página al usuario de acuerdo con la lógica y las reglas de interacción del subprograma. WebView proporciona una interfaz interactiva con el marco de subprogramas, lo que permite que los subprogramas se comuniquen e interactúen con WebView, realizando enlaces de datos bidireccionales, monitoreo y activación de eventos, y otras funciones.
Cabe señalar que, dado que WebView es un componente integrado, su rendimiento y capacidades de representación también pueden verse limitadas por dispositivos y navegadores. Por lo tanto, el marco del applet generalmente optimiza WebView para mejorar la velocidad de representación y la experiencia del usuario. Por ejemplo, reducimos el tiempo de análisis y compilación de WebView y aceleramos la velocidad de representación de la página precompilando el código del subprograma, la actualización incremental y el mecanismo de almacenamiento en caché y otras medidas de optimización.
El mecanismo de renderizado rápido de los applets permite que la mayoría de los desarrolladores de applets utilicen estos mecanismos y tecnologías para optimizar el rendimiento de renderizado de los applets y proporcionar una experiencia de usuario más fluida.
Cómo aprovechar al máximo el valor de subprocesos duales de pequeños programas en investigación y desarrollo móvil
En el contexto de que cada vez más productos en investigación y desarrollo móvil prestan especial atención a la experiencia del usuario, los programas pequeños también se han convertido en una herramienta importante para llevar servicios. Además de enumerar nuestros miniprogramas de desarrollo propio en plataformas como WeChat y Alipay, el modelo de desarrollo de "miniprogramas nativos +" también se ha convertido en otra opción para la investigación y el desarrollo móvil. Puede hacer que su propia aplicación ejecute sus propios programas pequeños como WeChat y Alipay.
La tecnología de contenedor de applets puede ayudar a las empresas o desarrolladores individuales a hacer que sus propias aplicaciones tengan la capacidad de ejecutar applets, y solo necesitan integrar el SDK de FinClip para tener rápidamente la capacidad de ejecutar applets.
Además, el SDK de FinClip es extremadamente liviano y el tamaño del SDK solo aumenta en menos de 3 MB después de integrar la aplicación. Al mismo tiempo, FinClip admite la sintaxis WXML del subprograma WeChat, lo que significa que el código del subprograma WeChat se puede reutilizar directamente en FinClip sin desarrollo secundario, y la experiencia es consistente con la de WeChat.
Si bien hemos estado prestando atención a mejorar la eficiencia del desarrollo de aplicaciones móviles, los usuarios están prestando cada vez más atención a la experiencia de la aplicación. Cómo mejorar la experiencia de la aplicación también merece la atención de los desarrolladores.