这是我参与「第五届青训营 」伴学笔记创作活动的第13天。
跨端是什么
跨端背景
- 随着业务的发展,产生了越来越多的业务场景,同时随着技术的发展,产生了越来越多的端,PC端(Windows、Mac),移动端(安卓、iOS) 、web端、loT设备(车载设备、手表)等
- 常见痛点:
- 1.各端功能几乎一致,各端需要单独配置研发人员
- 2.开发、维护成本高
- 3.安卓、iOS发版周期长
跨端技术方案目标
01.研发效率高
1.学习成本低
2.多端一致性高
02.用户体验好
1.稳定性高
2.性能体验好
03.动态化
支持动态化下发,满足日益增长的业务需求
跨端技术方案介绍
hybrid方案
基于WebView渲染,通过JSBridge把一部分系统能力开放给JS调用。
原生渲染方案
使用JS开发,通过中间层桥接后使用原生组件来渲染UI界面
React Native的思路是最大化地复用前端的生态和Native的生态,和WebView容器的最大区别在于View的渲染体系。不过,渲染时需要JavaScript和原生之间通信,在有些场景可能会导致卡顿。
React Native是一主要有JSI、Fabric、TurboModules组成。
JSI
JSI是用C++写成的轻量级框架,它作用就是通过JSI,JS对象可以直接获得C++对象引用、调用。 有了JSI,JS和Native就可以直接通信,调用过程如下:JS->JSI->C++->ObjectC/Java
JSI是整个架构的核心和基石,所有的一切都是建立在它上瑞
JSI允许线程之间的同步相互执行,不需要JSON序列号等操作 JSI是用C++编写方便移植
自渲染方案
利用Skia 重新实现渲染管线,不依赖原生组件
对于底层操作系统而言,Flutter应用程序的包装方式与其他原生应用相同。Flutter代码可以通过嵌入层,以模快方式集成
到现有的应用中,也可以作为应用的主体。Flutter本身包含了各个常见平台的嵌入层,同时也存在一些其他的嵌入层。
Flutter引擎毫无疑问是Flutter的核心,它主要使用C++编写,并提供了FIutter应用所需的原语。它提供了Flutter核心API的底层实现,包括图形(通过Skia)、文本布局、文件及网络10、辅助功能支持、插件架构和Dart运行环境竟及编译环境的工具链
小程序方案
使用小程序DSL+JS开发,通过中间层桥接后调用原生能力,使用 webview 来渲染UI界面。
小程序的运行环境分)成渲染层和逻辑层,其中ttml模板和ttss样式工作在渲染层,js脚本工作在逻辑层。 小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView进行渲染;逻辑层采用JSC线程运行JS脚本。一个小程程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由客户端做中转,逻辑层发送网络请求也经由Native转发。
跨端技术方案对比
基于小程序跨端实践
快速开发一个小程序
01.下载小程序开发者工具
02.小程序开发、调试
03.小程序上传
小程序性能优化
优化意义
01.留住用户
02.提升转化率
03.提升用户体验
小程序性能是指小程序在APP中加载和呈现的速度,以及对用户交互的响应程度。。这些问题将在不同程度上影响用户体验,从而导致用户流失。因此性能是用户体本验中非常关键的一部分,性能优化也是一件重要且有价值的事情。 为了能够衡量小程序性能,我们需要一系列指标来描述小程序启动过程中的关键阶段 第一个阶段初始化小程序环境、加载小程序；然后开始第二个阶段首次绘制；第三个阶段最大内容绘制,最后主要元素加载完成,且达到了可交互的状态通过以上启动阶段,可以将用户体验数字化表达
我们也借助实际用户行为,异常监控,作为辅助指标反映用户体验，包含:取消率、白屏率、LCP到达率
