WebAssembly 出来之前发生了什么

简介: 1995年javascript诞生,而且诞生的很快。这货前10年迅速发展,紧接着就开始浏览器大战,都来抢占市场份额。当时的互联网也不太发达,应用也没那么复杂,所以很多浏览器厂商还没考虑到js执行的效率问题。

8470acdf428220f6b0b5a802c8914558_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

JavaScript


1995年javascript诞生,而且诞生的很快。

这货前10年迅速发展,紧接着就开始浏览器大战,都来抢占市场份额。

当时的互联网也不太发达,应用也没那么复杂,所以很多浏览器厂商还没考虑到js执行的效率问题。

JIT即时编译


为了提升js执行的效率,很多浏览器加入了JIT,让js的执行速度提升了几十倍。

详细点说就是给 JavaScript 引擎添加了一个新的武器,称为监视器(也称为分析器)。

该监视器在 JavaScript 运行时监控代码,并记录代码片段运行的次数以及使用了哪些数据类型。

如果相同的代码行运行了几次,这段代码被标记为 “warm”。

如果运行次数比较多,就被标记为 “hot”。

被标记为 “warm” 的代码被扔给基础编译器,只能提升一点点的速度。被标记为 “hot” 的代码被扔给优化编译器,速度提升的更多。

它是即时编译,也就是在js代码执行期间编译的。因为 JavaScript 是动态类型语言(弱类型),相同的代码在多次执行中都有可能因为代码里含有不同的类型数据被重新编译。这样会消耗时间,导致JIT时效。

所以,很多时候JIT能否生效取决于开发者的代码是如何写的。

ASM.js


2013年,ASM.js由Mozilla提出,是JavaScript的一个子集,可以更大程度的优化以提高执行速度。

既然是子集,那么其实还是js代码。但ASM.js是强类型的,语法上利用了一些标注让JS的变量成为强类型。

intValue = f1() | 0; // 利用或运算(|)标记函数f1返回值为int32整数
floatValue = +f2(); // 用加号(+)标记函数f2返回值为双精度型浮点

特殊的语法格式

function MyAsmModule(stdlib, foreign, heap) {
    "use asm";   // "use asm"来告诉JS引擎这个函数采用asm.js编译器解析执行
    module body...
    return {    // 返回向外暴露的函数接口
       export1: f1,
       export2: f2
    };
}
var result = MyAsmModule({}, {}, null).export1(); // 调用函数export1

ASM.js 没有垃圾回收机制,所有内存操作都由程序员自己控制,ASM.js 通过 TypedArray 直接读写内存。

另外它只提供了两种数据类型:32位带符号整数和64位带符号浮点数。其他数据类型,比如字符串、布尔值或者对象,ASM.js 一概没有,只能编码成内存中一段连续的32位整数等方式来供ASM进行处理。它们都是以数值的形式存在,保存在内存中,通过 TypedArray 调用。

WebAssembly和ASM.js具有相同的作用,都可以将C/C++代码转成javascript引擎可以运行的代码。

ASM.js生成的是javascript代码,而WebAssembly生成的是WASM格式的二进制字节码,理论上WebAssembly速度更快。

最大的好处就是所有浏览器都支持 ASM.js,不会有兼容性问题。

NaCI


2011年 Google 创造了 Native Client,目的是想将现有的C/C++应用无痛的跨平台到web浏览器上运行,还可以构建如音视频、图片处器多媒体应用、大型游戏、深度学习和区块链相关的密集计算类web应用。

但该技术有个很大的弊端,需要为每种不同的处理器架构分别单独编译对应版本的NaCI二进制模块文件。

这种方式就很不方便啦,也不符合开业软件的便携特性,可移植性较差,如果由于历史原因导致某一种型号的处理器架构已经不被使用,那么所有该架构下的NaCI模块都不可用了。

PNaCI


NaCI 升级版本(Pro Native Client),解决了NaCI的可移植性问题,不依赖具体的硬件架构,一次编译,多处运行。

基于LLVM生成具有抽象中间比特码格式的模块,这种模块不依赖具体的处理架构,可以随意的分发。

浏览器加载比特码到内存中,使用AOT转译,生成当前处理器架构能够执行的机器码,然后就可以被浏览器执行。

PNaCI性能很高,和C++基本一致,但只能运行在Chrome浏览器中。当时Opera Mozilla都没有支持这个技术。

另外应用场景过窄,高校的音频处理、视频处理、高性能计算等,需求场景很少,再加上开发难度大,需要用C/C++,开发成本过高。在16年团队解散, 18年不再支持PNaCi应用。

目录
相关文章
|
Web App开发 存储 JavaScript
使用AssemblyScript 构建 WebAssembly 应用
WebAssembly,也称为 Wasm,是为 Web 创建的二进制格式。它允许通过从常规 JavaScript 访问的相同 Web API 访问浏览器功能。
745 0
使用AssemblyScript 构建 WebAssembly 应用
|
4天前
|
前端开发 JavaScript 安全
C#一分钟浅谈:Blazor WebAssembly 开发
Blazor WebAssembly 是一个客户端框架,允许开发者使用C#和Razor语法构建Web应用。本文介绍了Blazor WebAssembly的基本概念、常见问题及解决方案,包括路由配置、数据绑定、异步操作、状态管理和性能优化等方面的内容,并分享了一些易错点及如何避免的方法。希望这些内容能帮助你在Blazor WebAssembly开发中少走弯路,提高开发效率。
69 51
|
6月前
|
开发框架 JavaScript 前端开发
WebAssembly:下一代跨平台代码执行环境
WebAssembly(简称Wasm)是一种新型的低级字节码格式,可以在现代Web浏览器上运行,同时也可以在其他平台上运行。它是未来互联网应用程序的重要组成部分。本文将介绍WebAssembly的基础知识、其与JavaScript的关系、以及使用WebAssembly进行高效计算的示例。
|
6月前
|
前端开发 JavaScript C++
深入探索WebAssembly在前端性能优化中的应用
随着Web应用的功能越来越复杂,传统的JavaScript解释执行模式已经逐渐成为性能瓶颈。本文将介绍WebAssembly(以下简称Wasm)的基本概念、优势以及如何在现代Web开发中利用Wasm提升前端性能。我们将通过实际案例分析Wasm在处理高性能计算任务时相比JavaScript的优势,并探讨如何将Wasm集成到现有的前端项目中,以实现无缝的性能优化。本文旨在为前端开发者提供一个全面的Wasm应用指南,帮助他们充分利用这一新技术,提升Web应用的响应速度和用户体验。
166 0
|
开发框架 Rust JavaScript
WebAssembly
关于使用和推荐方面,由于缺乏关于 Grain 语言的详细信息,我无法为您提供确切的建议。如果您需要关于 JavaScript 和 WebAssembly 的建议,我可以为您提供一些建议:
139 3
|
Rust JavaScript 前端开发
WebAssembly 入门
本文讲解了 WebAssembly 的入门知识,包括理论以及一些实践过程
12780 8
|
JavaScript C# C++
如何使用单纯的`WebAssembly`
如何使用单纯的`WebAssembly`
110 0
如何使用单纯的`WebAssembly`
|
前端开发 JavaScript 编译器
WebAssembly在前端开发中的应用(2)
WebAssembly在前端开发中的应用(2)
|
编解码 Rust 前端开发
WebAssembly在前端开发中的应用(1)
WebAssembly在前端开发中的应用(1)
193 0