• 这是我参与第五届青训营伴学笔记创作活动的第11天
• 这篇文章来了解一下前端跨端技术概述和了解，write once，run anywhere

跨端介绍

跨端背景

场景	设备
PC端	Windows Mac
移动端	安卓 IOS
Web端	各种
IoT端	车载设备 手表

• 痛点
  • 功能几乎一致 单独配备开发人员
  • 开发维护成本高
  • 安卓 IOS发版周期长

跨端技术方案目标

• 研发效率高
  • 学习成本低
  • 多端一致性高
• 用户体验好
  • 稳定性高
  • 性能体验好
• 动态化
  • 支持动态化下发

跨端方案

Hybrid方案

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

原生渲染方案

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

React native

• 2015/9 FaceBook js框架 跨端开发

自渲染方案

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

Flutter

• 2018 Goole 跨端开发框架

小程序方案

• DSL + JS开发，中间层桥接后调用原生能力，使用WebView来渲染UI

字节小程序

• 全新的连接用户与服务的方式，可以在APP内被获取和传播

跨端技术对比

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

基于小程序跨端实战

• 字节跳动开发者小程序（暂未实战。。。）

小程序优化

• 优化意义
  • 留住用户
  • 提升转换率
  • 提升用户体验
• 小程序性能指标
• 平台指标看板
• 优化手段
  • Trace工具