关于WebAssembly你需要了解的7件事
<p></p><div>来源：http://www.infoq.com/cn/news/2015/10/webassembly-7-things</div><div><br></div><div><p style="margin-bottom: 15px; border: 0px; float: none; line-height: 25.2px; color: rgb(0, 0, 0); clear: both; width: 610px; font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, Helvetica, sans-serif;"><a href="https://auth0.com/" style="text-decoration: none; color: rgb(40, 106, 178); border: 0px; outline: none !important;">Auth0</a>是一家企业级网络认证服务提供商，致力于为用户提供流畅可扩展的认证解决方案。近日，该公司的工程师Seba Peyrott在文章中为我们介绍了<a href="https://auth0.com/blog/2015/10/14/7-things-you-should-know-about-web-assembly/" style="text-decoration: none; color: rgb(40, 106, 178); border: 0px; outline: none !important;">关于WebAssembly技术你需要了解的7件事情</a>。</p><p style="margin-bottom: 15px; border: 0px; float: none; line-height: 25.2px; color: rgb(0, 0, 0); clear: both; width: 610px; font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, Helvetica, sans-serif;">WebAssembly是一项由Mozilla、谷歌、微软及苹果联合开发的项目，致力于为各种语言定义一种二进制形式的编译目标格式，并设计一种可与当前的Web平台集成并在Web环境中执行的方案，最终实现在各类平台上以接近原生的速度调用常见的硬件功能。如果你尚未接触过WebAssembly，可以阅读发表于InfoQ的译文《<a href="http://www.infoq.com/cn/news/2015/06/webassembly-wasm" style="text-decoration: none; color: rgb(40, 106, 178); border: 0px; outline: none !important;">WebAssembly：面向Web的通用二进制和文本格式</a>》稍作了解，也可查看WebAssembly团队发布于Github的<a href="https://github.com/WebAssembly/design" style="text-decoration: none; color: rgb(40, 106, 178); border: 0px; outline: none !important;">相关设计文档</a>进行深入探究。</p><p style="margin-bottom: 15px; border: 0px; float: none; line-height: 25.2px; color: rgb(0, 0, 0); clear: both; width: 610px; font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, Helvetica, sans-serif;">Seba Peyrott首先定义了五个与WebAssembly有关的词：源代码、编译器、汇编、字节码、机器码，其中字节码是一种可运行于其它应用中的低阶二进制代码表示，机器码是可直接运行于硬件之上的二进制代码表示。而WebAssembly所做的正是为Web打造一套专用的字节码，这项标准在未来应用场景可能是这样的：</p><ol style="margin-top: 10px; margin-bottom: 10px; margin-left: 10px; padding-left: 20px; border: 0px; width: 549px; clear: left; color: rgb(0, 0, 0); font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, Helvetica, sans-serif; line-height: 25.2px;"><li style="margin-top: 4px; margin-bottom: 4px; margin-left: 0px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;">开发应用，但使用任何一门可被编译为WebAssembly的语言编写源代码。</li><li style="margin-top: 4px; margin-bottom: 4px; margin-left: 0px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;">用编译器将源代码转换为WebAssembly字节码，也可按需转换为汇编代码。</li><li style="margin-top: 4px; margin-bottom: 4px; margin-left: 0px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;">在浏览器中加载字节码并运行。</li></ol><p style="margin-bottom: 15px; border: 0px; float: none; line-height: 25.2px; color: rgb(0, 0, 0); clear: both; width: 610px; font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, Helvetica, sans-serif;"><img src="http://cdn.infoqstatic.com/statics_s2_20160816-0334/resource/news/2015/10/webassembly-7-things/zh/resources/1.png" width="550" style="border: 0px; margin-right: 10px; margin-bottom: 10px; max-width: 100%;"></p><p style="margin-bottom: 15px; border: 0px; float: none; line-height: 25.2px; color: rgb(0, 0, 0); clear: both; width: 610px; font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, Helvetica, sans-serif;">而你需要了解的这七个事实分别是：</p><ol style="margin-top: 10px; margin-bottom: 10px; margin-left: 10px; padding-left: 20px; border: 0px; width: 549px; clear: left; color: rgb(0, 0, 0); font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, Helvetica, sans-serif; line-height: 25.2px;"><li style="margin-top: 4px; margin-bottom: 4px; margin-left: 0px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;"><span style="font-weight: 600; border: 0px;">WebAssembly不会替代JavaScript</span>。Sebastián认为，越来越多的语言和平台想在Web上大展手脚，这会迫使JavaScript和浏览器厂商不得不加快步伐来补充缺失的功能，其中某些功能通过复杂的JavaScript语义来实现并不合适，所以WebAssembly可以作为JavaScript的补集加入到Web阵营中来。WebAssembly最一开始的设计初衷就是作为不依赖于JavaScript的编译目标而存在，进而获得了主流浏览器厂商的广泛支持。</li><li style="margin-top: 4px; margin-bottom: 4px; margin-left: 0px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;"><span style="font-weight: 600; border: 0px;">WebAssembly由参与组建asm.js和(P)NaCl的团队共同开发</span>。Mozilla的<span style="font-weight: 600; border: 0px;">asm.js</span>项目初始目标是制定一套JavaScript子集作为编译目标，然而Google的<span style="font-weight: 600; border: 0px;">(P)NaCl（(Portable) Native Client）</span>则选择为基于LLVM的Web平台提供一套二进制格式。Web平台不由某一厂商独立控制，理应由大家共同参与维护，所以这些团队目前正共同开发一套跨浏览器的编译目标。</li><li style="margin-top: 4px; margin-bottom: 4px; margin-left: 0px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;"><span style="font-weight: 600; border: 0px;">WebAssembly向后兼容</span>。团队会针对老版本浏览器提供polyfill支持，目前已经构建出<a href="https://github.com/WebAssembly/polyfill-prototype-1" style="text-decoration: none; color: rgb(40, 106, 178); border: 0px; outline: none !important;">初始原型</a>，也可以通过<a href="http://lukewagner.github.io/AngryBotsPacked/" style="text-decoration: none; color: rgb(40, 106, 178); border: 0px; outline: none !important;">demo1</a><a href="http://lukewagner.github.io/PlatformerGamePacked/" style="text-decoration: none; color: rgb(40, 106, 178); border: 0px; outline: none !important;">和demo2</a>体验最新的技术（注：高能预警，请提前保存所有重要文档，打开demo后会非常卡）。</li><li style="margin-top: 4px; margin-bottom: 4px; margin-left: 0px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;"><p style="margin-bottom: 15px; border: 0px; line-height: 1.8; clear: both; width: 539px; float: none !important;"><span style="font-weight: 600; border: 0px;">WebAssembly比CPU汇编代码更简单易懂</span>。WebAssembly所以描述的结构是<span style="font-weight: 600; border: 0px;">抽象语法树（abstract syntax tree，简称AST）</span>，它同时也提供一些高阶结构，例如：循环和分支。如果了解语法规则，你可以手写WebAssembly结构，将编译后的二进制文件反编译的结果也是可读的，WebAssembly甚至支持在已编译文件中添加调试信息。下面有两段WebAssembly示例可以参考：</p><ol style="margin-top: 10px; margin-bottom: 10px; margin-left: 10px; padding-left: 20px; border: 0px; width: 485.094px; clear: left;"><li style="margin-top: 4px; margin-bottom: 4px; margin-left: 0px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;"><p style="margin-bottom: 15px; border: 0px; line-height: 1.8; clear: both; width: 475.094px; float: none !important;">类<a href="https://zh.wikipedia.org/wiki/S-%E8%A1%A8%E8%BE%BE%E5%BC%8F" style="text-decoration: none; color: rgb(40, 106, 178); border: 0px; outline: none !important;">s-表达式</a>AST，<a href="https://github.com/WebAssembly/spec/blob/master/ml-proto/test/fac.wast" style="text-decoration: none; color: rgb(40, 106, 178); border: 0px; outline: none !important;">完整示例</a></p><pre style="margin-top: 10px; margin-bottom: 10px; padding: 10px 10px 10px 5px; border: 1px solid rgb(232, 232, 232); font-family: Consolas, Monaco, "Andale Mono", monospace; color: rgb(49, 78, 100); line-height: 21px; width: 465.578px; overflow: auto; clear: none; float: none !important; background-color: rgb(245, 242, 240); background-position: -29px 0px;">;; Iterative factorial named(func $fac-iter (param $n i64) (result i64)
(local $i i64)
(local $res i64)
(set_local $i (get_local $n))
(set_local $res (i64.const 1))
(label $done
(loop
(if
(i64.eq (get_local $i) (i64.const 0))
(break $done)
(block
(set_local $res (i64.mul (get_local $i) (get_local $res)))
(set_local $i (i64.sub (get_local $i) (i64.const 1)))
)
)
)
)
(return (get_local $res))
)</pre></li><li style="margin-top: 4px; margin-bottom: 4px; margin-left: 0px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;"><p style="margin-bottom: 15px; border: 0px; line-height: 1.8; clear: both; width: 475.094px; float: none !important;">另一种表示方法，<a href="https://github.com/ncbray/wassembler/blob/master/demos/simple.wasm" style="text-decoration: none; color: rgb(40, 106, 178); border: 0px; outline: none !important;">完整示例</a></p><pre style="margin-top: 10px; margin-bottom: 10px; padding: 10px 10px 10px 5px; border: 1px solid rgb(232, 232, 232); font-family: Consolas, Monaco, "Andale Mono", monospace; color: rgb(49, 78, 100); line-height: 21px; width: 465.578px; overflow: auto; clear: none; float: none !important; background-color: rgb(245, 242, 240); background-position: -29px 0px;">export func main() i32 {
storeI32(temp, 0);
var i i32 = 0;
done: while (i < 10) {
i = i + 1;
if (i >= 7) {
break done;
}
}
return (i + ifelse(0, 1, 2) * 2) * loadI32(temp) + loadI32(scale);
}</pre></li></ol></li><li style="margin-top: 4px; margin-bottom: 4px; margin-left: 0px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;"><span style="font-weight: 600; border: 0px;">WebAssembly将超出JavaScript所需的功能进行扩展</span>。根据项目文档中的<a href="https://github.com/WebAssembly/design/blob/master/MVP.md" style="text-decoration: none; color: rgb(40, 106, 178); border: 0px; outline: none !important;">最小可行产品（MVP）</a>原则，WebAssembly初期将实现asm.js的所有功能，但是会将其文字表达形式转换为二进制格式，以此来进一步优化加载时间。在未来的版本中，可能有如下几方面的突破：<ul style="margin-bottom: 15px; margin-left: 10px; list-style: disc; border: 0px; clear: left;"><li style="margin-left: 15px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;">完整的线程支持</li><li style="margin-left: 15px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;">单指令多数据（SIMD）类型与内联函数</li><li style="margin-left: 15px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;">零成本异常（堆栈检查与展开）</li><li style="margin-left: 15px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;">协同程序</li><li style="margin-left: 15px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;">动态连接</li><li style="margin-left: 15px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;">DOM集成</li><li style="margin-left: 15px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;">集成垃圾回收</li><li style="margin-left: 15px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;">尾调用优化</li><li style="margin-left: 15px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;">多进程支持</li></ul></li><li style="margin-top: 4px; margin-bottom: 4px; margin-left: 0px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;"><span style="font-weight: 600; border: 0px;">支持在浏览器中开启Source-maps功能调试编译后代码</span>。通过添加Source-maps的支持，可以在调试字节码的过程中有效避免“调试地狱”，WebAssembly也支持在二进制格式文件中直接添加调试信息，简化调试过程是其标准中定义的内容之一。</li><li style="margin-top: 4px; margin-bottom: 4px; margin-left: 0px; padding-left: 10px; border: none; float: none; clear: none; text-align: left;"><span style="font-weight: 600; border: 0px;">即刻行动，无须等待</span>。WebAssembly集asm.js与NaCl二者之精华，如果你想马上体验这些新兴的技术，建议选择asm.js进行体验，<a href="https://github.com/kripken/emscripten" style="text-decoration: none; color: rgb(40, 106, 178); border: 0px; outline: none !important;">Emscripten</a>可以帮助你把其它代码转换成asm.js。由于WebAssembly尚处于孕育期，开发者们仍然会继续维护asm.js，通过它在Github上的仓库你仍可得到相应的支持。</li></ol><p style="margin-bottom: 15px; border: 0px; float: none; line-height: 25.2px; color: rgb(0, 0, 0); clear: both; width: 610px; font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, Helvetica, sans-serif;">无论在官方文档还是在其它文章中，我们一直关注如何在Web平台上应用WebAssembly技术，往往忽略了通过这个平台同时也实现了JavaScript与其它语言互相调用的可能性。总而言之，WebAssembly刚刚起步，同时它是多个主流厂商共同支持的解决方案，念念不忘，必有回响，我们继续期待着。</p></div><div><br></div>
页:
[1]