美文网首页
基于JS引擎的移动跨端技术

基于JS引擎的移动跨端技术

作者: Just____ | 来源:发表于2020-11-16 16:03 被阅读0次

背景

跨端开发逐渐成为移动互联网领域一个绕不开的话题,原生Android+IOS开发模式存在资源投入大、发布周期长、线上问题无法实时修复等诸多痛点。跨端技术的原因大致可分三大类:Hybird模式(WebView)、基于JS引擎的原生渲染模式(RN、Weex)、自实现渲染引擎(Flutter)
这里重点讨论基于JS引擎的原生渲染模式(RN、Weex)的实现方式

JS引擎(JSCore)

JS引擎的作用,简单讲就是一句话:解释执行JS脚本
JS引擎的两大代表是Google的V8(运行在Android系统和Chrome浏览器里)和apple的JSCore(运行在iOS系统和Safari浏览器里)

浏览器中的页面想要有交互效果,就需要JS脚本的配合,所以JS有一个最主要的功能就是操作DOM树,并与之交互。
JS引擎可分成三大功能模块:词法分析Lexer、语法分析Parser 、解释执行LLInt和JIT
工作流程如下:

js引擎.png
  1. 词法分析:就是把一段我们写的源代码分解成Token序列的过程,这一过程也叫分词。在JSCore,词法分析是由Lexer来完成,举例:
    比如一句赋值语句:sum = 1+1; Lexer对它的处理如下:
元素 标记类型
sum 标识符
= 赋值操作符
1 数值
+ 加法操作符
1 数值
; 语句结束
  1. 语法分析:Parser会把Lexer分析之后生成的token序列进行语法分析,并生成对应的一棵抽象语法树(AST)。之后,ByteCodeGenerator会根据AST来生成JSCore的字节码,完成整个语法解析步骤。
  2. 解释执行:词法分析和语法分析两个步骤,其实就是完成编译的过程,生成字节码。只是不同于JAVA等其他语言,JS并没有生成类似class的可执行文件,生成的字节码(ByteCode)会立刻被JSCore逐行解释和执行。
    BytecodeGenerator在生成字节码后,需要LLInt和JIT来运行字节码,这是JS引擎很核心的地方,也是各大JS引擎集中优化的地方,核心目的是提升字节码解释执行的效率

单线程

JS所有代码都在单线程中执行,不具备多线程处理任务的能力,JS的多线程异步能力依靠的是事件驱动机制,JS的事件驱动机制和Android的Handler机制很像。JS线程将耗时操作交给了外部的工作线程(WebWorker)去处理,工作线程由JS的宿主提供,它和JS线程不在一个运行环境,不共享作用域,所以工作线程也无法操作Window和Dom,工作线程处理完后会将消息推送到一个消息队列,JS线程会不停的从这个队列中获取事件去执行。

JSVirtualMachine

JSVM:一个抽象的虚拟机:包含了一整套JS的运行环境,核心两个作用:支持并发的JS调用、管理JS与native桥对象的内存
JSVM特征:单线程、有独立堆空间、与JSContext是1对多的关系、JSVM之间无法传值

JSContext

一个JSContext表示了一次JS的执行环境。我们可以通过创建一个JSContext去调用JS脚本,访问一些JS定义的值和函数,同时也提供了让JS访问Native对象,方法的接口。
JSContext特征:所有JS代码必须运行在一个JSContext环境中、所有的读取操作其实都是与一个JSValue类型的globalObject在做交互

JSValue

JSValue实例是一个指向JS值的引用指针。我们可以使用JSValue类,在JAVA和JS的基础数据类型之间相互转换。同时我们也可以使用这个类,去创建包装了Native自定义类的JS对象,或者是那些由Native方法或者Block提供实现JS方法的JS对象。

JSExport

实现JSExport协议可以开放JAVA类和它们的实例方法,类方法,以及属性给JS调用

RN与Weex对比之 - 启动流程

RN与Weex对比之 - 渲染原理

RN与Weex对比之 - 通信机制

参考文章:https://www.jianshu.com/p/3181e9cc99d7

相关文章

  • 基于JS引擎的移动跨端技术

    背景 跨端开发逐渐成为移动互联网领域一个绕不开的话题,原生Android+IOS开发模式存在资源投入大、发布周期长...

  • WEEX快速入门

    WEEX 是阿里推送的一款基于Node.js,轻量级的移动端跨平台动态性技术解决方案,用于构建原生的速度的跨平台...

  • weex-toolkit weex脚手架

    WEEX 是阿里推送的一款基于Node.js,轻量级的移动端跨平台动态性技术解决方案,用于构建原生的速度的跨平台A...

  • WEEX快速入门

    weex ios 集成WEEX 是阿里推送的一款基于Node.js,轻量级的移动端跨平台动态性技术解决方案,用于构...

  • 美团-外卖客户端容器化架构的演进

    1.背景 1.1 移动端跨平台技术的介绍 移动端的跨平台技术不是一个新话题,早在几年前,WebView容器、Rea...

  • Grunt使用实例

    Grunt 基于 Node.js ,用 JS 开发,这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作...

  • 02vue-配置移动端自适应

    参考资料 1.基于vue-cli配置移动端自适应2.vue.js移动端配置flexible.js 源头 前期弄好了...

  • 02vue-配置移动端自适应

    参考资料 1.基于vue-cli配置移动端自适应2.vue.js移动端配置flexible.js 源头 前期弄好了...

  • 关于MINT-UI组件库的安装与使用

    Mint-UI是是一个基于 Vue.js 的移动端组件库,包含丰富的 CSS 和 JS 组件,能够满足日常的移动端...

  • Mint-UI 快速开发移动客户端应用

    Mint UI提供基于vue.js 的移动端组件库,可快速开发移动客户端应用程序,移动端应用以网页访问的方...

网友评论

      本文标题:基于JS引擎的移动跨端技术

      本文链接:https://www.haomeiwen.com/subject/mtfzbktx.html