小程序
小程序的底层原理
小程序的呈现模式是 WebView + 原生组件，Hybrid 方式
双线程模式是小程序的最大特点
小程序的渲染层和逻辑层分别由 2 个线程管理：渲染层的界面使用了 WebView 进行渲染，逻辑层采用 JsCore 线程运行 JS 脚本。
逻辑层： 创建一个单独的线程去执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码
渲染层： 界面渲染相关的任务全都在 WebView 线程里执行，通过逻辑层代码去控制渲染哪些界面。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程
微信小程序的底层原理
- 微信小程序采用
JavaScript、WXML、WXSS三种技术进行开发,本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口 - 微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现
- 小程序分为两个部分
webview和appService。其中 webview 主要用来展现UI ，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层JSBridge实现通信，实现 UI 的渲染、事件的处理
在某种程度上，它也限制了开发者的权限：
• 不允许开发者把页面跳转到其他在线网页
• 不允许开发者直接访问DOM
• 不允许开发者随意使用window上的某些未知的可能有危险的API
小程序跨平台互转的原理
抹平多端语法差异
实现多端之间投放，码路由
小程序生命周期函数
小程序 & H5 & App
| 类型 | 小程序 | H5 | App |
|---|---|---|---|
| 运行环境 | App(微信、支付宝、百度)，基于浏览器内核完全重构的一个内置解析器 | 浏览器 | 直接运行在操作系统的单独进程中（在 Android 中还可以开启多进程） |
| 开发成本 | 开发者工具，规范的开发标准 | 涉及开发工具（vscode、Atom等）、前端框架（Angular、react等）、模块管理工具（Webpack 、Browserify 等）、任务管理工具（Grunt、Gulp等），还有 UI 库选择、接口调用工具（ajax、Fetch Api等）、浏览器兼容性等等 | 开发成本较高 |
| 系统权限 | 比H5更多的系统权限（网络通信状态、数据缓存能力等），但不能绕过App直接使用系统API | 太多系统权限受限 | 调用系统资源 |
| 运行流畅 | 只能通过webview渲染 | 通过浏览器内核渲染 | 直接调用 GPU 进行渲染 |
小程序中无法使用浏览器中常用的 window 对象和 document 对象，H5 可以随意使用
小程序的开发成本低，不用考虑浏览器的兼容性
小程序并非替代APP，只是想降低APP的用户流失率
小程序是类Vue的开发，但是还是和Vue有着很大的区别：
- 生命周期(小程序的生命周期更简单)
- 数据绑定的方式（小程序
, vue则是:value） - 事件处理方式 （小程序全用
bindtap(bind+event)，或者catchtap(catch+event)绑定事件, vue：使用v-on:event绑定事件，或者使用@event绑定事件） - 控制元素的显示和隐藏（小程序
wx-if和hidden,vue则是v-if和v-show）
React Native & Flutter
React-native的框架原型图
Flutter的框架原型图
RN 🆚 Flutter
| 框架 | React Native | Flutter |
|---|---|---|
| 语言 | JavaScript | Dart |
| 渲染机制 | 基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加 | 自己实现GDI(Graphics Device Interface,图形设备接口)，用了新语言Dart,避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题，不使用原生控件进行渲染 |
| UI框架 | 原生的UI | 自实现,兼容性很高 |
| 通信方式 | 类插件式 | 桥接方式 |
| 完善性 | 发展早，相对完善 | 第三方库较少，道阻且长 |
| 性能 | 效率优于H5，但是对于复杂UI渲染不友好 | 很好，接近原生的native |
Dart是AOT（运行前编译）的编译的，编译成快速、可预测的本地代码
Dart语言可以编译原生的代码，直接跟原生通信
Flutter将UI组件和渲染器从平台移动到应用程序中，这使得它们可以自定义和可扩展。Flutter唯一要求系统提供的是canvas，以便定制的UI组件可以出现在设备的屏幕上，以及访问事件（触摸，定时器等）和服务（位置、相机等）。这是Flutter可以做到跨平台而且高效的关键。另外Flutter学习了RN的UI编程方式，引入了状态机，更新UI时只更新最小改变区域。
