这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
随着技术的发展，产生了越来越多的端，PC端(Windows、Mac),移动端（安卓、iOS)、web端、IoT设备（车载设备、手表）等。这些设备正在我们的日常生活中发挥作用。
同时，为了在各个端都能使用同一产品，各个端需要单独配置开发人员，开发和维护的成本较高，一些端如安卓、ios的发版周期长等等这些因素，促使了跨端技术的发展。
开端技术方案目标
-
研发效率高，学习成本低，多端一致性高
-
用户体验好，稳定性高，性能好
-
动态化，支持动态下发，满足日益增长的业务需求
方案介绍
Hybrid
基于WebView渲染，通过Js Bridge把一部分系统能力开发给JS调用
简单理解就像是一个浏览器，无论什么端，只要有浏览器，就能够通过url打开一个web页面。同时也能够通过使用JS Bridge将一部分系统功能如相机开放给JS调用。
优点：开发成本低，CSS适配性好，一致性好
缺点：性能中等
原生渲染
使用JS开发，通过中间层桥接后使用原生组件进行UI渲染。
跨平台框架React Native
React Native是一款开源的JavaScript框架，开发者使用JavaScript和React来开发跨平台的移动应用。
原生组件渲染速度快于WebView。
React Nactive 使用OEM widgets进行渲染。Hybrid 使用 WebView进行渲染。
OEM widgets 只能使用有限的资源，如样式。
优点：性能好
缺点：CSS子集，一致性一般
自渲染
利用Skia重新实现渲染管线，不依赖原生组件
Skia是开源的渲染引擎，安卓和ios都是基于Skia，不使用原生的渲染引擎，直接使用Skia的渲染方式。
Flutter
Flutter是开源应用开发框架，仅通过一套代码库，就能构建精美的、原生平台编译的多平台应用。
优点：性能最佳，一致性好
缺点：CSS子集，Dart生态一般，开发成本高
小程序
使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面
字节小程序
字节小程序是一种全新的连接用户与服务的方式，它可以在宿主（抖音、头条等App)内被便捷地获取和传播，同时具有出色的使用体验。与大多数小程序类似。
使用JS Engine
优点：开发成本低,CSS适配性好,一致性好
小程序性能优化
性能优化的意义
留住用户，提升转化率，提升用户体验
Loading ----->FP----->LCP
Loading是加载状态，FP是有一点相关内容的状态，LCP是加载结束状态。
优化的目的是让LCP尽可能的提前完成。
字节小程序提供了平台指标看板，包括错误日志，性能体验，自定义分析。
性能体验中包含，加载耗时，取消率，重启率，卡死次数百分比，LCP到达率，白屏率，JS影响用户率。
通过这些指标，能够给开发者看到什么部分需要优化，更好的提升开发和维护效率。
结尾
本文作为本节课跨端方案的记录，本节课着重介绍了几种跨端方案，以及字节小程序如何进行开发和调试。对于我来说即使不是走小程序或者安卓应用方向，本节课给出的性能优化也能给前端方向优化进行一些参考。所以并非是毫无收获。
引用参考：
