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

背景

跨端开发逐渐成为移动互联网领域一个绕不开的话题,原生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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容