WebAssembly 了解与 js对比

最新推荐文章于 2024-09-11 15:33:18 发布

powerful*！

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量710

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/tsqjxy/article/details/126419143

版权

WebAssembly 实际上wasm是体积小且加载快的二进制格式，目标充分发挥硬件能力以达到原声执行效率。

WebAssembly 是一种可以使用非js编程语言编写代码并且能再浏览器上运行的技术方案，实际上是一种新的字节码格式。‘

WebAssembly 的优势

文件加载 WebAssembly文件体积更小，国医下载速度更快。
解析。解析WebAssembly比解析js更快
编译和优化 编译和优化所需的时间较少，因为在将文件推送服务器之前已经进行了更多优化，js需要动态类型多次编译代码。
重新优化 WebAssembly 代码不需要重新优化因为编译器有足够的信息可以在第一次运行时获得正确的代码。
执行。执行可以更快，WebAssembly指令更接近机器码。
垃圾回收 目前WebAssembly不直接支持垃圾回收，垃圾回收都是手动控制的，所以比自动垃圾回收效率更高。
安全可以放hash和签名等等。

WebAssembly 应用

<script>
	function fib(x) {
		if(x <= 0)
			return 0
		if(x <= 2)
			return 1
			return fib(x -1) + fib(x -2)
}
console.log("测试 fib 速度")
var re = fib(40)
console.timeEnd("测试 fib 速度")
</script>

```*WebAssembly Explorer  这个工具可以将c++代码转换成test.wasm文件*
通过WebAssembly 的api

```javascript
fetch('./test.wasm').then(response => 
	response.arrayBffer()
).then(bytes => 
	WebAssembly.compile(bytes)
).then(mod => {
	const instance = new WebAssembly.Instance(mod)
	const a = instance.exports
	console.log(a)
	console.time("测试 fib 速度")
	var re = a.fib(40)
	console.timeEnd("测试 fib 速度")
})

WebAssembly 和 javaScript 很好的互补。

WebAssembly的最基本用例就是被开发者用来编写浏览器内的软件。我们可以用各种语言来编写出可以被编译成WebAssembly的组件，然后通过JavaScript，将WebAssembly的最终、有效负载传递给客户端。

如前文所述，WebAssembly在设计时就考虑到了各种性能密集型、基于浏览器的用例。其中包括：游戏、音乐流、视频编辑、CAD、加密、以及图像识别等等。总的说来，WebAssembly用例通常适合如下三个领域：

已存在于目标语言中的高性能代码。例如，如果你有一个已用C语言编写的高效数学函数，并且需要将它合并到某个Web应用程序中，那么，你就可以将它部署为一个WebAssembly模块。同时，您可将该应用中，那些对于性能不太敏感的、面向用户的部分，保留为JavaScript。

JavaScript代码不够理想，需要从头开始编写的高性能代码。过去，开发人员会使用asm.js（http://asmjs.org/）来改写此类代码。如今，您可以通过WebAssembly来实现该目的。

将桌面应用移植到Web环境中。虽然asm.js和WebAssembly都可以在技术上实现此类需求，但是WebAssembly可以提供比使用HTML呈现GUI更为基础的应用。对此，您可以查看WebDSP和浏览器中的Windows 2000这两个示例，来进一步了解其功效。

总之，WebAssembly开发往往能够达到比现有JavaScript应用程序更快的运行效果。

WebAssembly的语言支持

顾名思义，WebAssembly不可被直接编写，它更像是一种汇编语言，一种供机器使用、而非高级的、用户友好的编程语言。与C或Java相比，WebAssembly更接近由LLVM语言编译器的基础结构所生成的中间代码表示（intermediate representation，IR）。

通常，大多数使用WebAssembly的场景都会涉及到使用如下三种基本方式中的一种，把那些由高级语言编写的代码，转换为WebAssembly：

直接编译。通过本语言自带的编译器工具链，源代码可以被直接翻译成WebAssembly。例如：Rust、C/C++、Kotlin/Native、以及D都可以通过原生方式，从支持此类语言的编译器处，直接编译出Wasm。

第三方工具。Java、Lua和.Net等语言虽然并不提供原生的、支持Wasm的工具链，但它们可以使用第三方实用程序，将代码转换为Wasm。

基于WebAssembly的解释器。它并非是将现有语言的代码翻译成WebAssembly，而是用由WebAssembly编写的语言解释器，去运行代码。由于解释器本身就占有几兆字节的代码空间，因此，该方法较为臃肿。当然，它保留了那些原有语言编写的代码，在无需转换的情况下，被运行起来。例如，Python（往往是通过PyScript）和Ruby都拥有翻译成Wasm的解释器。

调试和分析工具

如您所知，被转译的JavaScript存在着一个巨大问题：由于无法在转译代码和源代码之间建立关联，因此我们难以进行调试和分析。目前，WebAssembly正努力通过源地图支持的方式，来解决此类问题。

WebAssembly 使用场景

左边是 JavaScript 源码，包含 JavaScript 函数。首先，源码先把字符串转换为记号以便于解析，之后生成一个语法抽象树。

WebAssembly 的最初版本主要是为了解决大量计算密集型的计算的（比如处理数学问题）。最为主流的使用场景即游戏－处理大量的像素。

你可以使用你熟悉的 OpenGL 绑定来编写 C++/Rust 程序，然后编译成 wasm。之后，它就可以在浏览器中运行。

浏览下（在火孤中运行）－http://s3.amazonaws.com/mozilla-games/tmp/2017-02-21-SunTemple/SunTemple.html。这是运行于Unreal engine（这是一个可以用来开发虚拟现实的开发套件）中的。

另一个合理使用 WebAssembly （高性能）的情况即实现一些处理计算密集型的库。比如，一些图形操作。

正如之前所提到的，wasm 可以有效减少移动设备的电力损耗（依赖于引擎），这是由于大多数的步骤已经在编译阶段提前处理完成。

未来，你可以直接使用 WASM 二进制库即使你没有编写编译成它的代码。你可以在 NPM 上面找到一些开始使用这项技术的项目。

针对操作 DOM 和频繁使用平台接口的情况，使用 JavaScript 会更加合理，因为它不会产生额外的性能开销且它原生支持各种接口。

在 SessionStack 我们一直致力于持续提升 JavaScript 的性能以编写高质量和高效的代码。我们的解决方案必须拥有闪电般的性能因为我们不能够影响用户程序的性能。一旦你把 SessionStack 整合进你的网络应用或网站的生产环境，它会开始记录所有的一切：所有的 DOM 变化，用户交互，JavaScript 异常，堆栈追踪，失败的网络请求和调试数据。所有的这一切都是在你的生产环境中产生且没有影响到你的产品的任何交互和性能。我们必须极大地优化我们的代码并且尽可能地让它异步执行。

我们不仅仅有库，还有其它功能！当你在 SessionStack 中重放用户会话，我们必须渲染问题产生时你的用户的浏览器所发生的一切，而且我们必须重构整个状态，允许你在会话时间线上来回跳转。为了使之成为可能，我们大量地使用异步操作，因为 JavaScript 中没有比这更好的替代选择了。

有了 WebAssembly，我们就可以把大量的数据计算和渲染的工作移交给更加合适的语言来进行处理而把数据收集和 DOM 操作交给 JavaScript 进行处理。