OTT端性能优化建设之Weex实践之路 | 《优酷OTT互联网大屏前端技术实践》第三章-阿里云开发者社区

开发者社区> KB小秘书> 正文

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%以上,效果显著。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
weex高性能list解析
[weex](https://alibaba.github.io/weex/doc/tutorial.html)是alibaba出品的用于移动端跨平台开发界面的框架,类似react-native。 而ListView在移动端界面的开发中是非常重要的组件,无论是H5还是react-native都因为ListView的低性能而饱受非议。那么到底是什么样的实现让weex能拥有与众不同的ListView
8998 0
4982亿背后的前端技术—2020天猫双11前端体系大揭秘
与大家分享淘系前端在今年双11的思考和沉淀,希望对大家有所助益。
1172 0
分布式通讯优化篇 – IRQ affinity
      在一次C500K性能压测过程中,发现一个问题:8 processor的CPU,负载基本集中在CPU0,并且负载达到70以上,并通过mpstat发现CPU0每秒总中断(%irq+%soft)次数比较高。       基于对此问题的研究,解决和思考,便有了这篇文章,希望大家能够喜欢,也欢迎大家留言讨论。       在正文开始之前,我们先来看两个跟性能相关的基本概念:中断与上线
2084 0
拒绝卡顿,揭秘盒马鲜生 APP Android 短视频秒播优化方案
短视频作为内容重要的承载方式,是吸引用户的重点,短视频的内容与体验直接关系到用户是否愿意长时停留。因此,体验的优化就显得尤为重要。上一篇我们分享了 iOS 短视频秒播优化,这篇我们来聊聊 Android 端的优化。
174 0
5大移动/前端开源项目你知道几个?
5大移动/前端开源项目Freeline、ARouter、BeeHive和Weex、antd,你都知道吗? BeeHive:一种大型iOS项目解耦框架,BeeHive框架意义在于将高复杂度的应用不断分割,让开发人员免受代码依赖的痛苦,将App生命周期的分发,耦合在AppDelegate中大量逻辑拆分,模块以微应用的形式独立存在。各个模块间调用从直接调用模块自
2459 0
IXmaps揭示互联网流量是否被NSA监视
本文讲的是IXmaps揭示互联网流量是否被NSA监视,该地图显示了NSA监听站、谷歌数据中心,以及更多机构的全部位置。
1022 0
+关注
1090
文章
1253
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载