Autor | Ali Entertainment Experto en tecnología front-end-Murge
Editor a cargo | Zheng Liyuan
Imagen de la cabeza | Descarga de CSDN de Visual China
La búsqueda de la mejor experiencia de usuario es un tema eterno. No importa en la PC, el dispositivo móvil o IOT, todos están probando varias soluciones técnicas, como aumentar la segunda tasa de apertura, reducir el tiempo de pantalla blanca, etc.
Nosotros, que estamos desarrollando actividades de marketing en el lado OTT, también nos enfrentamos a este desafío. Aunque tanto el lado del PC como el lado móvil tienen soluciones técnicas maduras, cuando se trata del lado de la pantalla grande, muchas soluciones técnicas no se pueden copiar completamente debido a las diferencias en los terminales.
Mirando hacia atrás en la exploración de la experiencia del usuario de Youku en el lado OTT, ha pasado por tres etapas: período de vista web, período de Blitz del kernel personalizado y etapa weex.
Actualmente weex (RAX) es la principal solución técnica para OTT. Se ejecuta a través del desarrollo de toda la página de inicio. Ya sea una página activa, interacción de media pantalla o desarrollo de página residente, todos adoptamos esta solución técnica, que trae En comparación con la fluidez de la página de H5, la experiencia del usuario del cliente mejora significativamente.
camino de desarrollo
1. El período de visualización web:
La página activa se procesa utilizando la vista web nativa, que es apenas suficiente en términos de experiencia de rendimiento. Sin embargo, debido al entorno de hardware débil de los dispositivos OTT y la imposibilidad de personalizar las extensiones para la reproducción de video, la vista web nativa tiene ciertas limitaciones.
2. Período de kernel personalizado:
El motor web Blitz es un conjunto de motores de renderizado similar a webview. El motor ha invertido mucha mano de obra en la etapa inicial. En la etapa posterior, debido al estancamiento del motor de ajuste empresarial, no se pueden cumplir muchos requisitos de rendimiento, como el almacenamiento en caché local y la intervención zcache. En este proceso, probamos muchas soluciones para mejorar la experiencia del usuario, como cargar la página de acuerdo con el tiempo de carga de la página, y luego hacer la visualización general después del final, reduciendo el tiempo de carga, configurando un fondo de resolución del 1% como una imagen borrosa; otras soluciones de optimización como: carga asincrónica js, carga diferida de imágenes, precarga, etc., intenté todas las formas en que podía hacerlo el front-end, pero los resultados fueron muy pequeños.
Esquema de optimización del rendimiento: [tiempo de carga, precarga, caché de archivos estáticos]
3. Período de Weex:
La promoción generalizada de la tecnología weex en Alibaba Group trae el amanecer al final de OTT. Los estudiantes de los clientes intentaron enviar las capacidades weex al extremo OTT, y la experiencia de rendimiento de la página final cambió cualitativamente.
Debido a las diferencias entre el extremo OTT y el extremo tradicional, los estudiantes clientes hicieron una gran diferenciación durante la introducción de weex. Como la eliminación de jscore (solo andriod en el lado OTT), la introducción del motor de enfoque (que funciona con el control remoto en el lado OTT), componentes personalizados, etc.
Esquema de optimización del rendimiento: [efecto de renderizado de la primera pantalla, visualización de desplazamiento de varias pantallas, reproducción de vídeo, renderizado de imágenes]
plan de implementación weex
1. Pasos de implementación:
• Aumentar la capacidad de generar visualmente resultados weex (la plataforma ARK original solo admite la salida de páginas H5, y el lado de la plataforma agrega capacidades de empaquetado weex) y eliminar los componentes originales de 40+ H5, que pueden resolver el 80% de los problemas del escenario empresarial .
• Desarrollo de código fuente weex, para resolver 20% de escenarios personalizados, como doble 11 y otros eventos y batallas a gran escala.Esta parte está dirigida al desarrollo de código fuente personalizado, cambiando el método de desarrollo de código fuente H5 a la pila de tecnología weex.
2. Detalles técnicos:
• La diferencia entre weex en el lado OTT, una imagen vale más que mil palabras.
• Construir visualmente un plan de transformación técnica
3. Datos relacionados:
• Indicadores de datos: [mejora de la carga de la página] [reproducción de la página sin problemas] [mejora de la experiencia del usuario]
4. Pantalla de efectos:
• Weex de pantalla completa
• Interacción de media pantalla
• Aplicación de página
Construir juntos
Exporte las capacidades de Rax del extremo OTT a Ali Group y proporcione documentos de desarrollo detallados
Después de actualizar y optimizar la pila de tecnología, weex se ha convertido en la principal pila de tecnología de desarrollo para el negocio de front-end OTT de Ali Entertainment. En comparación con la pila de tecnología HTML5, weex ha logrado un gran progreso en estabilidad y rendimiento. Tomemos como ejemplo la eficiencia de carga de la página: después de usar weex, el tiempo medio de carga de la página se reduce en más del 50% y el efecto es notable.
更多精彩推荐
☞谷歌软件工程师薪资百万，大厂薪资有多高？
☞CSDN 创始人蒋涛：选择长沙作“大本营”，打造开发者中心城市
☞杜甫在线演唱《奇迹再现》、兵马俑真人还原……用AI技术打破次元壁的大谷来参加腾讯全球数字生态大会啦！
☞开放源码，华为鸿蒙HarmonyOS 2.0来了
☞20张图，带你搞懂高并发中的线程与线程池！
☞跨链，该怎么跨？
点分享点点赞点在看