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

跨端技术概述 ｜ 青训营笔记

本堂课重点内容：

1. 跨端背景
2. 跨端技术方案介绍
3. 小程序性能优化
4. 技术展望

1. 跨端背景

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

常见痛点:

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

跨端技术方案目标

2.跨端技术方案介绍

1. Hybrid方案 基于 WebView 渲染，通过 JS Bridge 把一部分系统能力开放给 JS 调用。

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

3. 自渲染方案 利用 Skia 重新实现染管线，不依赖原生组件

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

5. 跨端技术方案对比

3.小程序性能优化

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

FP：是首次绘制时间，这个指标用于记录页面第一次绘制像素的时间。
LCP（Largest Contentful Paint）：最大内容绘制时间，用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录。

优化手段

4.技术展望

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