跨端技术 | 青训营笔记

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

本堂课课程大纲

1. 跨端是什么，给大家介绍跨端产生的背景及解决的问题
2. 跨端技术方案介绍，给大家介绍目前主流的跨端技术方案（hybrid 方案/原生渲染方案/自渲染方案/小程序方案）以及对比
3. 基于小程序跨端实践，带大家了解如何开发一个小程序以及优化小程序
4. 总结与展望

跨端是什么

1. 跨端背景

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

   • 常见痛点:

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

2. 跨端技术方案目标

   • 研发效率高

     1. 学习成本低
     2. 多端一致性高

   • 用户体验好

     1. 稳定性高
     2. 性能体验好

   • 动态化

     支持动态下发，满足日益增长的业务需求

跨端技术方案介绍

hybrid方案

基于WebView渲染通过JS Bridge把一部分系统能力开放给JS调用。（WebView类似于浏览器，应用提供了一个打开web页面的功能）。

原生渲染方案

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

React Native是一个由Facebook于2015年9月发布的一款开源的JavaScript框架,它可以让开发者使用JavaScript和React来开发跨平台的移动应用。

优势：原生组件比WebView渲染效率高

短板：原生组件能力受限非常多，样式缺失

自渲染方案

利用Skia重新实现渲染管线（Skia：开源渲染引擎），不依赖原生组件（原生组件也可能用Skia等引擎）

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

小程序方案

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

例：字节小程序

方案总结

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

小程序性能优化

指标

Loading->FP--->LCP，让LCP尽量提前

优化手段

未来展望

自渲染方案在未来会有更多的可能。

课后个人总结

经过本堂课的学习，了解了跨端技术诞生的背景，学习到了目前主流的跨端技术方案以及各自的优缺点，还学习到了小程序性能优化的一些知识，收获颇多。