这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
一、本堂课重点内容：
- 本堂课的知识要点有哪些？
- 跨端是什么，给大家介绍跨端产生的背景及解决的问题
- 跨端技术方案介绍，给大家介绍目前主流的跨端技术方案（hybrid 方案/原生渲染方案/自渲染方案/小程序方案）以及对比
- 基于小程序跨端实践，带大家了解如何开发一个小程序以及优化小程序
- 总结与展望
二、详细知识点介绍：
- 本堂课介绍了哪些知识点？
跨端是什么？
- 现在的端有PC端（Windows&Mac）、移动端（Android&iOS）、web端（手机电脑浏览器）、IoT设备（车载设备、手表）等。痛点：功能一致但各端需要单独开发人员、开发、维护成本高、开发周期长、审核发版周期长等。
- 理想的跨端技术目标：研发效率学习高，成本低且多端一致性高；用户体验好，稳定性高，性能体验好；支持动态化下发，满足增长的业务需求
- Write once, run everywhere.
常见跨端技术方案
hybrid方案
基于webview渲染，打开url进行渲染，通过js bridge把一部分系统能力开放给js调用。实现前端页面+系统能力的调用
原生渲染方案
使用js开发，通过中间层桥接后使用原生组件来渲染UI界面。如React Native。区别：webview vs OEM widgets。原生组件渲染效率更高一些，但只能基于有限的原生能力，可能有的css无法实现。
react native的原理：JSI直接操作c++对象，性能优化了。fabric生成一个native方案，turbo modules调用系统API。
自渲染方案
利用Skia（开源）重新渲染管线，不依赖原生组件。如flutter。
不依赖系统。有一套自己专属的widget，底层渲染使用自身的高性能c/c++引擎自绘。
flutter架构：一般开发者从framework入手即可。
小程序方案
小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview渲染UI界面。如字节小程序。多webview线程，js运行在独立的环境中，和native对接。
小程序的时间线：
方案对比
对性能没有要求的话，用hybrid，有要求则一般用原生渲染或自渲染。
三、实践练习例子：
- 有什么实践举例帮助理解知识点？
- 小程序跨端实践
开发
略
性能优化
- 意义：留住用户、提升转化率、提升用户体验
- 定义性能指标：loading-FP-LCP，LCP尽可能提前。平台有指标看板。
- 优化手段：
启动时：合理分包、控制资源大小、优先异步、尽早预取数据或者提前发起关键请求、合理缓存等。
运行时：合理使用setData/自定义组件/监听事件、内存优化及时解绑事件和清理计时器、导航栏匹配等。
四、课后个人总结：
-
本章有什么知识点不容易掌握？
跨端的小程序案例后续自己实践。
-
什么地方容易与其他内容混淆？
react native和flutter的css方案都是子集。
五、引用参考：
- 我参考了哪些外部博客/笔记/文章？
- 了解一门前端开发框架（React/Vue）, reactjs.org/, vuejs.org/
- 了解 React Native, reactnative.dev/
- 了解 Flutter, flutter.dev/
- 了解抖音小程序，developer.open-douyin.com/docs/resour…
- 了解前端和客户端通信原理
