Flutter学习：跨端的一些知识

最新推荐文章于 2024-09-06 18:04:35 发布

Jneth

最新推荐文章于 2024-09-06 18:04:35 发布

阅读量643

点赞数

分类专栏： Flutter 文章标签： flutter javascript 前端

本文链接：https://blog.csdn.net/u010008647/article/details/122338067

版权

Flutter 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

跨端的一些知识

JsBridge
最开始的JS跨端都是基于webView作为容器，开发H5即可，优点为入门成本低，开发效率高，然而由于是基于webView的，调用原生方法使用的是JsBridge

Native调用Js，通过webView.loadUrl()加载以javascript:开头的url即可实现调用Js的方法。首先看下h5解析后的代码<div onclick="javascript:alert('test')">test</div>所以可以理解为native直接调用的就是挂载在windows上的方法。
js调用native，一种是native通过拦截Url Schema来判断是js的调用，一种是通过webView直接向window注入对象或者方法

缺点为：由于是直接使用HTML元素渲染，一些复杂页面或者动画效果很差，存在卡顿的现象。

DOM树与控件树
文档对象模型（Document Object Model，简称DOM）,一种可扩展标志语言的标准编程接口，理解为HTML或XML标准文档。每个标签就是一个对象，每个对象都可以看做一个节点，最终构成树型结构。

<!DOCTYPE html><html lang="en-US" class=" "><head>
<body>
   <title>1.1 移动开发技术简介 | 《Flutter实战》电子书</title>
</body>
</html>

同样的在安卓和iOS中也存在这样的XML布局方式，在原生中我们叫控件树。

业务与渲染分离
采用原生渲染，但是业务逻辑使用js开发，比如React Native,将虚拟DOM映射为原生控件。

Virtual-DOM：若存在多次更新DOM的操作，并不会马上更新，而是将多次操作的diff存储到一个本地js对象中，然后将js一次性attach到DOM上，将页面的更新全部反映在js对象上，显然操作内存中的js对象明显快，等更新完成后再将js对象映射成真实的DOM，交由浏览器去绘制。
最终都是通过js的document.create等方式创建Element
diff 算法是一种通过同层的树节点进行比较的高效算法，避免了对树进行逐层搜索遍历，所以时间复杂度只有 O(n)diff

flutter：自绘UI+原生
Flutter则开辟了一种全新的思路，从头到尾重写一套跨平台的UI框架，包括UI控件、渲染逻辑甚至开发语言。渲染引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，提供了一套Dart API，然后在底层通过OpenGL这种跨平台的绘制库（内部会调用操作系统API）实现了一套代码跨多端。由于Dart API也是调用操作系统API，所以它的性能接近原生。