这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
一、本堂课重点内容：
- 跨端是什么
- 跨端技术方案介绍
- 基于小程序跨端实践
二、详细知识点介绍：
1. 跨端是什么
- 跨端的背景
随着技术和业务发展，出现越来越多的端，如PC端、移动端、web端、IoT设备等。
- 常见痛点：
各端功能一致但需要独立配置研发人员；
开发、维护成本高；
安卓、IOS发版周期长
2. 跨端技术方案介绍
- 跨端技术方案目标
研发效率高：学习成本低、多端一致性高
用户体验好：稳定性高、性能体验好
动态化：支持动态化下发，满足日益增长的业务需求
- hybrid方案
基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用。
视图层：webview
逻辑层：webview JS thread
优点：1.开发成本低 2.CSS全集 3.一致性好
缺点：性能中等
- 原生渲染方案
使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面。
React Native：一个由Facebook发布的一款开源JavaScript框架，它可以让开发者使用JavaScript和React来开发跨平台的移动应用。其中有一个由C++写成的框架，叫JSI，可以直接操纵C++对象，是一个性能优化的产物。在JS中实现的内容，通过JSI，调用Turbo Modules，再调用Naticve(s)系统实现。
了解React Native：reactnative.dev/
与hybrid方案不同之处在于不是基于WebView渲染，而是基于OEM widgets。
视图层：原生组件
逻辑层：JS Engine
优点：原生组件渲染效率高于WebView，性能好
缺点：1.原生组件比起CSS子集等，能力受限许多，有的样式无法实现。2.一致性一般
- 自渲染方案
利用Skia重新实现渲染管线，不依赖原生组件。
Flutter是Google在2018年世界移动大会公布的开源应用开发框架，仅通过一套代码库，就能构建精美的、原生平台编译的多平台应用。
了解Flutter：flutter.dev/
使用dart语言进行开发，使用Widgets，rendering等概念，且使用Platform channels进行通信。
不再依赖系统，自己进行配置，所以对平台依赖低。
视图层：Skia
逻辑层：Dart VM
优点：1.性能最好 2.一致性好
缺点：1.CSS子集 2.Dart生态一般 3.开发成本高
- 小程序方案
使用小程序DSL + JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面。
视图层：webview + 原生组件
逻辑层：JS Engine
优点；1.开发成本低 2.CSS全集 3.一致性好
缺点：性能相对较好
3. 基于小程序跨端实践
- 快速开发一个小程序
1.下载小程序开发者工具：developer.open-douyin.com/docs/resour…
2.小程序开发、调试：developer.open-douyin.com/docs/resour…
3.上传小程序
- 小程序性能优化
意义：
1.留住用户
2.提升转化率
3.提升用户体验
性能指标：
Loading -- FP（First Page）-- LCP（Large Content Page）
小程序加载耗时、取消率、重启率、卡死次数占比、LCP到达率、白屏率、JS影响用户率。
优化手段：
启动性能体验：
减少包体积：合理使用分包、移除无用文件、控制包内静态资源
减少同步逻辑：优先使用异步API、避免启动时运行过多同步代码
更早地显示首屏数据：尽早调用关键API和请求、接入数据预取、避免非必要的reLaunch
合理缓存数据：网络数据缓存、API数据缓存
图片优化：选择合适的图片格式、进行合理的压缩、用CDN并开启缓存
更多优化手段：框架骨架屏、占位组件
运行时性能体验：
合理使用setData：减少发送频率、动画不使用setData
合理使用自定义组件：合理的拆分组件数量、只注册当前使用的组件、同步修改初始data
合理监听处理事件：合理监听处理scroll事件、去掉不必要的事件绑定
内存优化：及时解绑事件监听、及时清理定时器
导航栏适配：适当开启自定义导航栏、关键信息避开状态栏和胶囊按钮
X分屏适配：通过onResize监听显示区域变化、不使用JS设置ScrollView高度
三、课后个人总结：
通过本节课程，我了解到了跨端的背景和意义，以及四种不同的跨端技术方案，并且还了解到了小程序跨端方案的开发方式以及性能优化方法等。
