江苏龙网

  1. 首页 > 人文 > >

科技女王范儿|WebAssembly 和 JS构建高性能应用程序，如何使用

本文最初发布于Medium网站 ， 经原作者授权由InfoQ中文站翻译并分享 。
自计算机发明以来 ， 原生应用程序的性能有了巨大的提升 。 相比之下 ， 由于JavaScript最初并不是为提高速度而构建的 ， 因此Web应用程序的运行速度曾经相当缓慢 。 但是 ， 由于浏览器之间的激烈竞争以及JavaScript引擎（例如V8）的迅速发展 ， JavaScript在机器上的运行速度也变得非常快了 。 但是它仍然无法在速度上击败原生应用程序 。 这主要是由于JavaScript代码必须经过多个流程才能生成机器代码 。
科技女王范儿|WebAssembly 和 JS构建高性能应用程序，如何使用
文章图片
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倍 。
科技女王范儿|WebAssembly 和 JS构建高性能应用程序，如何使用
文章图片
JavaScript性能
如果对比WebAssembly与JavaScript的编译过程 ， 你会注意到前者剥离了几个步骤 ， 剩下的都被缩减了 。 下图是两种语言编译过程的直观对比 。
科技女王范儿|WebAssembly 和 JS构建高性能应用程序，如何使用
文章图片
【科技女王范儿|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之类的工具可以帮助你完成上述过程 。


推荐阅读


上一篇：瑞丰恒激光|让夏日凉爽又惬意，紫外激光器打标桌面小风扇

下一篇：爱云资讯|三星联名Thom Browne颠覆传统之美，当时尚感遇上科技感