前端 & 客户端工程师将如何可持续发展？

1.1 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 技术方案的下一步规划，如何能更进一步演进。

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

✪ 内容简介

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

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

✪ 精彩看点

• 针对端上JS引擎各类技术方案的优劣和特点分析。

• 了解跨端框架的性能瓶颈特点，以及相应的JS引擎优化思路。

• 了解QuickJS引擎的部分功能短板以及相应的增强思路和方案。

• 对端上JS引擎使用中的稳定性问题的深度分析以及应对手段。

1.3 Flutter 线上流畅度监控方案

✪ 内容简介

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

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

✪ 精彩看点

• 业界方案的分析与对比。

• 剖析线下监控原理，高精度线上监控指标建设。

• 引擎侧的突破与尝试。

• 千万量级的流畅度监控定位方案

1.4 自渲染跨端框架在字节跳动的实践与展望

✪ 内容简介

Lynx 是字节跳动内部广泛使用的跨端框架，可以基于 Web 技术栈构建原生渲染页面，兼顾了性能和开发体验。原生渲染能提升性能体验，但是会带来多端不一致、不好支持新平台等一些问题，我们尝试通过自渲染的方案来解决。自渲染简单说就是不使用平台提供的 UI 框架，自行实现跨平台的 UI 渲染。

本次分享将介绍字节跳动的自渲染跨端框架的诞生背景、框架基本原理，还会介绍在 Android 端的同步渲染优化方案，并结合业务场景分析自渲染的优势以及后续演进方向。

✪ 精彩看点

• 了解字节跳动的跨端框架技术体系

• 了解自渲染方案的优势和应用场景

• 了解自渲染方案的基本原理和优化手段

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

✪ 内容简介

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

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

✪ 精彩看点

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

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

✪ 内容简介

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

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

✪ 精彩看点

• 了解基于OTel协议的移动端全链路Trace整体架构和技术细节。

• 了解不同端对数据采集、处理问题背后的思考和处理方案。

• 了解多系统数据自动关联分析处理的技术方案。

• 了解对移动端自动化问题分析方向的探索和实践。

2.3 无极：面向复杂 B 端项目的低代码平台设计与实践

✪ 内容简介

随着低代码理念的兴起，越来越多垂直领域出现了低代码平台，方便了大量开发和运营人员。但若要搭建功能复杂的、规模较大的应用，如何保证使用低代码平台来开发和维护，整个过程都能高效可靠且可扩展？

本次分享介绍的是来自腾讯的无极低代码平台。分享内容包括我们是如何分析B端站点的特性，设计和实现了前后端全链路开发和维护体系、工程化工具、页面引擎和平台整体方案等；以及在真实案例中，这套方案如何同时支撑了内部工具的快速搭建、以及专业团队维护的复杂系统的搭建维护全链路工作。

✪ 精彩看点

• 了解从 B 端站点特性，推导和设计页面引擎的方案

• 了解低代码工程化方案，及其在大型项目中如何解决开发流程标准化、多人协作等问题

• 了解无极团队在多场景 B 端站点搭建的整体方案设计和实践，及真实验证后的效果

2.4 多编译内核生态下的极速研发体验

✪ 内容简介

项目工程化中研发体验是不可分割的一环，体验良好能够极大提升研发效率。本次将通过研发体验话题，向大家分享如何实现高拓展性的开放式架构，多端开发中 Webpack、Vite、Metro 多编译内核生态，借助 Esbuild 与 Morden Federation 提升多端编译效率，生态多样化为开发者带来的极速研发体验等。

✪ 精彩看点

• 了解多编译内核架构的背景与适用场景；

• 了解多编译内核生态的研发体验与效率的优化策略；

• 了解在高拓展性架构下为生态开发者提供极速研发体验；

• 了解多编译内核在多端研发生态内的优势与未来发展。

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

✪ 内容简介

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

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

✪ 精彩看点

• 了解 3D 虚拟场景整体架构和技术细节。

• 了解如何优化渲染效果技术方案。

• 了解如何在 Web 端实现 3D 场景展示效果与实时性能的最佳平衡。

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

✪ 内容简介

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

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

✪ 精彩看点

• 了解跨平台、高性能、高质量渲染引擎的设计思路。

• 了解典型电商 3D 场景的构建方案。

• 了解电商 3D 场景的性能优化方案。

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

✪ 内容简介

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

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

✪ 精彩看点

• 云渲染技术的整体架构

• 云渲染技术的难点与挑战

• 淘宝直播的实际应用经验

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

✪ 内容简介

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

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

✪ 精彩看点

• 了解在非游戏App中如何解决游戏引擎的单例问题；

• 了解如何实现点播、直播视频画面与游戏画面融合渲染；

• 了解如何解决实时互动游戏中的帧同步、性能问题；

3.5 虚拟制片工业化之路

✪ 内容简介

随着虚拟拍摄技术在影视行业中的兴起，虚拟制片逐渐成为影视作品制作的新流程和新标准。什么是虚拟制片，虚拟制片的流程是怎样的，虚拟制片所涉及的技术有哪些，虚拟制片的应用和前景如何？

本次分享围绕虚拟制片，以真实拍摄案例为参考，为大家系统介绍虚拟制片的种种，对此话题感兴趣的大家，欢迎聆听讲师的分享，实现属于自己的电影梦。

✪ 精彩看点

• 了解虚拟制片全流程；

• 了解虚拟制片技术方案；

• 了解虚拟制片实战中的表现；

• 了解虚拟制片在未来的前景。

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

✪ 内容简介

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

✪ 精彩看点

• 了解 Noslate Workers 整体架构和技术细节。

• 了解业务如果在serverless落地中平衡性能和成本

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

✪ 内容简介

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

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

✪ 精彩看点

• 了解如何设计低成本 SSR 方案来提升页面性能，以及完整链路上的保障

• 了解淘宝前端架构如何结合端内容器能力来普适性提升性能，掌握性能优化的策略

• 了解未来页面性能提升可以突破的方向

4.3 DanceUI 原理 - 如何设计一个 iOS 平台的声明式 UI 框架

✪ 内容简介

声明式 UI 框架大家应该都不陌生。无论是 React 或 Vue，这种声明式UI的开发范式，已经是前端的主流。而在移动端，Android 现在本身主推的是Jetpack，而 iOS 主推的是 SwiftUI，这些也都是声明式 UI了。

本次分享主要介绍从 SwiftUI 演化而来的自研声明式 UI 框架 DanceUI。如何设计一个 iOS 平台的声明式 UI 框架，解决 iOS 平台上 SwiftUI 的诸多局限性（版本限制、系统 bug 等），同时做到 SwiftUI 社区生态的完美兼容，以及高性能的业务场景下的落地。对此话题感兴趣的大家，欢迎聆听讲师的分享，了解一个全新的 iOS 平台的声明式 UI 框架。

✪ 精彩看点

• 了解 DanceUI 的整体架构和技术细节；

• 了解如何复用 SwiftUI 社区生态进行业务落地；

• 了解 DanceUI 的高性能组件设计。

4.4 前端工程化历程与 Turbopack 概述

✪ 内容简介

自 Web 技术兴起以来，我们经历了许多构建工具，从 Gulp/Grunt 等任务运行器，到 Webpack/Rollup 等 Bundle 工具，再到 Vite/Snowpack 等 Unbundle 工具，以及即将到来的 Turbopack 。

那么问题来了：为什么需要会出现这么多工具？它们分别解决了什么问题？如何解决问题？又引入了哪些新的问题？在未来，我们还可以往哪些方向发展？

✪ 精彩看点

• 了解各代构建工具的历史背景与解决问题的思路，剖析工具背后隐藏的工程化发展脉络

• 了解 Turbopack 的解题思路、基本原理，及当下存在的问题

• 展望未来，探讨未来发展趋势

4.5 Artus.js 企业内落地实践

✪ 内容简介

Artus.js 定位为框架的框架，本次分享将介绍 Artus.js 是什么，框架的框架是什么样的概念。通过示例一步一步介绍如何基于 Artus.js 建设适用于多场景的 Node.js 框架。欢迎聆听讲师的分享，开发出适用于自己工作的，有特色的 Node.js 框架。

✪ 精彩看点

• 了解框架的框架是什么概念

• 了解如何基于 Artus.js 开发出 Node.js 框架

• 了解如何围绕框架建设工具链于生态

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

✪ 内容简介

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

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

✪ 精彩看点

• 了解 Web 播放器的核心构成，以及如何更好的实现一个现代 Web 播放器。

• 了解整个播放体系中从编码、到业务实践、再到性能优化等各个角度的趟坑经验和最佳实践。

• 了解主流的编解码和渲染技术解决方案，同时能够初步知道浏览器底层是如何支撑上层播放器进行解码和渲染的

• 了解 WebCodecs 等最新技术标准和相关最佳实践，探索未来有趣的玩法。

5.2 移动存储内核新实践

✪ 内容简介

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

✪ 精彩看点

• 了解移动端存储介质的底层原理

• 了解遍历移动端文件系统的发展

• 了解前沿的存储模型设计

• 了解移动端 IO 密集场景的加速方案

5.3 支付宝网络端边协同探索与实践

✪ 内容简介

边缘计算一直是一个热门的技术方向，相对于云中心，有更大范围的节点覆盖，用更低的成本带来更好的用户体验，但是也引入了一些稳定性问题。

本次分享，基于支付宝终端网络的视角，谈谈对边缘技术的理解和思考，以及端边协同的探索和实践。我们希望通过端和边缘的协同，解决支付宝网络接入在发展过程中碰到的一些痛点问题。本议题主要分享两个边缘的应用场景，基于成本角度的客户端边缘日志计算、基于用户体验角度的端智能边缘计算。与会者可以了解到这些边缘场景在落地过程中碰到的一些问题以及解决方案。

✪ 精彩看点

• 了解边缘计算的相关技术以及应用场景

• 了解边缘接入网关相关技术

• 了解支付宝端边协同落地的探索和实践场景

5.4 终端网络技术与长连架构演进实践

✪ 内容简介

WebSocket 和 HTTP 覆盖了前端应用网络通信的绝大多数场景，然而，随着移动互联网业务复杂度的不断提高以及无线网络中普遍存在的网络稳定性问题，传统基于 WebSocket 和 HTTP 的技术方案在各自业务场景的局限性导致它们已经无法有效满足业务的网络传输需求。

本次分享将介绍淘宝无线如何通过自研长连接通道服务 ACCS 来克服 WebSocket 的不足，如何在前端和客户端融合趋势下合理设计终端长连架构借力客户端优势来优化前端业务网络体验，以及如何利用自研 XQUIC 协议通过多路径技术和隧道技术实现移动弱网破障从而加速 HTTP 网络传输。对此话题感兴趣的大家，欢迎聆听讲师的分享。

✪ 精彩看点

• Multipath QUIC 协议的设计原理；

• Multipath QUIC 在视频点播和 RPC 场景中的实践经验；

• QUIC Tunnel 的概念、现状、以及如何用来加速网络传输；

• 结合微服务 sidecar 演进终端长连接服务化技术架构；

• 前端业务合理使用长连接为用户体验带来显著性提升。

以上就是本届 D2 精彩话题的预告介绍，所有内容均已更新至 D2 官网，欢迎点击阅读原文查看更多详情。

还在观望的同学，我们一起在 D2 等你到来，欢迎扫描下方二维码报名参与~

哪些终端技术更吸引你

 对终端技术发展趋势又有什么看法？

欢迎留言分享你的感受

截至12月23日，认真留言的同学

将获赠定制卫衣一件哦~