来谈谈 WebAssembly 是个啥?为何说它会影响每一个 Web 开发者?

作者:link

原文:What is WebAssembly and why it affects web developers!

你听说过WebAssembly吗?这是由Google, Microsoft, MozillaApple等几家大公司合作发起的一个关于面向Web的通用二进制和文本格式的项目。 现在就让我们来看看WebAssembly到底是个啥?为什么它的出现和未来的发展跟我们每个人都息息相关,即使你并不是一个程序猿/媛~

至少在某种程度上,它将改变Web生态。

JavaScript–Web世界的汇编语言

我们有许多面向Web应用的开发规范,这些设计优良的规范让Web开发者们的工作变得更加的简单。我们很难想象自己所创建和网站或应用没有任何规则、编程语言、框架和开发理念可以遵循。

而将所有这些事情组合到一起的Web规范有一个众所周知的名字:JavaScript

JavaScript基本上已经成为了Web平台的标准开发语言。而随着越来越多的软件成为了Web应用,JavaScript更是获得了极大的发展。

但在过去几年,我们看到越来越多的项目问世,它们试图通过开发编译程序,将其他语言代码转化为 JavaScript,以此让开发者克服 JavaScript 自身存在的一些短板。其中一些项目专注于给编程语言增加新的功能,比如微软的 TypeScript和Google的Dart,或是加快 JavaScript 的执行速度,例如 Mozilla 的 asm.js 项目和Google的PNaCI

在默认环境下,JavaScript 文档其实就是简单的文本文件,先是从服务器下载,然后由浏览器中的 JavaScript 引擎解析并编译。用户可以通过Ajax技术在浏览网页时与服务器进行通信。

在浏览器端目前是使用JavaScript来实现与用户进行动态交互等功能,虽然很多JavaScript框架都致力于性能优化,但是一套基于字节码的系统仍然会有更快更好的性能表现。

所以,WebAssembly到底是个什么鬼?

WebAssembly是一种新的字节码格式。它的缩写是".wasm",.wasm 为文件名后缀,是一种新的底层安全的二进制语法。。它被定义为“精简、加载时间短的格式和执行模型”,并且被设计为Web 多编程语言目标文件格式。 这意味着浏览器端的性能会得到极大提升,它也使得我们能够实现一个底层构建模块的集合,例如,强类型和块级作用域。(原文:And it gives us access to a set of low level building blocks, such as a range of types and operations.这句话我实在不知如何翻译。。。) 不过别搞错了,这并不意味着WebAssmbly是为了取代 JavaScript而生哟~ 就像Bjarne Stroustup说的:“JS会活得很好,因为世界上只有两种类型的语言:一类语言被人们不断的地吐槽,而另一类语言压根儿没人用!”而Eric Elliott认为:“最好不要把WebAssembly仅仅当做一门编程语言,实际上它更像是一个编译器。”

从asm.js到WebAssembly?

asm.js是一个JavaScript的一个严格的子集,可以被用来作为一个底层的、高效的编译器目标语言。asm.js提供了一个类似于C/C++虚拟机的抽象实现,包括一个可有效负载和存储的大型二进制堆、整型和浮点运算、高阶函数定义、函数指针等。

asm.js的思想是使用它所规定的方法来编写JavaScript代码,支持asm.js的引擎会将代码转变为十分高效的机器码。如果你是将C++代码编译为asm.js,将在浏览器端获得极大的性能提升。

webassembly相较于asm.js的优势主要是涉及到性能方面。根据WebAssembly FAQ的描述:在移动设备上,对于很大的代码库,asm.js仅仅解析就需要花费20-40秒,而实验显示WebAssembly的加载速度比asm.js快了20倍,这主要是因为相比解析 asm.js 代码,JavaScript 引擎破译二进制格式的速度要快得多。

这玩意儿到底好在哪?

你很可能会问:“为啥所有人都在谈论WebAssembly?”这是因为WebAssembly对于JS来说绝对是一个巨大的改进,但我们常常会问自己:“这样,就够了吗?”当然不是,WebAssembly对于浏览器来说也有着非同一般的意义。 支持WebAssembly的浏览器可以识别二进制格式的文本,它有能力编译比JS文本小得多的二进制包。 这将给web应用带来类似与本地应用的性能体验!这四不四听起来很棒啊?!如果浏览器不得不解析完整的JS代码,这将会耗去好多时间(特别是在移动平台上),而浏览器对WebAssembly格式的解码速度显然要快得多得多得多:) 下面献上JS作者BE大神的演讲视频地址(油管,需翻墙):Brendan Eich on JavaScript Taking Both the High and Low Roads - O'Reilly Fluent 2014

都有谁入了WebAssembly的坑?

包括Google, Microsoft,Mozilla只是这一长串名单中的少数几家公司。项目带头人们发起了WebAssembly Community Group这一社区,这个团队的愿景是“在一种新的,轻量的web编码格式的基础上,促进浏览器厂商们的合作.” 不过,WebAssembly项目还只是刚刚启动,虽然它有一个美妙的开头,但在WebAssembly成为一个大众认可的web标准之前,它还有很长的路要走。

为啥这玩意会影响每一个web开发者

因为webassembly让开发者有能力选择之前那些不能用来开发web应用的语言来进行web开发,或者他们也可以继续使用简单易用的JavaScript! W3C WebAssembly Community group给出了一些WebAssembly的用例,它们展示了WebAssembly如何使得web开发者更加轻松的工作:

  • 一些执行效率更高的语言可以被编译成在Web平台上执行的代码。
  • 提供了在浏览器端的开发者工具
  • 更加快捷的企业级应用客户端(例如:数据库)

WebAssembly的用途很多。举几个栗子:WebAssembly可以被嵌入到已经开发好的JavaScript/HTML代码中;或者某款应用的主要框架可以使用 WebAssembly 模块(如动画、可视化和压缩等),而用户界面仍然可以主要使用 JavaScript/HTML语言编写。

精简的代码,更好的性能,更少的bug?

据WebAssembly的开发团队描述,使用WebAssembly意味着更少的原代码。与asm.js相比,它减少了大约25%的代码量。虽然这仅仅是一个原型。 现在你可能很想知道如何获取关于WebAssembly的最新进展,下面这些资源将会对你很有帮助:

相关阅读:

【腾讯云的1001种玩法】利用Auto Scaling节省30%成本 日新进用户200W+,解密《龙之谷》手游背后的压测故事

原文链接:http://ivweb.io/topic/567fd838834878282edc7f9b

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏携程技术中心

干货 | Qreact,去哪儿网的迷你react方案

作者简介 钟钦成,网名司徒正美,著名的JavaScript专家,去哪儿网前端架构师。在GITHUB拥有复数个著名的轮子,著有《javascript框架设计》一书...

3788
来自专栏web前端教室

如何从零开始,形成自己的模块化思维方式?

计算机这东西不是凭空出现的,它是为了解决一些实际的问题,有很多时候是对现实世界的模拟。遇到问题时,经常会有人说,要有大局观,要具体问题具体分析,也可以牵强的解释...

842
来自专栏顶级程序员

单页应用(SPA)开发中的 Top 10 框架

要用原生 JavaScript 开发 web 应用 ? 呵呵哒!现在都追求开发效率,开发者需要要更高效的方式,于是 JavaScript 框架诞生了。JavaS...

3434
来自专栏较真的前端

[译]图解React

React、ReactJS、React.js、React Native… 这些有些相似的名词你最近听过多少遍了?对于它们究竟是什么你是否感到困惑?

742
来自专栏怀英的自我修炼

Java漫谈12

上周聊完了Java中的String这种类型,这周我想聊聊Java中的集装箱——集合。当然,这篇也是Java基础漫谈系列的最后一篇文章。不过可能你会说不对啊,Ja...

35111
来自专栏顶级程序员

如何掌握所有的程序语言

对的,我这里要讲的不是如何掌握一种程序语言,而是所有的…… 很多编程初学者至今还在给我写信请教,问我该学习什么程序语言,怎么学习。由于我知道如何掌握“所有”...

3379
来自专栏大宽宽的碎碎念

程序里怎么表达“没有”

最近忙着调研gRPC做服务治理,尝试用protobuf3重写现有的接口逻辑,发现了一个问题:protobuf3的基本类型不支持nullable。如果想表达“没有...

592
来自专栏java一日一条

如何掌握所有的程序语言

很多编程初学者至今还在给我写信请教,问我该学习什么程序语言,怎么学习。由于我知道标题问题的答案,所以总感觉这个问题是如此“低级”,一直没来得及回复 : P 可是...

440
来自专栏大前端开发

使用Vue开发微信小程序:mpvue框架

接触微信小程序有一段时间的开发者或开发团队,我相信多多少少都会为自己搭建封装一些便于开发的框架/脚手架,尤其是一些做过Web开发的开发者,受到现如今Web主流开...

1883
来自专栏韦弦的微信小程序

微信小程序展开全文

设置130为临界值,是试了3行基本不超过120rpx,4行基本大于140rpx,取了个中间值

791

扫码关注云+社区