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

本堂课的主要内容

1. 跨端是什么
2. 常见的跨端技术方案
3. 基于小程序的跨端方案

跨端是什么

跨端的背景

随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，PC端(Windows、Mac)，移动端(安卓、iOS)、web端、IoT设备(车载设备、手表)等

• 常见痛点:
• 各端功能几乎一致，各端需要单独配置研发人员
• 开发、维护成本高
• 安卓、iOS发版周期长
• .......

跨端技术方案目标

• 研发效率高
  • 01 学习成本低
  • 02 多段一致性高
• 用户体验好
  • 01 稳定性高
  • 02 性能体验好
• 动态化
  • 支持动态化下发，满足日益增长的业务需求

跨端技术方案介绍

Hybrid方案

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

原生渲染方案

使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面

• 原生渲染方案 - React Native
• React Native是一个由Facebook于2015年9月发布的一款开源的JavaScript框架，它可以让开发者使用JavaScript和React来开发跨平台的移动应用。

自渲染方案

利用Skia重新实现渲染管线，不依赖原生组件

• 自渲染方案-Flutter
• Flutter是Google在2018年世界移动大会公布的开源应用开发框架，仅通过一套代码库，就能构件精美的、原生平台编译的多平台应用。

小程序方案

使用小程序DSL + JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面。

跨端技术方案对比

技术方案	视图层	逻辑层	优点	缺点
hybrid方案	webview	webview JS thread	1.开发成本低 2.CSS全集 3.一致性好	1.性能中等
原生渲染方案	原生组件	JS Engine	1.性能好	1.CSS子集 2.一致性一般
自渲染方案	Skia	Dart VM	1.性能最好 2.一致性好	1.CSS子集 2.Dart生态一般 3.开发成本较高
小程序方案	webview + 原生组件	JS Engine	1.开发成本低 2.CSS全集 3.一致性好	1.性能较好

基于小程序跨端实践

快速开发一个小程序

• 01 下载小程序开发者工具
• 02 小程序开发、调试
• 03 小程序上传

小程序性能优化-优化意义

• 01 留出用户
• 02 提升转换率
• 03 提升用户体验

小程序性能优化-优化手段

• 启动性能体验
  • 01 减少包体积
    • 1 合理使用分包
    • 2 移除无用文件
    • 3 控制包内静态资源
  • 02 减少同步逻辑
    • 1 优先使用异步API
    • 2 避免启动时运行过多同步代码
  • 03 更早的展示首屏数据
    • 1 尽早调用关键API和请求
    • 2 接入数据预取
    • 3 避免非必要的reLaunch
  • 04 合理缓存数据
    • 1 网络数据缓存
    • 2 API数据缓存
  • 05 图片优化
    • 1 选择合适的图片格式
    • 2 进行合理的压缩
    • 3 使用CDN并开启缓存
  • 06 更多优化手段
    • 1 框架骨架屏
    • 2 占位组件
• 运行时性能体验
  • 01 合理使用setData
    • 1 减少发送频率
    • 2 动画不使用setData
  • 02 合理使用自定义组件
    • 1 合理的拆分组件数量
    • 2 只注册当前使用的组件
    • 3 同步修改初始data
  • 03 合理监听处理事件
    • 1 合理监听处理scroll事件
    • 2 去掉不必要的事件绑定
  • 04 内存优化
    • 1 及时解绑事件监听
    • 2 及时清理定时器
  • 05 导航栏适配
    • 1 适当开启自定义导航栏
    • 2 关键信息避开状态栏和胶囊按钮
  • 06 X分屏适配
    • 1 通过onResize监听显示区域变化
    • 2 不使用JS设计ScrollView高度

总结

这节课主要介绍了跨端是什么，跨端的概念，还讲了主流跨端技术的方案、小程序的跨端方案。