距离 2017 年微信小程序上线已经过去 4 年了，小程序场景已经成为比肩 H5、App 的一个成熟场景，曾经玩具式的小程序也已发展成为成熟承载各个场景的巨型小程序，并出现了 QQ 小程序、支付宝小程序、京东小程序等其他子类型。作为位于微信和手 Q 购物入口的京喜小程序，在这一时期又面临了哪些问题呢？
本次将主要围绕京喜小程序团队开发过程中遇到的一些棘手的技术问题，介绍小程序首页加载性能优化，代码体积优化和体验评分相关的实践。希望你通过本次分享，了解小程序优化相关的实践经验并有所启发。 

演讲提纲: 

1. 优秀的电商首页应该具备哪些特性
   • 极致的性能
   • 精炼的代码体积
   • 友好的用户体验
   • 稳定的系统服务
2. 极致的性能——首页加载性能优化
   • 缓存优先策略和数据更新机制
   • 接口聚合直出、请求截流
   • 数据流解耦
   • 虚拟列表实践
   • 定时器回收
   • 低端机降级方案
3. 代码体积优化
   • 基础优化：代码分包、依赖分析、移除本地资源、压缩文件、重复代码整合替换、H5 化、下线 0pv 页面
   • 怎么量化体积分析？
   • 进阶：字体颜色优化、样式补全使用、关于 Sass 的思考
   • 进阶：多端场景代码处理
   • 进阶：CSS Module 在小程序内的实践
4. 友好的用户体验
   • 100 分小程序——体验评分实践
   • 无障碍优化
5. 稳定的系统服务
   • 测速监控上报和可视化
   • 可用性监控和告警机制
   • 跨端自动化测试框架——Tiga
6. 总结和展望
   • 代码包体积监控平台化
   • 代码评分检测常规化

你将获得: 

1. 了解单页性能优化相关的实践
2. 了解京喜小程序团队在代码体积优化和体验评分相关的实践

当前的小程序开发有两个特征：一方面，更多的流量 App 开放自己的小程序平台，开发者需适配的平台越来越多；另一方面，随着 Serverless 的成熟，部分云厂商推出自己的云开发方案，虽在一定程度上简化了开发，提升了效率，但也造成了平台数据割裂，给全流域的业务运营带来不便。

uni-app 团队在持续打磨 uni-app 跨端框架的同时，不断思考 Serverless 在前端应用中的落地，探索云端协同开发模式，实现前端组件和云端数据的关联结合，并在云端一体组件轮子的基础上，提供代码智能生成工具，实现研发效率的大幅提升。

演讲提纲：

1. 传统应用开发模式
   • 前端：跨端开发已成主流
   • 前后端协同历史回顾 
2. 云端协同打开新世界
   • 协同：兼顾用户体验和开发效率
   • 云端一体的开发模式及关键技术
   • 云端一体的数据安全/权限控制
3. 云端一体组件生态
   • 前后端分离的组件，各自发展，无法有效协同
   • 如何构建云端协同的组件生态？
   • 从表单验证讲起
4. 智能生成代码（Schema2Code）
   • Db Schema 规范扩展
   • 前端页面代码生成 
   • 云端代码生成及部署
5. 未来展望
   • 云端协同，生态繁荣，研发效率大幅提升

你将获得：

1. 了解基于“Serverless +跨端框架”的云端协同模式
2. 了解 Schema2Code 的代码生成方案

随着 2019 年下半年我们成功将滴滴出行钱包入口由 WebApp 替换为小程序，以及集团公司重回增长轨道，小程序业务在公司内得到了空前的重视，我所带团队负责的滴滴出行小程序在这当中更是重中之重。
滴滴出行小程序作为集成了滴滴全业务流量的超级小程序，其复杂程度不言而喻，这样的复杂性给我们在业务开发和维护过程中带来了大量的问题与挑战。为了解决问题与应对挑战，我主导开发了滴滴开源小程序框架 Mpx，该框架为性能与效率而生，弥补了原生小程序开发中的短板，并具有完整的小程序跨端能力。我们在框架中针对复杂小程序场景进行了大量的设计与优化，形成了一套成熟的复杂小程序开发解决方案。
在本次分享中，我会以滴滴出行小程序业务开发中遇到的痛点问题为背景，详细阐述 Mpx 框架中相关能力的设计与实现思路，结合业务实践给出对应问题的解决方案，希望能给业内的小程序开发者们带来一些启发。 

演讲提纲：

1. 滴滴出行小程序复杂性介绍
   • 业务逻辑复杂，性能压力大
   • 业务体量大，包体积超限
   • 多业务线集成，跨团队合作开发
   • 业务需投放多端
   • 需要多语言支持
2. Mpx 框架概览
   • 设计理念 - 小程序优先的增强型开发框架
   • 与业内框架的异同对比 - 性能与效率的权衡
   • 支持能力概览
   • 框架使用情况
3. 数据响应与性能优化
   • 小程序中实现数据响应
   • 基于 render 函数的 setData 优化方案
4. 编译构建与包体积管理
   • 基于依赖收集的小程序构建方案
   • 完善的 npm 支持
   • 分包资源构建处理
   • 小程序包体积分析优化工具
5. 小程序跨团队开发
   • packages 规范
   • 多实例 store
   • 跨团队开发最佳实践
6. 小程序跨端
   • 小程序跨端 - 无性能损耗
   • 丰富灵活的条件编译 - 无开发限制
   • 跨端输出 web
7. 小程序多语言
   • wxs 模式 - 性能优先
   • computed 模式 - 包体积友好
   • 语言集动态加载
8. 展望与未来
   • Webpack 5 构建升级
   • 数据响应升级，支持 Composition API 规范
   • 单元测试完善 - jest module mock
   • Mpx 跨端组件库开源

你将获得: 

1. 了解滴滴出行复杂小程序开发过程遇到的痛点问题及解决方案
2. 了解 Mpx 框架中许多业内独有能力的设计与实现思路

抖音小程序是立足于抖音，辐射字节系 App 的小程序解决方案，其需要满足多场景、多宿主、高性能的渲染需求，传统的前端框架无法满足小程序这么丰富的需要，那么抖音小程序是如何做出抉择，在性能、开发体验、稳定性上满足各方需要的呢？

抖音小程序调研了市面上绝大多数前端框架，先后尝试了 JSX/Template/Reactive/Data-flow 等渲染和状态管理方案，但是发现都无法很好地满足抖音小程序的需要：一方面，小程序的模板语法限制了必须使用模板的管理方式，同时双线程的架构也使得 Reactive 机制很难跨线程使用；另外一方面，这个前端框架也需要打通开发者代码和内部的组件代码，因此需要构建一套底层打通，但是上层隔离的渲染方案。

最终，抖音小程序自研了一套渐进式的前端框架，该框架同时拥有运行和编译时，并为小程序使用场景进行了特异性优化，在编译时提供了大量的信息，加速运行时性能；同时，这套框架的运行时语法也在内部广泛使用，被用于开发各类组件，用少许性能损耗换取更自由的开发体验。这套框架不仅在传统的 Web 环境下可以使用，同时也为纯自绘渲染方案提供统一的抽象和接口，为更广泛的渲染场景提供支持。

同时，在小程序开发中，我们也会遇到不少性能瓶颈点，抖音小程序依托于这套渲染框架，提供了一系列的渲染调试器，方便开发者发现渲染热点，并作出对应的修复。

演讲提纲：

1. 抖音小程序渲染背景介绍
   • 小程序渲染现状与问题
   • 渲染场景与目标
2. 渲染框架设计
   • 渲染架构比较与选型
   • 数据流更新方案设计
   • 插件化渲染器设计
3. 优化与跨端渲染
   • 小程序渲染编译优化
   • 小程序渲染运行时优化
   • 跨端渲染实现方式与效果
4. 框架性开发工程实践与经验
   • 构造多维度的测试保障
   • 输出性能基准测试方案
5. 小程序性能工具与调优
   • 多维度的调试工具介绍与使用方式
   • 性能调试与优化

你将获得：

1. 可以了解前端框架的技术优缺点，为技术选型提供坚实基础
2. 对前端渲染未来的走势有一定的把握，便于进行技术迭代
3. 对于小程序的渲染架构有更深入的了解，便于性能调优
4. 打通前端编译、运行时、工程化的链路，提供组织大型前端项目的经验