这是我参与「第五届青训营 」笔记创作活动的第6天。

一、重点内容

• 跨端技术方案目标
• 方案介绍

二、详细知识点介绍

跨端技术方案目标

1.研发效率高：学习成本低，多端一致性高。（例：iOS和安卓在底层做到使用一致，利于方便开发人员）
2.用户体验好：稳定性高（app的crash或到达率），性能体验好（白屏时间、加载时间、动画流畅度）。
3.动态化：支持动态下发，满足日益增长的业务需求。

方案介绍

1.hybrid方案

基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用。对于js，没有蓝牙、文件能力，在各个端可以通过WebView为中介获取权限。

2.原生渲染方案

使用JS开发，视图是用原生渲染。（跟hybrid的区别是视图一个用原生，一个用浏览器）原生组件渲染的效率比WebView效率要高，对接安卓、iOS系统提供能力。（例React Native）让JS和R来开发跨平台移动应用 通过JSI由c写成的清凉框架，直接拿到C++对象，省去通信过程中反复去约化的过程。

3.自渲染方案

相对来说更底层，利用一个开源的搜索引擎Skia，重新实现渲染管线，不依赖原生组件，对平台的依赖非常低（不用也就不受原生组件的限制）能构建更精美原生平台编译的多平台应用（Flutter）

4.小程序方案

使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面。 字节小程序是一种全新的连接用户与服务的方式，可以在宿主（抖音、头条等App)内被便捷地获取和传播（把小程序投放到App中）。跟hybrid区别:多webview，JS运行环境独立。

小程序性能优化：
优化意义：
1.留住用户2.提升转化率3.提升用户体验
优化手段：
运行前：
1.减少包体积：合理使用分包，移除无用文件，控制包内静态资源。减少同步逻辑：优先使用异步API，避免启动时运行过多同步代码（可以把代码请求分散在不同流程里）更早的展示首屏数据：尽早调用关键API和请求，接入数据预取，避免非必要的relaunch。

运行中：
1.内容优化：及时解绑事件监听，及时清理定时器。
2.合理使用自定义组件：之注册当前使用的组件，同步修改初始data。
3.合理使用setData：减少发送频率，动画不使用setData。
4.X分屏视频：通过onResize监听显示区域变化，不使用JS设置ScrollView高度。

四、个人总结

初步了解了跨端技术的几种方案各自的特点之后，对于做好前端有了更深的理解，明白了都能通过哪些方面来进行更好的优化，也会开始在日常开发中就注意这些点，想着有没有优化的备案。