这是我参与「第五届青训营 」笔记创作活动的第16天。
一、本堂课的重点内容
- 跨端技术方案
- 小程序
二、详细知识点介绍
跨端技术方案
背景
业务场景不同，出现了各种各样的端。端：PC端（Windows、Mac）、移动端（Android、iOS）、web端、IoT设备（车载设备、手表）等
对于传统场景，每个端都配备相应的开发人员，但各端功能几乎一致，开发维护成本高，Android、iOS应用商店发版周期长，可能有的端有bug，其他的端没有...
跨端技术目标：
- 研发效率高：学习成本低，多端一致性高。多端尽可能一致，避免兼容问题，从底层实现兼容
- 用户体验好：稳定性高，性能体验好。crash，到达率等稳定性，白屏时间，加载时间，流畅度等用户体验
- 动态化：支持动态化下发，满足日益增长的业务需求。
常见跨端技术方案
hybrid方案
基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用。
WebView可以认为是一个浏览器，Android和iOS都提供了WebView的能力。
对于前端来说，系统能力有限，需要操作系统把操作系统资源的能力开放给JS。
Bridge与platform交互，WebView进行dom操作，Services调用系统API，能力上与原生应用类似。
原生渲染方案
使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面。
视图用原生组件渲染。如React Native，前身是React，用React的开发范式，可以开发跨平台的应用。
与hybrid最大的区别在于OEM widgets，其他部分基本一致，主要在于渲染的底层原理不一样，一个是WebView，一个是原生组件。
原生组件渲染效率比WebView更高，用OEM widgets可以很好的提高效率，但原生组件的样式相较于前端CSS有很大限制，很多CSS无法用原生组件的样式实现。
React Native架构：
JSI是JS接口，由C++写成，可以用JS直接操作C++对象，省去了通信过程中反复序列化的过程
Fabric与UI相关，对应于OEM widgets，映射成Native的组件；Turbo Modules调用系统API。
自渲染方案
利用Skia开源渲染引擎实现渲染管线，不依赖原生组件。Android或iOS可能本身也是由Skia渲染，但自渲染方案直接绕过操作系统，直接通过底层渲染引擎实现。
这个图对于Flutter有问题，左边是Dart，Flutter是Dart开发开发的，不是JavaScript。
不再依赖系统，渲染由底层框架直接实现，但调用系统API与上面类似。
Flutter架构：
开发者基于Widgets开发，把Widget组装起来就是一个应用。Engine使用C++编写，包括图形渲染，文本布局，文件/网络IO，辅助功能，插件系统。
小程序方案
使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用WebView渲染UI页面，小程序也是跨端方案。
字节小程序架构：
类似hybrid，做了一些优化，用WebView渲染，由前端开发者实现，逻辑层使用了JavaScript Core，运行在独立的JS引擎里。
加载时优先加载缓存，本地没有再加载小程序包，分逻辑线程和渲染线程，分别加载基础库。
跨端技术方案对比：
一致性是指Android和iOS的组件是否有一致性，是否好兼容。
如果对性能需求没有很高，一般采用hybrid方案，如果对性能要求很高，可以采用原生渲染或自渲染方案。小程序方案作为产品方案，方便第三方开发者的接入。
小程序性能优化
性能指标:
loading刚开始加载，first paint（FP）时有一些内容已经加载出来了，Largest Content Paint（LCP）时已经加载了全部内容。通常认为LCP的节点是用户真正使用的节点，目的是缩短达到LCP的时间。
平台指标看板：
小程序性能优化手段：
启动性能优化：
- 通过分包把首屏没用到的放在别的包里。
- 把图片、音频等资源放在CDN里，而不放在包里。
- 多使用异步代码减少阻塞
- 通过数据预取，在点开页面的时候就请求数据，关键请求在更早的时机就执行
- 图片使用webp等压缩率更高的格式，图片大小进行限制
- 占位组件在真正的组件没加载出来前先占位，而不是长时间处于白屏状态
运行时性能优化：
- 小程序的逻辑层和视图层分离，减少setData的使用，可以把多个data合并，只发有用的数据，避免重复发送，动画时多次调用setData可能会掉帧
- 使用自定义组件减少diff算法的开销，按需注册自定义组件
- scroll事件触发频率很高，要合理监听，要做一定的节流
- 避免自定义导航栏和默认的状态栏冲突，做好适配
- 小程序的页面高度可能变化，要通过onResize事件监听页面大小的变化
三、实践练习例子
小程序快速开发
- 下载开发者工具
- 小程序开发、调试
- 小程序上传
字节小程序开发者工具与微信小程序开发者工具类似
小程序性能优化：
- 留住用户，性能不好用户直接关了，不再有后续操作
- 提升转化率，引导用户完成闭环，如电商类小程序就是引导用户下单
- 提升用户体验
通过Devtools进行性能分析，分析小程序耗时操作，进行优化。
四、课后个人总结
本节课学习了跨端技术，了解了跨端的概念和技术方案，各个技术方案的异同，使用场景和优缺点。本节课围绕小程序进行了开发实践，了解了小程序开发步骤，并学习了小程序优化方案，从启动时和运行时两方面，了解了常见的小程序优化方案，并练习使用调试工具进行性能分析，找到性能瓶颈。
跨端的核心目标就是提高效率，未来自渲染可能会出现更多机会，Flutter的生态会更加完善。
