科技女王范儿|WebAssembly 和 JS构建高性能应用程序，如何使用本文最初发布于Medium网站

本文最初发布于Medium网站，经原作者授权由InfoQ中文站翻译并分享。
自计算机发明以来，原生应用程序的性能有了巨大的提升。相比之下，由于JavaScript最初并不是为提高速度而构建的，因此Web应用程序的运行速度曾经相当缓慢。但是，由于浏览器之间的激烈竞争以及JavaScript引擎（例如V8）的迅速发展， JavaScript在机器上的运行速度也变得非常快了。但是它仍然无法在速度上击败原生应用程序。这主要是由于JavaScript代码必须经过多个流程才能生成机器代码。

文章图片
JS引擎花费的平均时间
随着WebAssembly的引入，现代Web为我们所知的一切都有望迎来变革。这项技术快如闪电。在这篇文章文章中，我们就来看一下什么是WebAssembly ，以及如何将它与JavaScript集成以构建高性能应用程序。
什么是WebAssembly？
在深入了解WebAssembly之前，我们先来看一下什么是Assembly 。
汇编（Assembly）是一种底层编程语言，与CPU架构的机器级指令有着非常紧密的联系。换句话说，它离机器可理解的代码（称为机器代码）只差一个转换过程。这种转换过程称为汇编。
顾名思义， WebAssembly可以理解为Web的汇编。它是一种类似于汇编语言的底层语言，有着紧凑的二进制格式，使你能够以接近原生的速度运行Web应用程序。它还为C、C++和Rust等语言提供了编译目标，从而使客户端应用程序能够以接近原生的性能运行在Web上。
此外， WebAssembly被设计为与JavaScript并存，而不是替代后者。使用WebAssemblyJavaScriptAPI ，你可以在两种语言之间来回交换代码，而不会出现任何问题。这样，你就可以获得同时具备WebAssembly的功能和性能，以及JavaScript的多功能和适应性的应用程序。这打开了一个Web应用程序的全新世界，我们可以在Web上运行很多原本不准备用于Web的代码和功能。
它带来了什么变化
LinClark预测， 2017年推出的WebAssembly可能会让Web开发产业迎来全新的拐点。上一个拐点来自现代浏览器中引入的JIT编译，其使JavaScript的速度提高了近10倍。

文章图片
JavaScript性能
如果对比WebAssembly与JavaScript的编译过程，你会注意到前者剥离了几个步骤，剩下的都被缩减了。下图是两种语言编译过程的直观对比。

文章图片
【科技女王范儿|WebAssembly 和 JS构建高性能应用程序，如何使用】WebAssembly与传统Web应用程序编译过程的近似对比
仔细对比两者，你会注意到WebAssembly中的重优化部分已被完全剥离。这主要是因为：编译器无需对WebAssembly代码做任何假设，因为数据类型之类的东西在代码中是显式展现的。
但JavaScript不是这样，因为JIT应该为运行代码做出假设，如果假设失败，则应重优化代码。
如何获取WebAssembly代码
WebAssembly是一项伟大的技术，但是你该如何使用它的力量呢？
你有几种方法可用。
从头开始编写WebAssembly代码——除非你非常了解它的基础知识，否则完全不建议这样做。从C编译为WebAssembly从C++编译为WebAssembly从Rust编译为WebAssembly使用AssemblyScript将Typescript的一个严格变体编译为WebAssembly 。对于不熟悉C/C++或Rust的Web开发人员来说，这是一个不错的选项。 Wasm还支持更多语言选项，后文会提到。此外，还有Emscripten和WebAssemblyStudio之类的工具可以帮助你完成上述过程。