Author | Ali Entertainment Front-end Technology Expert-Murge
Editor in charge | Zheng Liyuan
Head picture | CSDN download from Visual China
The pursuit of the ultimate user experience is an eternal topic. No matter on the PC, mobile, or IOT, everyone is trying various technical solutions, such as increasing the second opening rate, reducing the white screen time and so on.
We, who are developing marketing activities on the OTT side, also face this challenge. Although there are mature technical solutions on both the PC side and the Mobile side, when it comes to the large screen side, many technical solutions cannot be copied completely due to the differences in terminals.
Looking back at Youku's user experience exploration on the OTT side, it has gone through three stages: webview period, custom kernel Blitz period, and weex stage.
Currently weex (RAX) is the main technical solution for OTT. It runs through the development of the entire front-end page. Whether it is active page, half-screen interaction, or resident page development, we all adopt this technical solution, which brings similar Compared with H5's page fluency, the user experience of the client is significantly improved.
development path
1. The webview period:
The active page is rendered using the native webview, which is barely enough in terms of performance experience. However, due to the weak hardware environment of OTT devices and the inability to customize extensions for video playback, the native webview has certain limitations.
2. Custom kernel period:
Blitz web engine is a set of rendering engine similar to webview. The engine has invested a lot of manpower in the early stage. In the later stage, due to the stagnation of the business adjustment engine, many performance requirements cannot be achieved, such as local caching and zcache intervention. In this process, we tried many solutions to improve the user experience, such as loading the page according to the timing of the page load, and then doing the overall display after the end, reducing the loading time, setting a 1% resolution background as a blur image; other optimization solutions such as: asynchronous loading js, lazy loading of images, preloading, etc., I tried all the ways the front-end could do, but the results were very small.
Performance optimization scheme: [loading time, preload, static file cache]
3. Weex period:
The widespread promotion of weex technology in Alibaba Group brings dawn to the OTT end. Client students tried to output the weex capabilities to the OTT end, and the final page performance experience changed qualitatively.
Due to the differences between the OTT end and the traditional end, the client students did a lot of differentiation during the introduction of weex. Such as the stripping of jscore (only andriod on the OTT side), the introduction of the focus engine (operating by the remote control on the OTT side), custom components and so on.
Performance optimization scheme: [first screen rendering effect, multi-screen scrolling display, video playback, image rendering]
weex implementation plan
1. Implementation steps:
• Increase the ability to visually build weex output (the original ARK platform only supports the output of H5 pages, and the platform side adds weex packaging capabilities), and weexize the original 40+ H5 components, which can solve 80% of the business scenario problems .
• Source code weex development, to solve 20% of customized scenarios, such as double 11 and other large-scale events and battles, this part is for customized source code development, switching the H5 source code development method to the weex technology stack.
2. Technical details:
• The difference between weex on OTT side, a picture is worth a thousand words.
• Visually build technical transformation plan
3. Related data:
• Data indicators: [page load improvement] [page rendering smooth] [user experience improvement]
4. Effect display:
• Full screen weex
• Half screen interaction
• Page APP
Build together
Export the Rax capabilities of the OTT end to Ali Group, and provide detailed development documents
After upgrading and optimizing the technology stack, weex has become the main development technology stack for Ali Entertainment's OTT end-front-end business. Compared with the HTML5 technology stack, weex has made great progress in stability and performance. Take page loading efficiency as an example. After using weex, the average page loading time is shortened by more than 50%, and the effect is remarkable.
更多精彩推荐
☞谷歌软件工程师薪资百万，大厂薪资有多高？
☞CSDN 创始人蒋涛：选择长沙作“大本营”，打造开发者中心城市
☞杜甫在线演唱《奇迹再现》、兵马俑真人还原……用AI技术打破次元壁的大谷来参加腾讯全球数字生态大会啦！
☞开放源码，华为鸿蒙HarmonyOS 2.0来了
☞20张图，带你搞懂高并发中的线程与线程池！
☞跨链，该怎么跨？
点分享点点赞点在看