前端每周清单半年盘点之WebAssembly篇

前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID：frontshow)，及时获取前端每周清单；本文则是对于半年来发布的前端每周清单中的WebAssembly相关的教程实践与开源项目的盘点，可以查看这里获得往期清单或者其他盘点篇。

教程实践

• 《对比探秘WebAssembly性能优越之谜》:本系列文章通过有趣的漫画介绍了WebAssembly的前世今生，并且与JavaScript就加载、解析、编译、执行等浏览进行了详细对比，从而介绍WebAssembly的性能缘何相较于JavaScript会好上很多。同时作者也强调，WebAssembly与JavaScript各有所长，未来并不会存在太多的竞争，更多的是相辅相成，各司其职。( http://suo.im/3jsTUH )

• 《浅析WebAssembly缘何优于Asm.js》：WebAssembly是新的Web中可执行格式，逐现代浏览器纷纷地提供了对于WebAssembly的原生支持；本文则是对于WebAssembly相较于asm.js带来的性能提升背后的原理进行简要介绍。(https://parg.co/bsv)

• 《简短的WebAssembly卡通指南》：现在有很多关于WebAssembly与JavaScript生态圈的讨论，人们往往关注于WebAssembly带来的巨大的性能提升以及它会如何颠覆现代Web开发。不过很多的介绍中并没有详细阐述隐藏在速度提升之后的具体细节，本文则是从整个JavaScript的演化史来介绍WebAssembly巨大性能提升的原因。( https://parg.co/bVa )

• 《理解WebAssembly的文件格式》：为了保证WebAssembly能够被人们阅读与理解，需要提供对于wasm二进制格式的文本表示。该特性着眼于能够在文本编辑器、浏览器开发者工具等开发工具中浏览WebAssembly文件，而本文则介绍了这种文件格式的规范与工作原理，以及底层的字节码与上层的JavaScript对象之间的关联关系。( https://parg.co/bk6 )

• 《这WebAssembly，是Mozilla赢了》：Mozilla提出1 asm.js与Google Chrome提出的PNaCI是都是致力于在浏览器中运行原生代码的技术方案。不过PNaCI却存在着自绝于JavaScript以及HTML等问题，并且其他的浏览器厂商很难去支持PNaCI标准。而asm.js则以轻量级的对于标准Web平台扩展的方式实现了这一目标，也就导致了最终WebAssembly决定靠近asm.js而不是PNaCI。( http://robert.ocallahan.org/2017/06/webassembly-mozilla-won.html )

• 《WebAssembly初体验：重构简单游戏引擎》：WebAssembly为我们提供了构建高性能的前端应用的途径，而本文则从零开始介绍如何使用C来覆写简单的JavaScript游戏引擎并且将其编译为WebAssembly。本文依次介绍了如何搭建基础的Emscription工具链、使用JavaScript引入wasm模块、覆写并且优化某个小型游戏引擎、两个引擎的性能评测等等部分。( http://blog.openbloc.fr/webassembly-first-steps/ )

• 《Figma利用WebAssembly降低三倍加载速度》：自WebAssembly推出之后，很多开发者都开始尝试在小型项目中实践WebAssembly，不过尚缺大型真实案例比较。而Figma因为其产品主要基于C++实现，可以方便地编译到WebAssembly中并且与原方案进行性能比较。本文中Figma介绍了它们在Firefox中使用WebAssembly之后带来的加载性能提升以及下载尺寸的优化，同时还提及了目前WebAssembly在实际项目使用中存在的一些问题与风险。( https://parg.co/biB )

• Rust、WebAssembly与Webpack：WebAssembly是新的运行于Web平台的二进制格式，我们能够将C、C++、Rust这些语言编译到.wasm文件格式中然后在浏览器环境下运行他们；通常这些编译后的代码在包体体积与运行速度上都会比JavaScript有明显提升。而本文则着眼于介绍如何在浏览器中执行底层的Rust代码，也可以参考这篇文章( https://parg.co/by4 )来了解更多的关于WebAssembly快速实践的知识。( https://parg.co/byh )

• WebAssembly在PSPDFKIT的实践：随着今年三月份WebAssembly Community Group就标准达成一致，越来越多的主流浏览器开始支持WebAssembly，本文即是PDF工具开发者PSPDFKIT介绍它们利用WebAssembly开发浏览器端渲染的PDS预览工具的实践经验。本文首先介绍了asm.js的工作原理与编译机制，然后阐述了WebAssembly的概念与组成，最后介绍了WebAssembly在PSPDFKit的实践经验以及他们在将原本大型C++代码库转化为WebAssembly格式时的体验；更多WebAssembly相关资料参考这里。

#开源项目

• asm-dom: asm-dom是轻量级的基于WebAssembly的Virtual DOM框架，其允许开发者使用C++来构建Web单页应用。开发者可以仅使用C++来编写Web应用，然后通过Emscripten来将其转化为WebAssembly；其能允许开发者直接使用现有的C++标准库代码，从而保证代码复用与性能提升。