2020双十一:H5 技术三年磨一剑,今朝试锋芒

636 阅读9分钟

招贤纳士​

我们急切需要浏览器渲染引擎/Flutter 渲染引擎的人才,欢迎大牛们加入我们

前言

2020 年天猫双十一会场首次全面使用了 H5 技术方案,全面 H5 是今年最大的技术特色。

今年双十一营销活动周期超过了以往,我们的 H5 技术既保障了双十一活动的安全稳定,又提升了整体性能体验,更重要的是破除了对技术及业务的各种限制。我们在双十一活动中看到了使用多 WebView 的 PHA 主会场,看到了纯 H5 的星猫秀互动游戏,看到了体验优秀的预渲染页面,看到了混合渲染嵌入富媒体内容的直播页,还看到了滚动体验如丝般顺滑的榜单页。

  • 稳定性 - 安全生产,稳定高于一切

往年,内存问题一直是各种大型活动中大家最关心的部分,从产品到研发所有同学都要努力发挥自己的聪明才智去降低业务的内存占用。这种工作不但耗用了大家太多的精力,刻意降内存的方案还会影响产品效果和用户体验。

今年,双十一活动期间,我们不会再被内存限制屈服,不再需要性能卡口、不再需要限制坑位、不再需要降低图片色彩、不再需要限制 WebView 个数,却依然稳如泰山。

得益于 U4 内核多进程技术,今年会场使用了以往不敢想象的产品效果,内核崩溃率以及 OOM 崩溃率却下降到只有往年崩溃率的 10%。在将来很长一段时间里,内存低占用将成为 H5 方案的独特优势,特别是在复杂业务场景,H5 技术的优势会更加明显。

  • 性能体验 - 追求极致,精益求精

在首屏性能方面,预渲染方案大幅提升 PHA 主会场的首屏体验,让闪开成为可能。数据 SSR 技术方案,让 Android 端内会场首屏性能和秒开率提升都超过 50%,秒开已成为常态。

在操作体验方面,曾经,多 Tab 切换被看作是 H5 方案不可逾越的障碍。今天,PHA 方案与 U4 内核截图方案让 Tab 切换自然过渡一触而达。页内滚动操作方面,H5 技术更是如丝般顺滑,领先于其它技术方案。

  • 业务自由 - 坚持自由,不作妥协

过去,业务效果需要为技术而妥协。例如,限制坑位数量、降低图片色彩、限制高内存模块。现在,我们不对业务做坑位数量限制,就是不限坑位;我们不限图片色彩,就是要全彩;我们不给业务设限,业务效果不需要为技术而妥协。业务需要什么我们就支持什么,让技术真正为业务赋能。

  • 技术自由 - U4 内核为自己负责到底,不需要兜底

过去,前端只能使用 W3C 功能子集,需要考虑多端差异性,需要考虑内存限制,需要考虑兜底方案。现在,前端可以随心所欲的使用 W3C 功能全集,使用更多高性能特性,可以尽情尝试各种创新技术方案,U4 内核为前端同学提供坚强的技术后盾。

PHA,全称 Progressive Hybrid App,是提升 Hybrid 体验的一种应用框架。提升页面加载速度和交互体验的渐进式 Web 应用。使用 PHA 开发的应用本质上没有脱离前端开发和 W3C 标准,但依然拥有原生应用的特性和体验。或许你有想到 PWA,但 PHA 有比 PWA 更强的 UI 能力和更快的加载速度。

SSR,全称 Server Side Render,即让服务端先渲染出 html 直接下发给浏览器渲染。SSR 其实已经出现了相当长的时间,现在基本上各大框架都支持 SSR。

H5 会场的发展

几年前开始,天猫的多个业务团队开始探索 H5 会场,主要基于下面几个因素考虑:

  • Web 容器性能:端内 U4 内核、WKWebView 全量,端容器性能越来越好

  • 业务维度:业务端外大流量的场景,包括海外国际、营销互动、端外的广告投放、拉端等

  • 开发成本:基于动态化方案的多端适配、测试成本,非全量 W3C 标准开发受到一定的约束

  • 基于未来:基于 W3C 标准的拓展是对于前端研发最佳的方式

天猫前端团队和 U4 内核团队一起设计了一套基于 H5 的消费者端渲染方案,命名为 Web-Based 方案。基于该方案的会场先在天猫部分业务进行试点,在 2018 年逐步推广到天猫更多业务,取得了非常不错的效果。采用 Web-Based 方案的第二年,在双十一会场中就取得了很好的首屏秒开效果,后来一直保持相对稳定的良好水平。

图1 天猫主会场 Tab 切换

今年,会场前端团队开始 SSR 会场的探索,期望进一步优化会场性能,特别是唤端场景。回顾 Web-Based 会场的整体结构,前端获取到预取的 mtop 数据之后,还需要解析数据再发起一次模块请求,才能进行模块渲染。我们和前端团队一起分析讨论,最终决定保留 Web-Based 会场的结构,仅在数据部分进行优化,数据回来后,优先渲染 SSR 数据,同时继续处理非 SSR 数据。这种数据 SSR 的方案大幅加快了首屏速度,同时没有明显降低可交互时间,在今年双十一取得完满成功,预计将来可以普遍推广到其它会场,让会场体验进一步提升。

图2 首屏 SSR 效果

Web-Based 会场,PHA 主会场,数据 SSR 会场 的整个演进过程,体现了全体研发同学坚持不懈和精益求精的精神。

内存挑战

在今年会场方案的前期讨论中,内核团队同学与前端同学对多个会场方案进行讨论,最终大家一致同意多 WebView 是最符合要求的方案,唯一担忧的是内存问题。

为了彻底解决内存问题,U4 内核团队进行了长期的技术规划,踏踏实实地去解决基础技术问题。经过多年的潜心研发,U4 内核从最初的单进程模型,已演化为 Browser 主进程 + Renderer 子进程 + GPU 子进程的多进程架构,这套全新多进程架构,能将 U4 内核多个模块的内存开销分摊到子进程,如:V8 内存耗用、图片解码缓存、GPU 相关内存等等,Browser 主进程(即是 WebView 所在的主进程)的内存开销也将大幅降低。

图3 内核进程模型演化流程

我们判断 U4 内核多进程技术方案完全能够支持多 WebView 方案,并提前用多个大型活动进行摸底预演,活动预演的效果也证实了多进程技术在解决内存问题上毫无压力。

我们判断的原因在于 U4 内核使用中央缓存管理内存,大部分内存都是共享的,而且峰值有阀值,超出阀值时或者页面不可见时会自动回收内存,这套完善的内存管理机制决定了页面内存的峰值不会随着页面数量或者坑位数量的增大而无限增大。U4 内核优秀的内存峰值控制能力,以及完善的多进程方案,可以支持无限坑位,让坑位限制成为历史。

2020 年双十一,天猫会场不再限制坑位,不再降低图片色彩,页面嵌入各种富媒体内容,给用户带来了更加丰富多彩的购物体验。今年内核崩溃率远远好于过往,表现非常稳定。在将来很长一段时间里,内存占用低将成为 H5 方案的独特优势,在复杂业务场景,H5 技术的优势将越来越明显。

性能体验

今年双十一全量 H5 会场,我们从多个角度去看看 H5 会场的整体性能体验。

  • 首屏效果

图4 进入主会场的首屏效果

预渲染技术和 SSR 技术大幅提升了首屏性能体验。Android 端内 SSR 会场性能和秒开率提升都超过 50%。无论是外投唤端场景还是端内场景,都表现非常优秀,秒开已成为 H5 会场的常态。

  • 操作体验

图5 会场惯性滚动效果

H5 在惯性滚动方面有非常明显的优势,操作体验非常流畅,明显优于其它技术方案。U4 内核支持标准的 Passive Event Listeners,前端可以通过传递 passive 参数为 true 来明确告诉内核,事件处理程序不会调用 preventDefault 来阻止默认滑动行为,内核就能快速生成手势输入事件,滑动手势事件可以直接对页面已经渲染好的内容快照进行滑动展示,从而让页面响应更快。U4 内核也支持 GPU 硬件加速和异步分块光栅化,能进一步提升惯性滚动的操作体验。

未来展望

H5 技术方案是前端能主导的标准技术方案,有非常大的自由度,有非常完善的开发者生态,在复杂业务场景里更具优势。近年来,阿里集团内 H5 技术蓬勃发展,多个核心业务都先后选择了 H5 技术并取得巨大成功,H5 技术的价值得到了普遍认可。这次双十一全量 H5 会场的实践,再一次证明了 H5 技术的业务价值。

U4 内核团队将会继续坚定不移的支持 H5 业务的发展,让业务更加自由,随心所欲,无所畏惧。

U4 内核致力于打造性能最好、最安全的 web 平台,让 web 无所不能。

关注公众号请搜索 U4内核技术,即时获取最新的技术动态