WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。
不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中一部分高性能应用可以使用wasm来进行替代,比如React小组就准备用Wasm来重写其Reconciler部分(该部分用来管理组件加载和刷新),这些变动对React的使用者不可见,但会享受到Wasm带来的性能提升。Wasm在最新版本的Chrome中已经默认启用。
JS工作方式(以V8为例)
现代JS引擎都使用JIT(Just-in-time)编译技术来提升性能。下图是V8引擎工作流程图:
其中Ignition是JS解析器(Interpreter),用来生成字节码以减少内存开销和提升页面启动速度。
Crankshaft和TurboFan是不同类型代码的优化编译器(Optimizing Compiler),
用来在运行期间监控代码执行过程并生成优化后的编译代码。
新版(V8 5.8版本之后)上述流程将发生变化,IG+Fullcodegen+Crankshaft+TurboFan将被简化为IG(Ignition)+TF(TurboFan)。
Wasm工作方式
Wasm的工作方式是从服务器上加载后缀名为.wasm的代码文件,V8引擎中的wasm compiler将负责对其解码并编译为机器码,从而可以被浏览器所执行。
为什么快
本质上是因为wasm是一门“低级语言”,具体原因有如下几个:
从网络上获取wasm代码比js代码要快,因为其代码更精简;
解码wasm比解析js要更快;
代码编译和优化要更快,因为wasm更接近机器码并且可以在服务器上提前做优化;
wasm是包含类型的,可以节约大量类型判断的代码和编码反复优化的问题;
内存由程序控制无需GC;
wasm是面向目标机器的低级语言,所以指令设计上可以针对编译目标做优化。
- 相关文章
ARCore基本概念和工作原理简介
谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...
html5跨平台实战-第一周-水平测验-新闻列表页面
这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图
谷歌ARCore技术特性简介
谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...
WebGL Roadmap
Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
前端开发框架技术选型:Angular2 VS React VS jQuery
Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controll...
CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...
使用HTML5 Canvas实现的界面元素截屏功能
学习使用CSS制作进度条
进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope
WebGL入门教程2 - GPU基本概念和工作流水线(渲染管道)
如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...
Processing.js和P5.js的功能简介和区别
什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
什么是Processing.js为了能让Proce...如何使用CSS3实现书页(书本)卷角效果
我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...