这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
跨端是什么
跨端背景
越来越多的业务场景
越来越多的端——PC端（Windows、Mac）移动端（安卓iOS）、web端、IoT设备（车载设备、手表）等
👉痛点：
- 各端功能几乎一致，各端需要单独配置研发人员
- 开发、维护成本高
- 安卓、iOS发版期长
跨端技术方案目标
- 研发效率高
学习成本低，多端一致性高
- 用户体验好
稳定性高，性能体验好
- 动态化
支持动态化下发，满足日益增长的业务需求
跨端技术方案介绍
hybrid方案
基于WebView渲染（可简单理解为浏览器），通过JS Bridge把一部分系统能力开放给JS调用。
比如需要调用本地文件、蓝牙等功能时，JS本身没有，需要让系统开放给WebView。
原生渲染方案
使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面
React Native
是一个由Facebook于2015年9月发布的款开源的JavaScript框架，它可以让开发者使用JavaScript和React来开发跨平台的移动应用。
自渲染方案
Skia
利用Skia重新实现渲染管线，不依赖原生组件
Flutter
是Google在2018年世界移动大会公布的开源应用开发框架，仅通过一套代码库，就能构建精美的、原生平台编译的多平台应用。
小程序方案
使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用WebView来渲染UI界面。
字节小程序：是一种全新的连接用户与服务的方式，它可以在宿主（抖音、头条等App）内被便捷地获取和传播，同时具有出色的使用体验。
【渲染层 + 逻辑层】↔ Native ↔ 第三方服务器
基于小程序跨端实践
快速开发一个小程序
-
下载小程序开发者工具👉developer.open-douyin.com/docs/resour…
-
小程序上传
小程序性能优化
意义
留住用户；
提升转化率；
提升用户体验>
小程序性能指标
如：小程序加载耗时，取消率，重启率，卡死次数占比，LCP到达率，白屏率，JS影响用户率等
优化手段
启动性能体验
- 减少包体积
合理使用分包
移除无用文件
控制包内静态资源
- 减少同步逻辑
优先使用异步API
使用Sync结尾的同步API
- 更早展示首屏数据
尽早调用关键API和请求
接入数据预取
避免非必要的reLaunch
- 合理缓存数据
网络数据缓存
API数据缓存
- 图片优化
选择何时的图片格式
进行合理的压缩
使用CDN并开启缓存
- 更多优化手段
框架骨架屏
占位组件
运行时性能体验
- 合理使用setData
减少发送频率
动画不使用setData
- 合理使用自定义组件
合理地拆分组件数量
只注册当前使用的组件
同步修改初始data
- 合理监听处理事件
合理监听处理scroll事件
去掉不必要的事件绑定
- 内存优化
及时解绑事件监听
及时清理定时器
- 导航栏适配
适当开启自定义导航栏
关键信息避开状态栏和胶囊按钮
- X分屏适配
通过onResize监听显示屏区域变化
不适用JS设置ScrollView高度
性能评分工具
在小程序开发者工具：Audits，Trace
