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

60 阅读1分钟

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

课程重点知识

  1. 什么是跨端
  2. 跨端技术方案
  3. 基于小程序跨端

知识总结及实例

跨端技术方案

  • 目标
    • 研发效率高
    • 用户体验好
    • 动态化
  • 常见的技术方案
    • Hybrid方案——基于WebView渲染,通过JS Bridge把一部分系统能力开放给JS
    • 原生渲染方案——基于JS
    • 自渲染方案——利用Skia重新实现渲染管线,不依赖原生组件
    • 小程序方案——使用小程序DSL+JS开发,通过中间层桥接后调用原生系统,使用WebView渲染 image.png

图1 Hybrid方案

image.png

图2 原生渲染方案- React Native

image.png

图3 自渲染方案- Flutter

image.png

图4 小程序方案- 字节小程序

  • 跨端技术方案对比

image.png

小程序跨端实践

  • 快速开发小程序 image.png
  • 小程序性能优化

image.png

小程序性能优化手段

image.png

性能评分工具

image.png

相关扩展

个人总结

学习完跨端相关内容后,应明确跨端理念,并可以回答相关问题

  • 跨端解决了什么问题
  • 常见的跨端技术方案有哪些?各方案的技术原理是什么?他们之间有什么区别
  • 跨端技术方案中有哪几个核心部分?
  • 抖音开发者工具提供了哪些能力?
  • 抖音小程序开发与 web 开发有哪些异同
  • 小程序性能优化会关注哪些性能指标?分为哪几个方向进行性能优化?可以使用哪些工具来提升效率
  • 小程序 setData 如何优化