01. WebApp2.0时代启程：Cocos2d-JS详解（一）

（一）WebApp时代，追求App开发效率的同时，我们也要求终端的体验和性能，2/8原则可以很好的阐述当前的hybird开发方式：20%的Native代码+80%的H5代码。 

（一）WebApp时代，追求App开发效率的同时，我们也要求终端的体验和性能，2/8原则可以很好的阐述当前的hybird开发方式：20%的Native代码+80%的H5代码。

（二）H5可以发挥的性能极致是什么样子？
了解这个问题，就需要知道H5的技术定位：一套H5代码支持Android、iOS、PC等多平台的前端语言，这就决定了再好的iOS平台性能，也不能忘记Android平台的用户体验；最终开发者选择了降低用户体验情况下，降低了H5的用户体验。

（三）H5可以做的更好，不管是Android还是iOS！
这个时候，cocos2d-js出现了，大家有兴趣的可以参考一下官网的demo《js-moonwarriors》，在多精灵动画和复杂的游戏场景下，Android平台也可以达到60FPS的效果！是不是很劲爆？

（四）回归主题，引用官方的说明：
Cocos2d-JS是Cocos2d-x的JavaScript版本，融合了Cocos2d-HTML5和Cocos2d-x JavaScript Bindings(JSB)。

（五）Cocos2d-HTML5
Html5给我们带啦丰富且强大的API，让前端设计者开发出绚丽的显示效果，我们这里主要分析：Canvas、WebGL

Canvas传统的网页游戏和动画展示，很大程度上依赖了H5中得Canavs模块，Canvas模块为JS提供了直接操作底层GPU的机会。
示例：

Context本质上是一个OpenGL的上下文管理对象，封装了常见的OpengGL操作，包括点、线、多边形图形库，还包括了图像、矩阵等功能。经过主流的一些游戏框架的封装，可以基本满足2D游戏的功能，例如：pixi、phaser、kissy等框架，再加上一些物理引擎，比如box2d等，就可以实现复杂的游戏场景。【阿里GCanvas引擎，就是基于Canvas的性能优化，后续讲解】

2.WebGL提供了相对OpenGL ES 2.0完整的API，可以说是一一对应，相比CanvasAPI，WebGL可以说就是简单的把openGLES的API映射给了JS，从此JS拥有了像C/C++一样的GPU操作能力。我们知道，移动平台几乎所有的图像框架的基础都是基于OpenGL，WebGL极大的降低了JS操作GPU的路径，省去了中间环节，当然JS的性能远不能媲美C/C++,但是如果js的运行速度可以媲美java，是否可以写出像Android一样高性能的页面呢？【当然可以，先挖个坑】

（六）Cocos2d-JSB【JS与Native的粘合剂】
触控的JSB即：JavaScript Binding Cocos2d-x To SpiderMonkey，将高性能的Cocos2d-x直接集成到一个JsVM中，将C/C++代码直接预置成JS的内部函数或者对象，把JS不擅长的浮点数计算和矩阵转换，交给C/C++技术，JS制作数据的中转和业务的处理，为游戏引擎的大规模运算提供基础。

（七）SpiderMonkey【JS运行引擎】
SpiderMonkey是由C语言操作的JavaScript引擎，它支持JS1.4和ECMAScript-262规范。该引擎分析、编译和执行脚本，根据JS数据类型和对象的需要进行内存分配及释放操作。利用该引擎可以让你的应用程序具有解释JavaScript脚本的能力，目前已有若干个项目都采用了SpiderMonkey引擎，像K-3D、WebCrossing、WebMerger等。
下图是Cocos2d-JS内部集成的第三方引擎库：

在这里不得不提一下为什么选择SpiderMonkey而不是V8、JavaScriptCore？【请持续关注】

（八）Cocos2d-x【图形引擎】
我们的操作系统，本质上就是一个图形引擎，cocos2d我这里就不做讲解了，毕竟咱们是一家做电商的公司，做好移动app，远离游戏。

（十）Cocos2d-JS是搅动H5世界的鲶鱼
请看下一章节分享。

（总结）WebGL是助推器，可能不是最终的目标
上面我们提到，H5提供了WebGL功能，让JS直接调用OpenGL，绕过了复杂的浏览器沙箱，让性能不如C/C++的JS语言，直接操作核心绘图GPU，实现了性能的极大的释放，极大的推动了H5的发展，可以说，如果Css3是Dom新生的基础，而WebGL是H5发展火箭助推器，我们看到的Native绝大多数的绚丽效果，可以用WebGL轻松搞定。

即使WebGL提供了高效的GPU支持，然而，在图形世界里，大规模浮点数计算、矩阵转换、图像处理等，并不是JS的优势，随着H5的发展，JS在局部的性能处理上，必然遇到瓶颈，JS又会何去何从？

《JS零基础入门教程（上册）》下载 通过阅读本书，您能学到JS零基础入门教学、JavaScpript实战案例解析、JS常用结构、工具及语法汇总详解和理论与实践的结合。
趣味 js —— 通过趣味案例走进 js 的世界 getElementById只能获取一个元素。 2.getElementsByTagName根据标签获取多个元素，并返回一个伪数组。及时获取的元素只有一个，也是以数组的形式储存。 3.style只能设置某一个元素的属性，但是getElementsByTagName返回的是一个数组，所以必须遍历这个数组才可以使用。（可以使用for循环遍历数组。）4.通过JavaScript操作的css属性，与css不相同
skrollr.js是一款轻量级且强大的js库，关于这款js库的相关的详细教程却不多。 所以这里根据国内一些大神们的笔记和skrollr官方文档进行总结，方便自己以后查阅，也方便大家学习。
Vue.js入门之工程目录介绍 Vue 是一套用于构建用户界面的渐进式框架，与其它大型的页面框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
淘朗英 专注于高性能H5内核研发，用C/C++挖掘设备硬件的潜能，让JS提升开发效率，打造一种所见即所得的开发方式。