OTT端性能优化建设之Weex实践之路 | 《优酷OTT互联网大屏前端技术实践》第三章

简介: 追求极致的用户体验是个永恒的话题。无论在PC端、移动端,还是IOT端,大家都在尝试着各种技术方案,如提高秒开率,降低白屏时间等等。在OTT端进行营销活动开发的我们,也面临这一挑战,尽管PC端和Mobile端都有成熟的技术方案,但是到了大屏端,由于终端的差异性,很多技术方案不能完全照搬照抄。回顾优酷在OTT端的用户体验探索之路,经历了三个阶段:webview时期、自定义内核Blitz时期、weex阶段。

上一章:OTT端登录态设备穿透:扫码登录与扫码反登录 | 《优酷OTT互联网大屏前端技术实践》第二章>>>

下一章:OTT端技术赋能之前端收单能力建设 | 《优酷OTT互联网大屏前端技术实践》第四章>>>

点击免费下载
《优酷OTT互联网大屏前端技术实践》>>>

test

作者| 阿里巴巴文娱技术 默吉

追求极致的用户体验是个永恒的话题。无论在PC端、移动端,还是IOT端,大家都在尝试着各种技术方案,如提高秒开率,降低白屏时间等等。
在OTT端进行营销活动开发的我们,也面临这一挑战,尽管PC端和Mobile端都有成熟的技术方案,但是到了大屏端,由于终端的差异性,很多技术方案不能完全照搬照抄。
回顾优酷在OTT端的用户体验探索之路,经历了三个阶段:webview时期、自定义内核Blitz时期、weex阶段。

当前weex(RAX)是OTT端的主要技术方案,它贯穿着整个前端页面的开发,无论是活动页面、半屏互动,还是常驻页面的开发,我们都采用这种技术方案,它带来了类似客户端的用户体验,相对H5的页面流畅度,体验效果上有明显的提高。

一、发展历程

1、webview时期:

活动页面采用原生的webview进行渲染,性能体验上勉强够用,但由于OTT设备多为弱硬件环境,而且在视频播放这块无法得到定制扩展,所以原生的webview有一定受限。

image.png

2、自定义内核时期:

Blitz web引擎是一套类似webview的渲染引擎。引擎前期投入人力很大,后期由于业务的调整引擎处于停滞状态,很多性能需求无法实现,如本地缓存,zcache介入等。在这个过程中我们尝试了很多提升用户体验的方案,如根据页面load加载时机,结束后再做整体展示,减少loading时间,设置1%分辨率的背景作为模糊图;其它优化方案如:异步加载js、懒加载图片、预加载等等,前端能做的方式都尝试了一遍,但结果都收效甚微。

性能优化方案:【loading加载时间,预加载,静态文件缓存】

image.png

3、weex时期:

weex技术在阿里集团的广泛推广,为OTT端带来曙光。客户端同学尝试将weex能力输出到OTT端,最终页面的性能体验发生质的变化。
由于OTT端的交互方式与传统端存在差异,所以在weex的引入过程中,客户端同学做了很多差异化处理。如jscore的剥离(OTT端只有andriod),焦点引擎的引入(OTT端靠遥控器操作),自定义组件等等。
性能优化方案:【首屏渲染效果,多屏滚动展示,视频播放,图片渲染 】

image.png

二、weex实施方案

1、实施步骤:

• 增加可视化搭建weex输出能力(原有ARK平台只支持H5页面的输出,平台侧增加weex的打包能力),将原有40+个H5组件进行weex化,这部分可以解决80%的业务场景问题。
• 源码weex开发,解决20%的定制化场景,如双11等大型活动及战役,这部分针对定制化源码开发,将H5源码开发的方式切换到weex的技术栈上。

2、技术细节:

• OTT端weex的差异性,一图胜千言。

image.png

• 可视化搭建技术改造方案

image.png

3、相关数据:

• 数据指标:【页面加载提升】【页面渲染流畅】【用户体验改善】

image.png

4、效果展示:

• 全屏weex

image.png

• 半屏互动
image.png

• 页面APP化

image.png

三、共建

输出OTT端的Rax能力到阿里集团,提供详尽的开发文档

image.png

经过技术栈升级与优化,weex成为阿里文娱OTT端-前端业务的主要开发技术栈。相较于HTML5技术栈,weex稳定性及性能均有了长足进步。以页面加载效率为例,使用weex后,页面平均加载时间缩短了50%以上,效果显著。

相关文章
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
2月前
|
编解码 前端开发 开发者
探索无界:前端开发中的响应式设计深度实践与思考###
本文将带你领略响应式设计的精髓,一种超越传统页面布局限制的设计策略,它要求开发者以灵活多变的思维,打造能够无缝适应各种设备与屏幕尺寸的Web体验。通过深入浅出的讲解、实际案例分析以及技术实现细节的探讨,本文目的是激发读者对于响应式设计深层次的理解与兴趣,鼓励在实际应用中不断创新与优化。 ###
113 10
|
3月前
|
编解码 前端开发 UED
探索无界:前端开发中的响应式设计哲学与实践####
本文不拘泥于传统摘要的框架,而是以一种对话的方式,引领读者踏入响应式设计的奇妙世界。想象一下,互联网如同一片浩瀚的海洋,而网页则是航行其中的船只。在这片不断变化的海域中,如何让我们的“船只”既稳固又灵活地适应各种屏幕尺寸和设备?这正是响应式设计的魅力所在。通过深入浅出的探讨,我们将一同揭开它背后的哲学思想与实战技巧,让你的网页在任何设备上都能展现出最佳姿态。 ####
47 0
|
3月前
|
前端开发 JavaScript 算法
探索现代前端框架——React 的性能优化策略
探索现代前端框架——React 的性能优化策略
44 0
|
3月前
|
前端开发 JavaScript API
探索现代前端框架——React 的性能优化策略
探索现代前端框架——React 的性能优化策略
47 0
|
3月前
|
JavaScript 前端开发 安全
2024年前端开发新趋势:TypeScript、Deno与性能优化
2024年前端开发迎来新趋势:TypeScript 5.0引入装饰器正式支持、const类型参数及枚举改进;Deno 1.42版推出JSR包注册表、增强Node.js兼容性并优化性能;性能优化策略涵盖代码分割、懒加载及现代构建工具的应用。这些变化推动前端开发向更高效率和安全性发展。
|
3月前
|
前端开发 JavaScript API
现代前端框架中的响应式编程实践
现代前端框架中的响应式编程实践
64 0
|
3月前
|
编解码 前端开发 开发者
前端开发中的响应式设计实践
前端开发中的响应式设计实践
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
88 5
|
3月前
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75