这是我参与「第五届青训营」伴学笔记创作活动的第 9 天
一、本堂课重点内容：
- 主流跨端技术
- 小程序开发介绍
二、详细知识点介绍：
跨端背景
随着业务发展，有了越来越多的业务场景如PC端，移动端，Web端，IoT设备（车载设备，手表）等
痛点：
- 各端功能几乎一致，但却需要单独配置研发人员（资源浪费）
- 开发、维护成本高
- 移动端审核、发版周期长
跨端目标：
高效研发效率
- 学习成本要低
- 多端一致性要高、兼容性好
用户体验好
- 稳定性高
- 性能好
动态化
- 支持动态化下发，应对漫长的发版周期
常见跨端方案：
hybrid方案
- 基于WebView（类似于浏览器）渲染，通过JS Bridge 把一部分系统能力开放给JS调用
- 核心是webview
JavaScript通过bridge和webview、各种资源服务进行通信，从而实现
原生渲染方案
- 使用JS开发，通过中间层桥接后使用原生组件渲染UI界面。如React Native
- 可以让开发者使用JavaScript和React开发跨平台的移动应用
原生组件比webview渲染效率高，极大的缓解页面卡顿感，但能力受限很多（如安卓的设备性能限制，部分CSS无法使用）
自渲染方案
- 更底层的实现，利用一个开源引擎Skia重新实现渲染管线，不依赖原生组件。如Flutter
Google在2018世界移动大会公布的开源应用开发框架，仅通过一套代码块，就能构建精美的原生平台编译的多平台应用
- app通过widgets、platform通信，不需要bridge
- 内核引擎是使用C/C++编写的
小程序方案
- 使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview渲染
如字节小程序，可以在宿主（如抖音、今日头条等）内部方便的投放使用
- 为了更好的适配多端，渲染层还是webview实现（与Hybrid不同的是此处用的是多webview），逻辑层是JSC
- 缓存优先的加载方案
方案对比
| 技术方案 | 视图层 | 逻辑层 | 优点 | 缺点 |
|---|---|---|---|---|
| hybrid | webview | webview JS thread | 开发成本低 CSS全集 一致性好（注：应该是指多平台开发兼容性高） | 性能一般 |
| 原生渲染 | 原生组件 | JS Engine | 性能好 | CSS子集（注：即部分CSS无法使用） 一致性一般 |
| 自渲染 | Skia | Dart VM | 性能最好 一致性好 | CSS子集 Dart生态一般 开发成本较高 |
| 小程序 | webview + 原生组件 | JS Engine | 开发成本低 CSS全集 一致性好 | 性能较好 |
小程序性能优化：
- 留住用户
- 提升转化率
- 提升用户体验
小程序性能指标
- 小程序加载耗时
- 取消率
- 重启率
- 卡死次数占比
- LCP到达率
- 白屏率
- JS影响用户率
启动性能：
下包速度：减少包体积
- 合理使用分包
- 移除无用文件
- 控制包内静态资源
通过cdn方式进行加载
减少同步逻辑：减少阻塞
- 优先使用异步API
- 避免启动时运行过多同步代码
更早显示首屏数据（LCP）：
- 尽早调用关键API和请求（根据业务特点区分）
- 接入数据预取
- 避免非必要的reLaunch
合理缓存数据：（接口重复用）
- 网络数据缓存
- API数据缓存
图片优化：
- 合适的格式如webp
- 合理压缩
- 使用CDN并开启缓存
其他
- 框架骨架屏
- 展位组件
运行时性能
合理使用setData：
- 优化发送频率（合并发送，择优发送等）
- 动画不使用setData（使用官方）
合理使用自定义组件：（提升diff更新速度）
- 合理拆分组件
- 只注册当前使用的组件
- 同步修改初始data
合理监听处理事件：
- 如scroll事件（触发频率高）有场景再去监听
- 要进行一定的节流，防止一直触发
内存优化
- 及时解绑事件监听
- 及时清理定时器
导航栏适配
- 防止自定义导航栏状态栏等冲突，需要进行适配
X分屏适配
- 通过onResize监听显示区域变化
- 不使用JS设置ScrollView高度
三、课后个人总结：
跨端技术核心思想：write once，run anywhere
今天的课程主要讲的是跨端技术的相关知识，前端应用的多端化是很有必要的，随着业务场景的增多，跨端技术确实是占据着重要地位。通过今天这节课，我初步了解到跨端技术的几个基本方案以及其中小程序方案的性能优化方法指标。知道了跨端技术的主要优化方向，后续还需要继续补充学习，才能真正踏入跨端技术的大门。
如有错误，欢迎指出，谢谢。
