深入了解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 相关文章推荐
js函数般调用正则
Apr 08 Javascript
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 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
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
javascript数组的扩展实现代码集合
2008/06/01 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
python提取log文件内容并画出图表
2019/07/08 Python
python装饰器使用实例详解
2019/12/14 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
企划专员岗位职责
2013/12/09 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
法制教育主题班会
2015/08/13 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android