初遇 WebAssembly

原创 2018年04月16日 13:05:36

作者自己整理的有关于 WebAssembly 的信息,目的是让初级的开发人员更好的认识WebAssembly,本人学识有限并不会深入讲解,有错误敬请各位大佬指出。

一、 WebAssembly 历史

       对于WEB开发领域,JavaScript一直存在的问题无法解决,这是这门语言在当初设计时就留下痼疾。诸多前端大佬都想着如何改进这种不完善的机制,微软的typescript,Google的Dart与V8引擎,当然还有WebAssembly的前身,Mozilla的asm.js ,等等,都是对于JavaScript的补充和扩展,说到这里不得不提在2008年浏览器性能大战中众多参战浏览器引入了just-in-time技术,正是由于JIT的引入使得JS代码的执行速度提高了20至50倍。一夜之间,我们突然发现我们无所不能。

    当初JavaScript的设计并不是对性能要求十分强烈,但是随着前端项目复杂度和需求的不断提升,我们越来越苛责Javascript。现如今JavaScript近乎是前端语言的规范,有着庞大的生态圈。对于JavaScript性能的压榨似乎到了极限。面临着各种各样的问题,2015年大佬们聚在一起创立了WebAssembly社区组。发展到现在越来越多的开发者加入到对于WebAssembly的开发中来,可以从git上的WebAssembly项目的贡献者列表管中窥豹,包括但不限于Google、苹果、微软,Mozilla等各大企业的大佬,由此可见前景。

2018年二月份提出WEBASSEMBLY首次公开工作草案

二、WebAssembly 简介

    WebAssembly是一种新的字节码格式,它更像是一个编译器而不是一种开发语言。.wasm是文件名后缀,WebAssembly不仅提高了性能并且也保证了底层的安全性。WebAssembly速度快是它最大的优点,网上很多大神都对其性能做了比较详尽的测试,以下是其中一份我认为比较专业的测试表格。

Browser System Average JS animation time(ms) Average WASM animation time(ms) Improvement
Chrome Windows 98.3 6.8 14.5x
Ubuntu 39.5 4.6 8.6x
Android(rougher results) 210 21 10x
Firefox Windows 91.3 9.8 9.3x
Ubuntu 70.4 7.5 9.3x
Edge Windows 111.7 7.5 14.9x

有几个知识点
一、多数显示器的最大值为每秒60FPS,平均帧时间为16.6ms
二、各电影电视通常保持在24FPS上下, 平均帧时间为42ms
三、任何小于10FPS的画面都是不可忍受的

    理论上WebAssembly是JavaScript的一个子集,但是它们两者并没有实际意义上的这种关系。WebAssembly还有一个吸引人的特性那就是它允许前端开发人员使用其他编译语言进行JavaScript开发,并且相同的.wasm.js文件,前者编译后生成的文件会比后者在体量上小的多,其中有一个数据,300k(压缩过)的JavaScript逻辑代码,改用WebAssembly重写后,体量仅有90k左右。虽然WebAssembly有着丰富的优点,但是它还不完美。

    首先,因为JavaScript庞大的生态圈,WebAssembly这种要老命的革命方式必然会受到挤压。其次,各大浏览器对WebAssembly的支持仅仅在当前最高版本,而且还不时冒出BUG。再次,WebAssembly本身也并不完美,它需要引入50k到100k的JavaScript类库,代码是二进制无法在浏览器中直接看见源码,等。总之,WebAssembly还很年轻,甚至可以说它还是一个婴儿。

三、安装与使用

作者暂时还在观望中,并不打算学习,想要尝尝鲜的自行百度。╮(๑•́ ₃•̀๑)╭

四、总结

    不管如何WebAssembly对于前端开发都是革命性的,用作者的话说就是我们大前端快要无所不能啦~~~~
(ノ—_—)ノ~┴————┴

我在托普的日子—军训(三)

  军训是在所谓的阅兵式中结束的。   出发点是园区的别墅区,那时还没有修建完成,路上还有很多的干燥的泥土,一脚踏上去就能踏出一朵尘雾来。整个上午,数百人就在这条路上来回走了几次,就为了下午所谓的“...
  • foxfly
  • foxfly
  • 2004-04-29 20:54:00
  • 1219

WebAssembly 应用案例直击,它们都在用 WebAssembly

(点击上方公众号,可快速关注)来源: 开源中国https://my.oschina.net/editorial-story/blog/1615877摘要: WebAssembly 都在哪些场景中应用了...
  • VhWfR2u02Q
  • VhWfR2u02Q
  • 2018-02-01 00:00:00
  • 352

在 NodeJS 中体验 WebAssembly技术

你听说过 WebAssembly 吗?这是由 Google , Microsoft , Mozilla , Apple 等几家大公司合作发起的一个关于 面向Web的通用二进制和文本格式 的项目。 ...
  • cengjingcanghai123
  • cengjingcanghai123
  • 2017-03-18 10:41:00
  • 2080

如何在浏览器中使用WebAssembly特性

WebAssembly是一个新的重大网页技术,顾名思义“网页的汇编语言”。[参考阅读:什么是WebAssembly,为什么需要WebAssembly]该技术得到Mozilla、Google和Micro...
  • iefreer
  • iefreer
  • 2017-03-02 22:12:26
  • 8365

关于WebAssembly的一些介绍和开发

近几年,WebAssembly在快速的成长中,被称为未来的web发展方向。本文主要介绍关于WebAssembly的一篇介绍,包括和asm.js的一些对比,以及WebAssembly的一些特性和开发方式...
  • szengtal
  • szengtal
  • 2017-09-17 12:50:09
  • 830

WebAssembly你需要了解的7件事

Auth0是一家企业级网络认证服务提供商,致力于为用户提供流畅可扩展的认证解决方案。近日,该公司的工程师Seba Peyrott在文章中为我们介绍了关于WebAssembly技术你需要了解的7件事情。...
  • debugconsole
  • debugconsole
  • 2016-03-01 20:10:05
  • 1735

WebAssembly 实践:如何写代码

WebAssembly 实践:如何写代码
  • ztguang
  • ztguang
  • 2017-06-05 16:05:24
  • 1556

Blazor正式成为Microsoft官方.NET 和WebAssembly项目

Microsoft从Blazor的开发者Steve Sanderson手中接手了这款应用程序,自此,将.NET在浏览器运行的计划又更进了一步。由此,Microsoft又进一步扩充了自己的WebAsse...
  • sD7O95O
  • sD7O95O
  • 2018-02-23 00:00:00
  • 225

实验进行中:.NET WebAssembly支持

目前四大主流浏览器都默认支持WebAssembly,而.NET社区也在继续推动为.NET开发者提供相关能力,来将他们的代码编译成WebAssembly,然后在浏览器上运行。WebAssembly是一种...
  • sD7O95O
  • sD7O95O
  • 2017-12-15 00:00:00
  • 399

使WebAssembly更快:Firefox最新的流式分层编译器

很多人认为WebAssembly是一种可能改变游戏规则的技术,因为它可以使代码在Web上运行得更快。目前已经有了一些 WebAssembly加速技术,还有一些加速方案即将出现。 其中一种加速技术就是...
  • u014738140
  • u014738140
  • 2018-01-26 23:10:44
  • 314
收藏助手
不良信息举报
您举报文章:初遇 WebAssembly
举报原因:
原因补充:

(最多只允许输入30个字)