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

王水
86 阅读2分钟

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

9. 跨端技术概述

9.1 跨端是什么？

跨端背景

image.png

image.png

跨端技术方案目标

image.png

9.2 跨端技术方案介绍

Hybrid方案

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

image.png

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

原生渲染方案 - React Native

image.png

image.png

React Native的思路是最大化地复用前端的生态和Native的生态，和Web View容器的最大区别在于View的渲染体系。React Native抛弃了低效的浏览器内核渲染，转而使用自己的DSL生成中间格式，然后映射到对应的平台，渲染成平台的组件。相对WebView容器，体验会有一定的提升。不过，渲染时需要JavaScript和原生之间通信，在有些场景可能会导致卡顿。另外就是，渲染还是在Native层，要求开发人员对Native有一定的熟悉度。

自渲染方案

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

自渲染方案 - Flutter

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

image.png

image.png

image.png

小程序方案

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

小程序方案 - 字节小程序

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

image.png

image.png

image.png

image.png

跨端技术方案对比

image.png

9.3 基于小程序跨端实践

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

image.png

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

image.png

image.png

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

  1. 留住用户
  2. 提升转化率
  3. 提升用户体验

image.png

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

Loading -> fp -> lcp

image.png

小程序性能优化

image.png

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

image.png

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

image.png

image.png

9.4 总结与展望

课程总结

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

技术展望

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

avatar
文章
阅读
粉丝