江苏龙网

  1. 首页 > 人文 > >

InfoQ|5分钟看懂WebAssembly

作者|MehdiZed译者|王强策划|李俊辰2019年12月5日 ， WebAssembly正式加入HTML、CSS和Javascript的Web标准大家庭 。 很多事情都会受益于这一全新的标准 ， 并且它在浏览器中的性能表现是空前的 。 本文会用五分钟的时间介绍一下这个正在进行中的小变革 。
本文最初发布于jesuisundev.com网站 ， 经原作者授权由InfoQ中文站翻译并分享 。
往事1995年 ， BrendanEich用了不到10天就创建了Javascript 。 那时 ， Javascript的设计并非以速度见长 。 它基本上是用于表单验证的 ， 同时速度非常缓慢 。 随着时间的流逝 ， 它也在一天天变好 。
在2008年 ， 异军突起的谷歌推出了自己全新的浏览器：谷歌Chrome 。 Chrome内部有一个名为V8的Javascript引擎 。 V8的革命性进步是对JavaScript的即时（JIT）编译 。 从解释代码到JIT编译的这种转变大幅提升了Javascript的性能 ， 从而让整个浏览器的速度变得飞快 。 如此快的速度将催生NodeJS或Electron等技术 ， 并推动Javascript迎来爆炸式增长 。
在2015年 ， WebAssembly首次发布 ， 并提供了一个运行在Unity下的游戏的小型演示 。 那款游戏是直接在浏览器中运行的！
在2019年 ， W3C使WebAssembly成为了新的Web标准 。 就像V8引擎一样 ， WebAssembly即将带来全新的性能革命 。 它的身影已经出现在了Web的赛道上 ， 枪声一响便遥遥领先 。
什么是WebAssembly？WebAssembly（缩写为wasm）是一种使用非Javascript代码 ， 并使其在浏览器中运行的方法 。 这些代码可以是C、C++或Rust等 。 它们会被编译进你的浏览器 ， 在你的CPU上以接近原生的速度运行 。 这些代码的形式是二进制文件 ， 你可以直接在Javascript中将它们当作模块来用 。
WebAssembly不能替代Javascript 。 相反 ， 这两种技术是相辅相成的 。 通过JavascriptAPI ， 你可以将WebAssembly模块加载到你的页面中 。 也就是说 ， 你可以通过WebAssembly来充分利用编译代码的性能 ， 同时保持Javascript的灵活性 。
InfoQ|5分钟看懂WebAssembly
文章图片
WebAssembly这个名子有点误导人 。 WebAssembly确实适用于Web ， 但它的使用场景远不止于此！开发WebAssembly的团队为了能让它用在所有环境下 ， 跨越了重重障碍才取得成功 。 我们已经看到了这样的案例：
此外 ， 有一个误解也是相当普遍的 。 WebAssembly不是编程语言 。 WebAssembly是一种中间格式 ， 叫做字节码 ， 其可作为其他语言的编译目标 。 这么说可能还是会让人云里雾里 ， 我们来画些图具体解释一下 。
它是如何工作的？
InfoQ|5分钟看懂WebAssembly
文章图片
看到这张图片了吧？画的多棒啊 。 如果我说我是用Photoshop画的你信不信？管它呢 ， 我们来看图中的内容 。
第一步：这里是你和你的开发技能 。 你使用C或C++生成源代码（还可以使用其他语言） 。 这段代码应该可以解决某个问题 ， 或者完成某段对浏览器中的JavaScript来说太过复杂的流程 。
第二步：你将使用Emscripten来做翻译 。 Emscripten是使用LLVM构建的工具链 ， 可将你的源代码编译为WebAssembly 。 安装它之后 ， 你可以通过几个简单的步骤快速编译任意内容 ， 稍后我们会具体介绍 。 这一步完成时 ， 你将得到一个WASM文件 。
第三步：你将在网页上使用这个WASM文件 。 在将来 ， 你可以像其他ES6模块一样加载这个文件 。 现在它的用法稍微复杂一点 ， 但并没有什么绕弯子的部分 。
好的 ， 下面我们该来点实战了 。
Showmethecode首先 ， 我们需要一小段C++代码来编译 。 有些人会给你看这个运行在浏览器中的完整版暗黑破坏神1游戏的例子：


推荐阅读


上一篇：手机中国|数码产品预订最高可省1000元，华为高考季优惠活动

下一篇：贰仔|第一次用这么小的机械键盘！达尔优61键EK861开箱