深入了解JavaScript 的 WebAssembly


Posted in Javascript onJune 15, 2019

JavaScript 的 WebAssembly

本周发布的 Firefox 52 加入了对 WebAssembly 的支持,成为第一个支持 WebAssembly 标准的浏览器,而其它浏览器如 Chrome 57、Safari 和 Edge 也都会陆续支持 WebAssembly。WebAssembly 源于Mozilla 发起的 Asm.js 项目,设计补充而非取代 JavaScript,它是一个二进制格式,容易翻译到原生代码,本地解码速度比 JS 解析快得多,让高性能的 Web 应用在浏览器上运行成为可能,比如视频游戏、计算机辅助设计、视频和图像编辑、科学可视化等等。

未来,现有的生产力应用和 JavaScript 框架都有可能使用 WebAssembly,能显著降低加载速度,同时改进运行性能。开发者可以将针对 CPU 密集计算的 WebAssembly 库整合到现有的 Web 应用中。

你听说过 WebAssembly 吗?这是由 Google , Microsoft , Mozilla , Apple 等几家大公司合作发起的一个关于 面向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大神的演讲视频地址(油管,需FQ): 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%的代码量。虽然这仅仅是一个原型。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
通过实例了解js函数中参数的传递
Jun 15 #Javascript
RxJS的入门指引和初步应用
Jun 15 #Javascript
js中let能否完全替代IIFE
Jun 15 #Javascript
回顾Javascript React基础
Jun 15 #Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 #Javascript
微信小程序版本自动更新的方法
Jun 14 #Javascript
vue+express+jwt持久化登录的方法
Jun 14 #Javascript
You might like
php5 and xml示例
2006/11/22 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
Python与shell的3种交互方式介绍
2015/04/11 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python zip()函数用法实例分析
2018/03/17 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
python实现一个简单的ping工具方法
2019/01/31 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
python脚本后台执行方式
2019/12/21 Python
Django choices下拉列表绑定实例
2020/03/13 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
应届生财务会计求职信
2013/11/05 职场文书
中学运动会广播稿
2014/01/19 职场文书
委托书样本
2014/04/02 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
听证通知书
2015/04/24 职场文书
房产电话营销开场白
2015/05/29 职场文书
无故旷工检讨书
2015/08/15 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python