02. WebApp2.0时代启程:Cocos2d-JS为什么选择SpiderMonkey(二)

简介: 紧接上文,cocos2d-JS为我们提供了图形引擎、物理引擎、JS引擎等基础库,在多终端时代提供了非常nice的游戏引擎,在浏览器普及在各个终端的今天,为什么还要单独搞一套JS引擎呢? 1. 我们先看看使用SpiderMonkey的技术产品有哪些? ![screenshot](http://img1.tbcdn.cn/L1/461/1/aec02fdece92d563ae07a7dc0c0

紧接上文,cocos2d-JS为我们提供了图形引擎、物理引擎、JS引擎等基础库,在多终端时代提供了非常nice的游戏引擎,在浏览器普及在各个终端的今天,为什么还要单独搞一套JS引擎呢?

  1. 我们先看看使用SpiderMonkey的技术产品有哪些?
    screenshot

没有看错,SpiderMonkey就是FireFox浏览器的JS虚拟机(后续简称jsvm),FireFox的实力也是赢得了众多前端开发者的芳心;cocos2d-x更是不用说了,东亚97%的2D游戏开发者的选择,手游开发者的入门技能,k-3D也是在AEPIXI(我们内部实现的跨平台的js图形引擎)的3D技术的源泉,在众多新兴的图形引擎中,我们都找到SpiderMonkey的影子,为什么开发者不选择JavaScriptCore或者V8呢?

  1. 主流的JS引擎对比,SpiderMonkey vs v8 vs JavaScriptCore (vs Rhino)
    screenshot

a) Interpreter: 解释执行,js和java在运行时都是解释执行的一种高级语言,重要的特性之一,就是无类型untyped,比如,在执行js语句时,a = b + c;因为表达式是无类型的,js执行过程在不同的场景,可能有多种不同的含义,如:
(i)b、c都是number类型,那么+号表示数字相加,
(ii)b、c都是字符串类型,那么+号表示字符串链接
Interpreter是如何解释执行呢?
(i)从内存中读取表达式 a = b + c;
(ii)从内存中读取b、c的类型,确定操作符的含义
(iii)unbox b、c,获取真正的value
(iv)执行 b + c,(唯一有效的步骤)
(v)将结果box to x

通常如果b、c是整数,在C/C++中应该是一条指令就可以搞定,但在js中,需要更多地指令才可以完成,这里既是js的不足,也是高级语言的一些通病,场景不同,则更显神通。

JIT特性,提升JS运行速度10 ~ 100倍,又是如何提速的呢?

加载js文件时,执行预编译,将js脚本编译目标平台的机器码

(i)判断b、c的类型
(ii)执行b+c(唯一有效步骤)
(iii)写入a
可以看到JIT的运行方式缩短了js运行步骤,但不是所有场景都是可以使用jit的,比如 string + undefined,这个时候需要回归解释执行了。
b) Interpreter vs JIT,本质来说,JIT确实极大的提升了js的运行速度,从2011年之后,几乎所有的javascript引擎都开启了jit功能,(除了Android4.4.2以后,为什么呢?下一章节我们重点解读Google的密谋)

  1. JS引擎之争与安全

上图中是2014年的分析,从android4.4.2、iOS8以后,V8和JavaScriptCore分别增加了JIT的功能,android的webkit也同步了最新的Chrome的内核,然而,仍然没有开放JS引擎的插件机制(pnp)功能,理由很简单,那就是如果开启这个功能,开发者可以直接访问js的底层数据,浏览器的安全沙箱,就没有任何意义,开发者可以肆意的窥探不同网站的内部数据,谷歌和苹果怎能轻易放手?

SpiderMonkey的出现解决了这个问题,作为独立的js引擎,体积小(2.5M)、运行速度快、支持jit、pnp等特性,成为了开发的首选,虽然国内对SpiderMonkey的介绍不多,但无法阻止前端开发者对js的追求,通过简单地代码,可以让你的C++程序轻松的支持JavaScript脚本。

  1. JS的优势与弥补缺陷

JS在逻辑处理和高级语言特性方面如:闭包、函数、类型转换、Node.JS上,极大的方便了前端开发同学,又像java一样不用担心内存释放,不仅在在H5领域拥有霸主地位,近年来扩张到服务器开发、链接数据库,处理高级业务上,也大展手脚。其所见即所得的开发方式,更是让Native开发同学羡慕不已。

当然,缺陷在上面的解释执行的过程中,也暴露无遗,Native的开发方式上,不仅可以高效的执行指令,而且可以做到硬件加速,在iOS平台就有专门为矩阵运算的硬件加速,这些领域,目前还是js无法做到的。

我们是否可以把一些复杂的计算、如加解密、编解码、图像处理、浮点数、矩阵处理,用C/C++实现,并把这些API开放到JS引擎中呢?

  1. JS单线程的性能比Java要好!

我知道,只要说一句php是世界上最好的语言,马上程序员们就不淡定了。先不要慌者评价,我们看看JS和Java的虚拟机架构图
screenshot

我们可以清楚的看到,Java和JS都有一个底层的跨平台的虚拟机,且都是解释执行的高级语言和GC机制,从架构上看,不同的是Java有自己的独立的内存结构,通过JNI这一层将Java的内存转换成C++内存,才可以调用底层的内核资源,而JS运行空间完全是与C++一样的内存控件,完全是C++代码在运行。

我们知道Java启动时,需要申请独立的内存控件和自己的堆栈管理,最终运行时还是会翻译成C/C++,JS在解释之后,直接交给了C++对象来处理,少了一层JNI的中介服务,必然性能会有所提升。今年来兴起的Node.JS不也是靠C/C++撑腰,才这么牛逼哄哄的嘛?

(总结)SpiderMonkey相对WebKit、Blink而言,作为一个非主流的JS的引擎,把握好了终端领域需要一个轻量级、可定制、体积小、运行快的JS虚拟机的需求下,配合移动互联网的兴起,弯道超车,在独立游戏引擎、脚本引擎领域,成了目前众多开发者的首选,是一部屌丝逆袭的励志案例。

目录
相关文章
|
Web App开发 JavaScript
WebApp - Rem 自适应 JS 之精简版(flexible.js)
WebApp - Rem 自适应 JS 之精简版(flexible.js)
489 0
WebApp - Rem 自适应 JS 之精简版(flexible.js)
|
移动开发 JavaScript 前端开发
01. WebApp2.0时代启程:Cocos2d-JS详解(一)
(一)WebApp时代,追求App开发效率的同时,我们也要求终端的体验和性能,2/8原则可以很好的阐述当前的hybird开发方式:20%的Native代码+80%的H5代码。 ![5a96ccb3abc157b98a67b7bcfa8c2e9d](http://img2.tbcdn.cn/L1/461/1/f0fe01c8c83bbc680afd4e785eb21e53d3367bc5) (二
3984 0
|
Web App开发 JavaScript Java
03. WebApp2.0时代启程:Cocos2d-JS让C++代码支持JS脚本(三)
紧接上文,JS在单线程下,性能不会比Java差,注意场景是单线程。Java的优势不仅是高级语言的特性,还具备了丰富的系统内核资源,如多线程、网络等支持,要比JS灵活的多很多,这里暂时不在讨论这些问题。 回到主题,如果我们把一个完整的C++图形引擎注入到SpiderMonkey中,把复杂的预算放到C/C++内核中,而JS只作为业务处理和内存管理,是否可以获得C/C++的运行能力,有获得了良好的
3320 0
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
72 0
|
8天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
JavaScript
Vue.js学习详细课程系列--共32节(4 / 6)
Vue.js学习详细课程系列--共32节(4 / 6)
33 0
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
64 1