Web Compass - 端内 Web App 解决方案揭秘

内容简介

随着移动端 App 中 Web 业务的复杂化，多数场景也不再仅仅满足于单页级体验，如何能让这些 Web 业务的整体体验，能「批量级」提升到接近 App 级的体验水位？

本次分享主要介绍如何基于传统 Web 技术进行体系化的体验增强，结合前端、客户端、Web 容器、Web 渲染引擎等多个角度进行核心技术方案的介绍，在了解整个 Web App 技术方案的同时，也能让 Web 开发者了解到，基于传统 Web 也能以接近「0 成本」的投入，打造出 Web App 级的体验。对此话题感兴趣的大家，欢迎聆听讲师的分享，开发属于自己的 “Web App”。

精彩看点

• 了解 Web 技术及社区的现状和发展趋势。
• 了解如何借助客户端、容器、渲染引擎的能力，为 Web 所打造出的通用技术方案。
• 了解 U4 内核所提供的一些创新技术。
• 了解传统 Web 业务如何基于该方案，就能低成本或者「0 改造」就达到 Android 和 iOS 平台下一致的高性能体验。
• 了解该 Web App 技术方案的下一步规划，如何能更进一步演进。

讲师介绍

赵鸿彬 阿里巴巴高级无线开发专家

2012 年开始加入 U4 内核团队，一直致力于 Web 渲染引擎（U4 内核）技术方向上的建设，也参与了阿里巴巴移动端上 Web 体验的优化和体系化建设，包括推动智能信息事业群端内 Web 开发体系的升级和建设。

Qking：跨端 JS 引擎的深度探索与突破

内容简介

JavaScript 在跨端技术选型上是一个重要的角色，无论是 JSC、V8、QuickJS等都是非常完整的 JS 引擎，但他们在功能，性能，稳定性上都存在一些问题。

本议题会详细探讨 JS 引擎选型上的各种权衡和优劣，并介绍我们在现有的问题之上，Qking 引擎是如何通过增强 QuickJS，来提升引擎的执行性能和启动性能，增强开发和调试方面的功能，以及保证上层引擎在大规模使用 Binding API 的时候的正确性和稳定性，进而提高前端和客户端开发的交付效率和质量。与会者可以对 JS 引擎的疑难问题和相应的改进思路，有一个更加深入的理解。

精彩看点

• 针对端上JS引擎各类技术方案的优劣和特点分析。
• 了解跨端框架的性能瓶颈特点，以及相应的JS引擎优化思路。
• 了解QuickJS引擎的部分功能短板以及相应的增强思路和方案。
• 对端上JS引擎使用中的稳定性问题的深度分析以及应对手段。

讲师介绍

胥加成 阿里巴巴无线开发专家

2017 年加入阿里巴巴，多年来深耕于手淘客户端的跨端框架建设，在跨端框架的架构设计，性能优化，JS 引擎的整合&开发等方面有较多经验。目前负责为淘宝跨端团队在 QuickJS 基础之上打造一个更优的端上 JS 引擎: Qking

Flutter 线上流畅度监控方案

内容简介

Flutter 是谷歌推出的高性能的跨平台方案 ，随着使用的业务和场景的增加，Flutter 也开始暴露出一些问题，然而官方并有提供一套有效的线上的监控手段，如何在线上快速发现问题并精准定位，对业务的长期健康发展显得尤为重要。而流畅度作为用户体验很重要的一环，缺乏对其有效的监控很容易造成用户流失和业务体量的下滑。

UC 内核团队结合自身在引擎侧的积累，经过长时间的调研、开发、验证，最终沉淀了比较完善的线上流畅度监控分析方案，此次分享将详细介绍该方案，希望能给听众提供一个新的思路，为业务的迅速迭代保驾护航。

精彩看点

• 业界方案的分析与对比。
• 剖析线下监控原理，高精度线上监控指标建设。
• 引擎侧的突破与尝试。
• 千万量级的流畅度监控定位方案

讲师介绍

叶然 阿里高级无线开发工程师

18 年主要负责基于异构硬件平台的光追渲染引擎加速系统的软硬件协调和性能优化。21 年加入阿里 Hummer 引擎团队，主要负责 Flutter 的高可用建设。

「卓越工程」专场

基于 H5 页面“高差指纹”技术的大规模显示状态监控

内容简介

在 Web 前端领域内，每当一个页面投放到用户侧以后，除非有明确的观测手段否则很难了解页面的实际展现情况。为此开发人员也构建了多种直接监控页面显示的技术方案，如较常见的完整记录 DOM 变化的回放方案、基于客户端能力截图或基于 Canvas 生成页面图像上报等，但这类方法由于会对页面内容进行完整截取和上报，除需要明确的用户授权并对敏感内容进行遮蔽处理外，如用于日常监控则还需要投入大量的计算和执行资源来处理上报内容。受限于执行成本和用户隐私问题，这类方案一般仅用于明确出现问题的用户反馈。

对于如何做到大规模的显示状态的监控很多团队也都进行过相关探索，本次分享一种在淘宝前端监控系统中实践的大规模显示状态识别的方法

精彩看点

了解一套完整的、可用于高流量日常监控的、不触碰页面隐私内容的页面取样方法与服务端计算方案

讲师介绍

王骕 阿里巴巴前端技术专家

2017 年加入阿里巴巴，多年数据产品研发经验，现淘系前端监控数据分析方向负责人

基于 OTel 的移动端全链路 Trace 建设思考和实践

内容简介

一个移动端 App 产品从概念产生，到最终的成熟稳定，产品研发过程中涉及到的研发人员，工程中的代码行数、架构规模、发布频率、线上问题修复时间都会发生比较大的变化。这些变化，给我们在排查问题方面带来不小的困难和挑战，业务问题往往难以复现和排查，如何去定位和复现这些问题？

本次分享主要介绍如何基于 OTel（全称：OpenTelemetry）协议，从统一数据采集协议开始，逐步介绍端侧数据采集、多系统关联分析处理、自动化问题分析的挑战以及核心技术等。

精彩看点

• 了解基于OTel协议的移动端全链路Trace整体架构和技术细节。
• 了解不同端对数据采集、处理问题背后的思考和处理方案。
• 了解多系统数据自动关联分析处理的技术方案。
• 了解对移动端自动化问题分析方向的探索和实践。

讲师介绍

高玉龙 阿里巴巴高级开发工程师

2017 年加入阿里巴巴，先后负责盒马 Android 客户端会员、营销、购物车、交易和首页。2021 年，负责阿里云日志服务 SLS 移动端日志采集研发，参与移动端监控、移动端全链路 Trace 等相关产品的研发。

「创新体验」专场

淘宝人生专属“小屋” —— 虚拟角色和虚拟场景技术探索

内容简介

随着元宇宙潮流在互联网技术中的兴起，虚拟角色和虚拟场景结合的应用场景日益增加。

本次分享主要介绍如何使用 3D 渲染引擎从 0 到 1 打造一个高质量虚拟场景并实现人景交互技术。以室内“小屋”为例子，一步一步详细介绍搭建虚拟场景、控制虚拟角色、实现人景交互、优化渲染效果等核心技术。对此话题感兴趣的大家，欢迎大家一起交流，开发属于自己的“小屋”。

精彩看点

• 了解 3D 虚拟场景整体架构和技术细节。
• 了解如何优化渲染效果技术方案。
• 了解如何在 Web 端实现 3D 场景展示效果与实时性能的最佳平衡。

讲师介绍

倪梵云 阿里巴巴淘宝互动娱乐团队前端工程师

负责淘宝人生的全新互动玩法——“人生小屋”的开发与落地，基于自研 3D 渲染引擎，探索虚拟人和 3D 场景交互新模式，以“家园”玩法打造社交新场景。

电商 3D 购物 - 自研引擎探索和业务实践

内容简介

电商对于购物体验的提升一直是孜孜不倦的，而 3D 购物是一个很重要的探索方向。那 3D 购物需要怎么样的 3D 引擎，3D 购物的开发又有什么特点?

本次分享主要针对电商 3D 购物的特点介绍自研引擎的设计思路，并以手机天猫真实的 3D 购物场景为例，介绍基于自研引擎如果做好 3D 业务层架构并做到快速开发，同时介绍 3D 应用如何做到快速打开，加载体验不降级。

精彩看点

• 了解跨平台、高性能、高质量渲染引擎的设计思路。
• 了解典型电商 3D 场景的构建方案。
• 了解电商 3D 场景的性能优化方案。

讲师介绍

沈彬 阿里巴巴前端技术专家

2016 年加入手淘，先后负责导购产品、Weex 动效体系、鲁班智能合图能力的建设。2019 年加入考拉，负责导购&互动业务，构建考拉动效体系、考拉虚拟人导演系统、用互动行为运营系统。目前负责手机天猫 XR &互动业务，及对应的产品技术体系建设。

杨舟 阿里巴巴技术专家

2017 年加入阿里巴巴，先后参与天猫新零售项目，iHome 项目等等。2020 年，开始探索手淘 3D 新体验，构建商品 3D 规模化方案。其间负责研发了自研 3D 引擎，构建了商品 3D 模型生产工作流，连接商家和建模供应商，为消费者提供 3D 新体验。

淘宝直播 3D 虚拟空间应用探索

内容简介

元宇宙是近一两年比较热门的话题，各大互联网公司都有所布局，淘宝直播借助沉淀多年的多媒体技术，结合云渲染方案， 打造了一个的 3D 虚拟空间，用户无需下载大型的安装包，在淘宝 App 上就可以启用自己的 3D 分身在虚拟世界里逛店，购物，社交，探索沉浸式消费体验。

本次分享主要介绍 3D 虚拟空间的建设思路以及背后的难点与挑战。

精彩看点

• 云渲染技术的整体架构
• 云渲染技术的难点与挑战
• 淘宝直播的实际应用经验

讲师介绍

罗中柱 阿里巴巴高级无线开发专家

2013 年加入阿里巴巴，先后负责手机淘宝多个业务的研发迭代。2016 年，从 0 到 1 搭建淘宝直播客户端，推动端侧平台化架构演进，支撑直播业务快速增长，同时开放输出到集团数十个 APP 直播应用场景。2021 年开始，专注多媒体与 3D 技术的结合， 设计并探索出一套基于云渲染的互动应用方案，给业务带来新的想象空间。

优酷游戏化互动-街舞云蹦迪

内容简介

伴随用户对互动体验的诉求日益激增，游戏化互动成为非游戏 App 的标配，优酷通过打造“青年社交感互动形式”街舞元宇宙舞房，激发用户参与街舞活动的兴趣。

本次分享主要围绕游戏化互动建设讲述如何实现线上街舞云蹦迪，话题内容包括游戏引擎的选型、游戏化过程中要解决的关键问题、视频画面与游戏画面融合渲染、帧同步技术及性能优化等，讲述如何用较低的成本在非游戏 App 中实现多人实时在线的互动游戏。

精彩看点

• 了解在非游戏App中如何解决游戏引擎的单例问题；
• 了解如何实现点播、直播视频画面与游戏画面融合渲染；
• 了解如何解决实时互动游戏中的帧同步、性能问题；

讲师介绍

王志月 阿里巴巴无线开发专家

2014 年加入阿里，先后在阿里云、优酷等部门从事客户端研发工作；在优酷期间主导了客户端视频秒播优化、互动&广告基础建设研发工作。

「语言与框架」专场

Noslate Workers - 面向云原生的 JavaScript 容器方案

内容简介

JavaScript 是开发者数量最庞大的编程语言，早些年 Node.js 等技术的出现，让 JavaScript 可以轻松地处理各类服务端任务。随着云原生/Serverless 等主流概念的引导，弹性效率成为了架构设计的新目标，为了能够让 JavaScript 任务能拥有更高的弹性效率，进而满足泛终端、全栈交付等领域的交付效率提升期待，我们设计了面向轻量端云同构场景的 W3C Web-interoperable JavaScript 轻量化容器方案，在交付灵活度上和资源、执行效率上形成平衡。现主要应用于中心化的 SSR 渲染等轻量任务场景，效果显著。

精彩看点

• 了解 Noslate Workers 整体架构和技术细节。
• 了解业务如果在serverless落地中平衡性能和成本

讲师介绍

杜佳昆 阿里巴巴前端技术专家

2014 年加入阿里，先后负责阿里巴巴 Node.js 稳定性、中间件、可观测性及诊断平台等相关产品的研发。目前负责云原生 Javascript 容器产品 Noslate 的研发，推动保障 Javascript Serverless 架构在业务顺利落地。

前端框架对页面性能的探索和实践

内容简介

性能体验对于业务的重要性不言而喻，而传统的体验优化方案存在着先开发后治理，开发者重参与的问题，这往往不可持续易劣化。同时开发者往往难以在实际的业务中进行实践和落地诸多复杂的性能方案。

本次话题将通过淘宝前端框架对于在不同业务场景下的探索，介绍以低成本 SSR 链路提升页面性能的设计，以及如何结合不同端侧能力来普适性地优化性能。同时也将分享未来更多细分领域性能提升的思考和设计。

精彩看点

• 了解如何设计低成本 SSR 方案来提升页面性能，以及完整链路上的保障
• 了解淘宝前端架构如何结合端内容器能力来普适性提升性能，掌握性能优化的策略
• 了解未来页面性能提升可以突破的方向

讲师介绍

夏温武 阿里巴巴前端技术专家

目前在阿里巴巴大淘宝前端架构负责前端框架的研发，面向开发者打造开发体验和用户体验良好的前端开发框架，开源产品 ICE 核心开发者，先后负责过微前端技术框架 icestark、基于 React 的应用框架 ice.js 等开源项目

「网络与底层技术」专场

Web 音视频解码与渲染技术的现在与未来

内容简介

随着多媒体内容在互联网内容消费的占比越来越高，音视频技术在 Web 技术语境下又有着怎样的不同的发展历程呢。

本次分享会顺着Web多媒体技术发展的脉络，一步一步的拆解现代 Web 播放器的核心构成与最佳实践，起底 Chrome 底层媒体架构的原理和思路，讲述业内主流的解码和渲染解决方案。同时分享优酷面对千万级 2C 播放业务场景下的相关挑战以及趟坑经验，最后带领大家了解最前沿的技术标准和未来有趣的玩法。

精彩看点

• 了解 Web 播放器的核心构成，以及如何更好的实现一个现代 Web 播放器。
• 了解整个播放体系中从编码、到业务实践、再到性能优化等各个角度的趟坑经验和最佳实践。
• 了解主流的编解码和渲染技术解决方案，同时能够初步知道浏览器底层是如何支撑上层播放器进行解码和渲染的
• 了解 WebCodecs 等最新技术标准和相关最佳实践，探索未来有趣的玩法。

讲师介绍

高嵩 阿里巴巴前端技术专家

16 年加入淘宝 Weex 团队，负责 Weex 框架的工具链生态开发。18 年起负责优酷的 Web 播放器，深耕 Web 平台的音视频相关技术，面对千万级播放的 C 端场景，从 0 到 1 完成优酷自研 Web 播放体系的搭建，积极探索行业领先的 Web 平台解码和渲染的解决方案。

移动存储内核新实践

内容简介

随着大量小文件、图片、Web 资源等 IO 密集场景等问题的出现，移动端存储方案对用户体验的影响变得不可忽视。本次话题将由浅入深从Flash存储、文件系统、存储模型三个方面介绍了移动端存储的特性，然后深入到手淘自研的时序存储引擎的设计，其中着重介绍 IO 密集场景问题的攻克，逐步向大家展现手淘在移动存储内核上的新实践。

精彩看点

• 了解移动端存储介质的底层原理
• 了解遍历移动端文件系统的发展
• 了解前沿的存储模型设计
• 了解移动端 IO 密集场景的加速方案

讲师介绍

刘韩松 阿里巴巴高级无线技术专家

多年移动端开发及存储领域开发经验，熟悉存储及数据库技术领域，对移动端数据库引擎有较深入的研究。多年 C++ 开发经验，对链接器技术领域也有一定研究

写在最后

以上就是本届 D2 第一波精彩话题的预告介绍，后面我们也会陆续在官网更新最后的 8 个话题，值得期待！还没报名参加的抓紧报名哦，我们一起在 D2 等你到来，扫描下方二维码即可购票参与 ~

早鸟票

• 售票时间：即刻起至 11 月 30 日（最后三天）
• 早鸟价格：30 元

晚鸟票

• 售票时间：12 月 1 日以后
• 晚鸟价格：98 元