Página especial de iQiyi H5 para crear prácticas de optimización de experiencias nativas

Wuhan Yuan Chuanghui regresa, hablemos de modelos grandes el 20 de abril”

Antecedentes del proyecto

Los temas especiales y las páginas de eventos de H5 siempre han sido una forma importante de promover los dramas de la empresa y atraer nuevos usuarios a la aplicación. Desempeñan un papel vital en diversos campos comerciales. Al mismo tiempo, también existen algunas deficiencias que han sido ampliamente criticadas. Por ejemplo, la página se abre lentamente, se produce el fenómeno de la pantalla blanca, la barra de título en la parte superior del terminal H5 está separada del contenido de la página, etc. Cooperamos profundamente con el equipo de webview en estos temas, nos comunicamos y probamos varias soluciones, enfocándonos en optimizar la experiencia del usuario y el rendimiento de la página. Hasta ahora hemos logrado algunos avances y ahora compartimos algunas experiencias prácticas con todos para su referencia.

Optimización del rendimiento

El proceso de carga y renderizado de la divertida página especial H5 es aproximadamente el siguiente:

Hemos explorado y optimizado cada enlace y algunos de ellos han logrado buenos resultados.

1. Almacenamiento en caché sin conexión de recursos públicos

Un usuario puede visitar páginas H5 creadas por múltiples plataformas divertidas. Hay muchos códigos idénticos en páginas con contenido diferente. Muchos de ellos son recursos estáticos con alta reutilización, baja frecuencia de cambios y volumen total controlable. Como JSSDK, React, Vue, nuestro tiempo de ejecución e incluso algunos componentes altamente reutilizables. Esta parte de la diversión ocupa casi 500k (antes de gzip). Estos códigos son ideales para el almacenamiento a largo plazo en el teléfono del usuario para evitar cargas repetidas.

Adoptamos la solución de almacenamiento en caché sin conexión proporcionada por el equipo de webview, que tiene muchas ventajas:

Admite entrega previa, los usuarios pueden usar el caché local cuando acceden a H5 por primera vez, en lugar de la necesidad tradicional de ingresar al caché por segunda vez;
Existen mecanismos y herramientas de actualización completos, y la operación y el mantenimiento son convenientes;
Ha experimentado una gran cantidad de verificaciones de proyectos en línea y tiene una alta confiabilidad.

Comparación antes de la optimización (izquierda) y después de la optimización (derecha):

Se ha verificado que el rendimiento mejora significativamente después de la optimización y cuanto peor es la red, más obvia es la velocidad de la primera pantalla.

Diagrama de principios de almacenamiento en caché sin conexión de Webview

Antecedentes de gestión de caché sin conexión

2. Representación previa de la plantilla

La renderización previa de plantillas es un gran avance en nuestra cooperación con el equipo de webview . Después de iniciar la aplicación, la vista web se inicializa para cargar la plantilla. nombre de dominio específico divertido + un logotipo específico (pr=1) Se utilizará el modo de renderizado previo de la plantilla, solicitando los datos de la página bundle.js de acuerdo con reglas específicas, ejecutando js para integrar los datos con la plantilla y luego renderizando la página. Si no hay parámetros específicos, se adoptará la solución normal fuera de línea.

En la actualidad, esta solución se ha utilizado en ambos extremos y el rendimiento general ha mejorado en aproximadamente un 60% y el efecto de optimización es obvio.

	Tasa de aciertos antes del renderizado	Se reduce el tiempo de la primera pantalla
iPhone	55%	57%
teléfono	51%	60%

Esta solución aún se está optimizando, por ejemplo, mejorando aún más la tasa de aciertos previos al renderizado.

3.Reproductor nativo integrado H5

Este es otro avance importante en nuestra cooperación con el equipo de webview. A través de tecnologías como la representación en la misma capa, el reproductor nativo iQiyi está integrado en la página H5, lo que alinea nuestra experiencia de reproducción con la nativa y al mismo tiempo garantiza que el reproductor nativo esté dentro del H5. El desplazamiento suave y el cambio de contenido también admiten más experiencias de calidad de imagen, como películas 4K y con calidad de fotograma. Ahora está en línea en ambos extremos.

4. Carga de pantalla dividida

El divertido tema H5 es una página operativa que se compone de componentes comerciales. En términos generales, los componentes que se muestran en la parte superior de la página son los más importantes.

Por lo tanto, implementamos una solución de carga en pantalla dividida. El tiempo de ejecución comienza a cargar otros componentes después de cargar los componentes de la primera pantalla. Hasta cierto punto, esto es ceder artificialmente la velocidad de Internet a contenidos de alta calidad.

Efecto de optimización:

Con base en las estadísticas anteriores, suponiendo que no hay mucha diferencia en la cantidad de recursos de cada componente, podemos concluir aproximadamente que la carga en pantalla dividida reduce la carga del componente en la primera pantalla en aproximadamente un 60%.

5. Simplificación previa de la interfaz empresarial

Además de reducir la cantidad de componentes cargados, también se deben optimizar los complementos dentro de los componentes. La distribución de dependencia de los componentes estadísticos divertidos se muestra a continuación:

Después del seguimiento y análisis, los datos devueltos por la interfaz empresarial también tienen puntos de optimización. Por ejemplo, para los bits de recursos más utilizados, los datos devueltos por una interfaz son aproximadamente 30k, pero el front-end solo necesita 5k. No solo la interfaz de bits de recursos, sino también una gran cantidad de interfaces generales se encuentran en una situación similar.

Por lo tanto, optimizamos la interfaz en la capa de nodo y eliminamos los campos que no utiliza el cliente, garantizando al mismo tiempo la versatilidad.

A continuación se muestra una lista condensada de funciones que forman parte del mismo.

Efecto: después de la optimización, el tamaño de un solo componente se puede reducir en 25 k. Según 10 componentes en una página normal, el tamaño total de la página se reduce en aproximadamente 250 k.

6. webp optimiza imágenes

La tasa de penetración de webp ya es bastante alta y el efecto de optimización también es obvio. Sin embargo, las páginas operativas H5 son diferentes de las páginas tradicionales desarrolladas manualmente. La mayoría de estas imágenes las cargan los propios estudiantes operativos y no se pueden comprimir de antemano en el proyecto. No podemos exigirles que compriman imágenes antes de cargarlas, ni es adecuado comprimir imágenes automáticamente a webp al cargarlas. Debido a que algunos modelos antiguos no son compatibles con webp. Por lo tanto, determinamos dinámicamente en el navegador que aquellos que soportan webp irán a la versión webp solicitada por CDN.

Ejemplo de solicitud de una versión webp de una imagen (agregue caplist=webp después de la URL):

Ejemplo de código:

Efecto: después de la comparación, una imagen de 500k comúnmente utilizada en operaciones solo cuesta 130k para webp con la misma calidad. Incluso en el caso de una red rápida, la velocidad de representación de imágenes en la primera pantalla sigue siendo muy obvia.

Optimización de la experiencia

1. Establecer la barra de título

Cuando abre una página H5 tradicional, verá una barra de título nativa blanca o negra en la parte superior. Esto parece incompatible con el color del tema de la página H5 y tiene una fuerte sensación de fragmentación. Usamos el método setToolColor proporcionado por webview para configurar el texto y el color de fondo de la barra de título en la terminal. Así es como se logra una apariencia visual completa.

Representación:

En la imagen de la izquierda, si la barra de título no está configurada, la parte superior del ios es blanca, pero en el lado de Android será negra, que está separada de la página en la imagen de la derecha, después de la configuración; la barra de título, toda la página tendrá una experiencia más inmersiva.

Ocultar barra de título:

Cuando la parte empresarial necesita crear una navegación de título personalizada o no necesita una barra de título al implementar una página H5, la barra de título se puede ocultar directamente agregando el parámetro qyc-title-hide=1 o hideNav=1 a la URL interna. la página H5 Implemente su propia barra de título. Haga que la presentación de la página esté más integrada.

Ejemplo: http://pages.iqiyi.com/m/qt/63x0bbnx.html?qyc-title-hide=1

Representación:

A la derecha está la navegación superior implementada dentro de H5 después de eliminar la barra de título nativa, lo que hace que la página sea más tridimensional y completa.

2. Admite el efecto de actualización desplegable

En el pasado, si nuestra página H5 quería actualizar los datos de la página en el terminal, generalmente solo podíamos agregar botones a la página o regresar y volver a ingresar a la página. Ahora podemos agregar el parámetro qyc-support-refresh=1 después de la URL de la página para lograr el efecto de actualización desplegable. El usuario no tiene que salir, logrando una experiencia interactiva desplegable nativa.

Ejemplo: https://pages.iqiyi.com/m/zy/63x0bdru.html?qyc-pr=1&qyc-body-bgc=007bc2&qyc-support-refresh=1

3. Establezca el color de fondo del menú desplegable de la página.

La página de vista web tradicional tiene un fondo blanco después de ser desplegable, lo que tiene una apariencia deficiente. Podemos configurar el color de fondo de la página mediante el método update_titlebar_style proporcionado por webview. Cuando el usuario abre la página, el fondo blanco no será. desplegado. La página es más inmersiva.

Representación:

Después de bajar en el lado izquierdo, la página y la navegación parecen estar muy separadas. Después de configurar el color de fondo de la vista web en el lado derecho, la página se vuelve más completa después de bajar.

4. Establezca el color de fondo predeterminado de la vista web.

La pantalla blanca siempre ha sido una de las principales razones por las que los operadores de productos rechazan H5. Permite a los usuarios escapar de la experiencia nativa de un vistazo. En el pasado, era demasiado tarde para configurar el color de fondo a través de js después de abrir la página. Para resolver este problema, agregamos el parámetro qyc-body-bgc después de H5url y hacemos coincidir el valor del color de fondo de la página, como por ejemplo: qyc-body-bgc=5671c8 ; Se inicia la vista web. Esto elimina la visualización de la pantalla en blanco y mejora aún más la experiencia de la página.

Ejemplo: https://pages.iqiyi.com/m/xj/wswj.html?qyc-pr=1&qyc-body-bgc=7071a9

Representación:

Puede ver que cuando escanea el código QR por primera vez para ingresar a la página, hay una pantalla blanca en el lado derecho, mientras que el color de fondo en el lado izquierdo se ha preestablecido para mejorar la experiencia del usuario.

5. Optimización previa a la ocupación

H5网页在加载过程中，会频发触发relayout。而传统APP进去时，页面结构布局已经确定，不会频繁变化。

对此，我们会提前保存图片宽高，从而避免后期图片加载时导致布局频繁变化。

示例：

6.图片加载体验

内容图片加载时增加背景色，同时封面图片增加淡入动画。这样能提高整个页面的品质感，和传统H5的印象区别开来。

效果图：

最终效果展示

经过性能和体验双重优化，H5页面最终效果如下：

右侧为优化后效果，初期没有白屏，整体呈现更流畅快速。

总结

我们通过一系列关键技术的研究与实践，包括资源离线化、模板预渲染、内嵌本地播放器，以及对原生控件，如标题栏的精细控制和H5控制webview背景等手段，持续进行深度优化。使得专题页不仅在感官体验上实现了显著的提升，同时在性能指标方面也取得了较好成果。同时，我们也认识到，仍然存在进一步优化的空间，以及更多新的方法等待我们不断探索。我们将持续与webview团队深度协作，积极尝试更多前沿可能性，以进一步提升用户体验并推动创新。