这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天

跨端是什么

• 背景：由于发展有了更多端
• 常见痛点
  • 各端功能几乎一致，但需要单独配置研发人员
  • 开发、维护成本高（单端bug）
  • 安卓、ios发版周期长
• 跨端技术方案目标
  • 研发效率高
    • 学习成本低
    • 多端一致性高
  • 用户体验好
    • 稳定性高
    • 性能体验好
  • 动态化：方便新功能上线
    • 支持动态化下发，满足日益增长的业务需求

跨端技术方案介绍

Hybrid方案

• 基于WebView渲染，通过JS Bridge吧一部分系统能力开放给JS调用

原生渲染方案

• 使用JS开发，通过中间层桥接后使用原生组件渲染UI界面
• React Native：使用JS和React开发跨平台移动应用

• 原生组件渲染效率更高，但功能更有限

自渲染方案

• 利用Skia重新实现渲染管线，不依赖原生组件
• Flutter：通过一套库实现多平台应用

小程序方案

• 使用DSL+JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面
• 字节小程序：全新链接用户与服务的方式，可以在宿主内便捷获取与传播

异同

基于小程序跨端实践

开发抖音小程序

• 下载与官方文档：抖音开放平台 (open-douyin.com)

优化

• 意义
  • 留住用户
  • 提升转化率
  • 提升用户体验
• 指标
  • 加载耗时
  • 取消率
  • 重启率
  • 卡死次数占比
  • LCP到达率
  • 白屏率
  • JS影响用户率
• 优化手段

• 性能评分工具
  • 调试器 - Audits
  • 调试器 - Trace

总结与展望

• 主流跨端技术方案

• 小程序开发与实践

• 跨端需求会越来越强烈，技术方案也会不断迭代，核心目标仍然是"write once, run anywhere"