前言

这是我参与「第五届青训营」伴学笔记创作活动的第 9 天,之前我们在node.js那篇提过跨端一词,手机端和PC端屏幕尺寸不同，所以就导致页面的尺寸需要兼容；那接下来就看下具体如何？

跨端是什么

跨端背景
跨端是什么
跨端技术方案目标

跨端背景

随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，PC 端(Windows、Mac) ，移动端 (安卓、iOS) 、web端、IoT 设备 (车载设备、手表) 等

常见痛点

1.各端功能几乎一致，各端需要单独配置研发人员 2.开发、维护成本高 3.安卓、iOS 发版周期长 ...

跨端技术方案目标

研发效率高 1.1 学习成本低 1.2 多端一致性高 2.用户体验好 2.1 稳定性高 2.2 性能体验好
动态化 3.1 支持动态化，满足日益增长的业务需求

效率，用户体验，业务长久化

跨端技术方案介绍

hybrid 方案
原生渲染方案
自渲染方案
小程序方案

Hybrid 方案

基于 WebView 渲染，通过 JS Bridge 把一部分系统能力开放给 JS 调用

微信截图_20230206102107.png 微信截图_20230206102134.png

JS 无法有的功能用 Webview 去桥接，比如：蓝牙，文件能力，需要系统开放权限给WebView; 这个方案可运行到各个端，WebView 天生就是跨平台的实现；

原生渲染方案

使用 JS 开发，通过中间层桥接后使用原生组件来染 UI 界面

原生渲染方案 - React Native

React Native 是一个由 Facebook 于 2015 年9 月发布的一款开源的 JavaScript 框架，它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用微信截图_20230206102258.png 微信截图_20230206102134.png

微信截图_20230206102556.png

Codegen JSI(JavaScript接口)是一种从c++代码生成JavaScript绑定的技术。它允许开发人员从JavaScript用c++代码，从而更容易将c++代码集成到基于javascript应用程序中。Codegen JSI自动生成必要的JavaScript绑定，减少了所需的手工编码量，并允许开发人员专注于应用程序的功能，而不是绑定的实现细节。
橙色和绿色这块就是React Native的核心.

Hyperledger Fabric 是一个开源的区块链平台，用于构建去中心化应用程序，也被称为智能合约。它是超级账本下的一个项目，由 Linux基金会托管。Fabric提供了一种模块化且灵活的体系结构，允许开发人员在许可的区块链网络之上构建、部署和运行应用程序。这为交易和数据共享提供了一个安全和私密的环境，同时保持了透明度和不可变性。 Fabric 支持 Go、JavaScript和Java编程语言中的链代码(智能合约)开发。FABRIC 也是转发层，

Turbo Modules是一种用于提高JavaScript 应用程序性能的技术，特别是那些使用React Native 构建的应用程序。它允许更快的启动时间、更小的二进制文件大小和改进的运行时性能。Turbo Modules 的工作原理是优化 JavaScript模块的加载和执行方式，允许应用程序在需要的时候只加载它需要的代码。这将导致更快的加载时间和更好的整体性能，特别是在资源有限的移动设备上。该技术在React Native中实现，并在GitHub上作为开源项目提供。

自渲染方案

利用 Skia 重新实现渲染管线，不依赖原生组件

自渲染方案 - Flutter

Flutter 是 Google 在 2018 年世界移动大会公布的开源应用开发框架，仅通过一套代码库，就能构建精美的、原生平台编译的多平台应用

微信截图_20230206102850.png

微信截图_20230206134935.png

微信截图_20230206103130.png

小程序方案

使用小程序 DSL + JS 开发，通过中间层桥接后调用原生能力，使用webview 来渲染 UI 界面

小程序方案 - 字节小程序

字节小程序是一种全新的连接用户与服务的方式，它可以在宿主 (抖音、头条等App) 内被便捷地获取和传播，同时具有出色的使用体验

微信截图_20230206103328.png

微信截图_20230206103721.png

微信截图_20230206103853.png

微信截图_20230206103901.png

跨端技术对比

技术方案	视图层	逻辑层	优点	缺点
hybrid 方案	webview	webiew JS thread	1.开发成本低 2.CSS全集 3一致性好	1. 性能中等
原生渲染方案	原生组件	JS Engine	1.性能好	1.CSS 子集 2.一致性一般
自渲染方案	Skia	Dart VM	1.性能最好致性好	1.CSS 子集 2.Dart 生态一般 3.开发成本较高
小程序方案	webview + 原生组件	JS Engine	1.开发成本低 2.CSS 全集致 3.一致性好	1.性能较好

没那么高的性能追求，就可以使用hybrid方案，但是可能在一些场景下，我们会对一些性能比较高，追求性能的话就是选择原生渲染方案(React Native)和自渲染方案(Flutter)；小程序方案(uniapp)作为一种产品方案，开放平台，可以让更多开发者可以开放进来，这样的技术方案。

基于小程序跨端实践

快速开发一个小程序 | 小程序性能优化

快速开发一个小程序

程序开发者工具
- 前往下载：下载地址
小程序开发、调试
- 参考：参考文档
小程序上传

快速开发一个小程序 - 下载小程序开发者工具

微信截图_20230206155323.png

快速开发一个小程序 - 小程序开发、调试

微信截图_20230206154701.png 微信截图_20230206154756.png

小程序性能优化 - 优化意义

留住用户
提升转化率
提升用户体验

性能优化 - 小程序性能指标

微信截图_20230206155607.png

小程序性能优化

平台指标看板

微信截图_20230206155627.png

微信截图_20230206155638.png

小程序性能优化 - 优化手段

微信截图_20230206155646.png

静态资源运用CDN 方式进行加载，优先使用异步的代码，运用缓存机制，网络请求结果，图片选择webp,白屏，使用展位；按需注册自定义组件

小程序性能优化 - 性能评分工具

微信截图_20230206155653.png

小程序性能优化 - 优化性能分析工具

微信截图_20230206155701.png

跟浏览器开发管理器差不多，需要去慢慢摸索

总结与展望

总结

1.主流跨端技术方案 2.小程序开发与实践

技术展望

随着端越来越多，跨端的需求会越来越强烈，跨端技术方案也会不断迭代，核心目标仍然是 [write once, run anywhere] ，未来自染可能会出现更多机会

[跨端技术概述 | 青训营笔记09]

前言