深入了解JavaScript 的 WebAssembly

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%的代码量。虽然这仅仅是一个原型。

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

(0)

相关推荐

  • 基于JS实现web端录音与播放功能

    纯js实现web端录音功能,功能并不是特别多,逐步增加中,详细地址:github. getUserMedia在非localhost和127的情况下,需要开启https,由于腾讯云的没备案,demo就不放了,可以自行获取代码并启动测试. 实现方式 实现原理的话,主要是以下三点, 利用webrtc的getUserMedia方法获取设备音频输入,使用audioprocess得到音频流(pcm流,范围-1到1). 转码,利用前端中的ArrayBuffer等二进制操作按采样位数处理流信息. 使用decod

  • WebGL学习教程之Three.js学习笔记(第一篇)

    webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染. WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏. 原生的WebGl比较复杂,主要通过对顶点着色器和片元着色器的操作,来实现渲染,但实现起来比较复杂,需要一定的数学基础,但更多的是需要学习

  • WebGL three.js学习笔记之阴影与实现物体的动画效果

    实现物体的旋转.跳动以及场景阴影的开启与优化 本程序将创建一个场景,并实现物体的动画效果 运行的结果如图: 运行结果 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Three.js</title> <script src="../../../Import/three.js

  • 详解Flutter WebView与JS互相调用简易指南

    本文采用Flutter官方WebView插件:https://pub.dartlang.org/packages/webview_flutter WebView与JS互相调用是一个刚需,但是貌似现在大家写的文章讲的都不是很清楚,我这个简易指南简单粗暴地分为两部分:JS调用Flutter和Flutter调用JS,拒绝花里胡哨,保证一看就懂,一学就会. 开始之前先简单了解一下官方WebView所包含的API: onWebViewCreated:在WebView创建完成后调用,只会被调用一次: ini

  • node.js ws模块搭建websocket服务端的方法示例

    首先下载websocket模块,命令行输入 npm install ws node.js的 模块ws,可用于创建websocket服务,基本的express 和 http模块的使用 var express = require('express'); var http = require('http'); var WebSocket = require('ws'); var app = express(); var server = http.createServer(app); var wss

  • node.js中ws模块创建服务端和客户端,网页WebSocket客户端

    首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require("ws"); // 启动基于websocket的服务器,监听我们的客户端接入进来. var server = new ws.Server({ host: "127.0.0.1", port: 6080, }); // 监听接入进来的客户端事件 function webs

  • js实现web调用摄像头 js截取视频画面

    本文实例为大家分享了JS实现截取视频画面的具体代码,供大家参考,具体内容如下 Html <p> <button onclick="openMedia()">打开</button> <button onclick="closeMedia()">关闭</button> <button onclick="drawMedia()">截取</button> </p&g

  • 深入了解JavaScript 的 WebAssembly

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

  • 带你了解JavaScript的运行原理

    目录 浏览器内核 JavaScript 引擎 V8 引擎 了解JavaScript 是如何运行的,以及的它的运行机制,首先,我们要了解浏览器的内核: 浏览器内核 了解过的都知道:不同的浏览器是由不同的内核组成,那么有哪些内核以及我们常用的浏览器都使用了那些内核: Gecko:早期被Netscape和Mozilla Firefox浏览器浏览器使用: Trident:微软开发,被IE4~IE11浏览器使用,但是Edge浏览器已经转向Blink: Webkit:苹果基于KHTML开发.开源的,用于Sa

  • JavaScript进阶知识点作用域详解

    目录 JavaScript进阶讲解一 一.浏览器的内核 1.常见的浏览器内核 二.JavaScript引擎 2.1.为什么需要JavaScript引擎? 2.2.常见的JavaScript引擎 三.V8引擎 3.1.官方定义 3.2.解析过程图示 四.JS的执行过程 4.1 普通代码执行 4.1 函数如何执行? 五.作用域提升理解undefined JavaScript进阶讲解一 接下来,我会给大家讲解js中让人让人迷惑的知识点,比如: 作用域.函数.闭包.面向对象.ES新特性.事件循环.微任务

  • Python之父谈Python的未来形式

    6月初,Python之父Guido van Rossum在今天的PyCon US大会上作了名为"Python Language"的演讲.近日,他又接受了IT媒体Infoworld的采访,大谈Python的未来.我们一起来看看Guido老爹对Python的 未来是怎么看的吧. Python在移动计算领域的应用 Guido:移动对Python来说仍是一个很难啃下来的平台,但是并没有浏览器平台的难度大,因为Python实际上是可以运行在所有品牌智能手机上的.你只需要找到懂得怎样构建移动版本P

  • Python和JavaScript间代码转换的4个工具

    选 Python 还是 JavaScript?虽然不少朋友还在争论二者目前谁更强势.谁又拥有着更为光明的发展前景,但毫无疑问,二者的竞争在 Web 前端领域已经拥有明确的答案.立足于浏览器平台,如果放弃 JavaScript,我们也就没什么可选择的项目了. 好吧,也许答案也不是这么绝对.JavaScript 已经成为众多其它编程语言争相选择的转换目标(相关实例包括 TypeScript.Emscripten.Cor 以及 Cheerp).而 Python 则拥有庞大的追随者群体,另外现有的强大库

  • 改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件

    前言 最近我们已经见识了WebAssembly如何快速编译.加速JS库以及生成更小的二进制格式.我们甚至为Rust和JavaScript社区以及其他Web编程语言之间的更好的互操作性制定了高级规划.正如前面一篇文章中提到的,我想深入了解一个特定组件的细节,wasm-bindgen. 今天WebAssembly标准只定义了四种类型:两种整数类型和两种浮点类型.然而,大多数情况下,JS和Rust开发人员正在使用更丰富的类型! 例如,JS开发人员经常与互以添加或修改HTML节点相关的文档交互,而Rus

  • 打包非 JavaScript 静态资源详情

    目录 1.打包工具中的自定义导入 2.浏览器和打包工具中通用的导入语法 3.模棱两可的相对URL 4.工具链中的支持 4.1 打包工具 5. WebAssembly 5.1  通过Emscripten编译的C/C++ 5.2 通过 wasm-pack / wasm-bindgen 编译的 Rust 6.未来的导入方式 6.1  import.meta.resolve 6.2 导入断言 7.小结 8.参考资料 本文翻译自 https://web.dev/bundling-non-js-resour

  • 分享JavaScript 类型判断的几种方法

    目录 一.JavaScript 基本类型 1.原始数据类型 2.引用数据类型 3.两种数据类型的存储方式 二.Javascript 数据类型判断的几种方法 1.typeof 2.instanceof 3.构造函数(constructor) 4.Object.prototype.toString.call() 三.写在最后 一.JavaScript 基本类型 首先介绍一下JavaScript中的八大基本类型 1.原始数据类型 除对象类型(object)以外的其它任何类型定义的不可变的值(值本身无法

  • Go语言对前端领域的入侵WebAssembly运行原理

    目录 引言 WebAssembly 运行原理 Go WebAssembly 运行原理 Go WebAssembly 初体验 第一步 第二步 第三步 第四步 第五步 Javascript 真的需要担心 Go WebAssembly 的威胁么? 引言 从 Go 语言诞生以来,它就开始不断侵蚀 Java .C.C++ 语言的领地.今年下半年 Go 语言发布了 1.11 版本,引入了 WebAssembly 技术,浏览器端 Javascript 的垄断地位也开始遭遇 Go 语言的攻击.这次不同以往,它意

  • 如何在JavaScript中运行.NET Core代码详情

    目录 一.前言 二.DotNetJS 三.Demo 1. 创建项目 2. 实现C#代码 3. 实现JS代码 4. 运行效果 四.结论 一.前言 在.NET Core中运行JavaScript代码,目前已经有很多实现方案. 但是,如果你希望在纯JavaScript环境中运行.NET Core代码呢? 那么,DotNetJS可能对你有所帮助. 二.DotNetJS DotNetJS可以将C#项目编译为与任何环境兼容的单文件JavaScript库,无论是Web浏览器,Node.js还是自定义限制空间,

随机推荐