《深入浅出WebAssembly》

书海网短评：
适读人群：Web前端相关从业人员，对Web前端技术感兴趣的人员，C／C++程序员本书带你一步跨越计算机系统底层机制及C++、编译原理鸿沟，快速拥抱WebAssembly。对于想进一步了解语言和浏览器引擎

编辑推荐

适读人群：Web前端相关从业人员，对Web前端技术感兴趣的人员，C／C++程序员

《深入浅出WebAssembly》带你一步跨越计算机系统底层机制及C++、编译原理鸿沟，快速拥抱WebAssembly。

对于想进一步了解语言和浏览器引擎原理的开发者来说，这是一本非常好的进阶学习书籍。

WebAssembly带来多语言生态、超Android|iOS的原生性能，是穿透JavaScript最后障碍的银弹。

从原理入手，深入到渲染引擎、编译器，详细介绍各项特性，通过实例介绍WebAssembly开发调试。

内容简介

WebAssembly是一种新的二进制格式，它可以方便地将C/C++等静态语言的代码快速地“运行”在浏览器中，这一特性为前端密集计算场景提供了无限可能。不仅如此，通过WebAssembly技术，我们还可以将基于Unity等游戏引擎开发的大型游戏快速地移植到Web端。WebAssembly技术现在已经被计划设计成W3C的标准，众多浏览器厂商已经提供了对其MVP版本标准的支持。在GoogleI/O2017大会上，Google首次针对WebAssembly技术进行了公开演讲和推广，其Post-MVP版本标准更是对诸如DOM操作、多线程和GC等特性提供了支持。WebAssembly所带来的Web技术变革势不可挡。

《深入浅出WebAssembly》力求从一些简单的实践入手，深入理论，到复杂的具有实际业务价值的综合实践，深入浅出地介绍Wasm技术发展至今，其背后所涉及的各种底层设计原理与实现、相关工具链以及未来发展方向等多方面内容。《深入浅出WebAssembly》内容包括：WebAssembly技术的发展历程，从PNaCl到ASM.js再到WebAssembly，以及这些技术的基本应用方法与性能对比；WebAssembly的标准上层API、底层堆栈机的设计原理，以及对MVP标准理论的深入解读；与WebAssembly标准相关的进阶内容，如单指令多数据流（SIMD）、动态链接（DL）等；LLVM工具链与WAT可读文本格式的相关内容；基于Emscripten工具链开发WebAssembly应用的基本流程，以及工具链的一些基本常用功能和特性；基于Emscripten工具链实现C/C++语言动态关系绑定技术；Emscripten工具链所提供的一些如WebGL支持、虚拟文件系统、应用优化以及HTML5事件系统等高级应用特性；构建一个具有实际业务价值的WebAssembly应用，现阶段Wasm生态的发展情况，以及在Post-MVP标准中制订的一些WebAssembly未来发展规划。

《深入浅出WebAssembly》的目标读者为Web前端开发人员、C/C++开发人员和对WebAssembly技术感兴趣的人员。

作者简介

于航，现就职于阿里巴巴/饿了么事业部（BU），资深前端工程师，FreeCodeCamp(FCC)China上海社区负责人，QCon(2017)上海前端专场讲师。2016年开始研究WebAssembly技术，2017年加入WebAssembly中国社区，同年加入官方WCG（W3CCommunityGroup），定期参与WCG组织的各种线上视频研讨会议，在跟进WebAssembly新发展的同时，也为WebAssembly的标准化提出自己的建议和意见。生活中喜欢弹钢琴、演讲与分享。主要技术研究方向为Web前端与基础设施架构、WebAssembly、LLVM以及编译器等相关领域。

精彩书评

WebAssembly在前端领域是一种全新的技术，它让Web的世界变得更丰富、更强大，同时可以作为一座桥梁把更多语言、生态和社区汇入Web之中。这《深入浅出WebAssembly》从如何使用WebAssembly到其背后的原理和周边的工具都做了方方面面的介绍，希望可以帮助读者进入WebAssembly的大门，同时也期待未来大家在WebAssembly上有更多的实践。

——赵锦江，阿里巴巴高级前端技术专家（花名“勾股”，开源项目Vue.js团队的一员，曾任W3CHTML中文兴趣组联合主席）

作为一种面向未来的技术，WebAssembly很有可能是解决JavaScript痼疾的一颗“银色子弹”。作为一名JavaScript工程师，很有必要率先对WebAssembly进行深入了解。非常可惜的是，WebAssembly涉及过多的计算机系统相对底层的机制，没有系统学习过C++、编译原理等内容的JavaScript程序员会感到无从下手。《深入浅出WebAssembly》很好地填补了这一空白，作者首先假设读者只具备浅显的C++知识，由浅入深地带你走入WebAssembly的世界。在武侠小说的体系中，武功通常被分为“招式”和“内力”两种。招式可以让习武者快速拉开自己与普通人之间的差距，但是高手过招，看似不起眼的内力才是重要的。如果你只擅长JavaScript一种招式并且内力不足，那么在阅读这《深入浅出WebAssembly》的过程中会倍感吃力。如果坚持下来，自身的“内力”会得到显著增强，你将学到很多虽然对眼下工作并无帮助，但是会让你的编程人生收获颇多的知识。

——王泽，白鹭引擎首席架构师

《深入浅出WebAssembly》从原理入手，深入到渲染引擎、编译器，详细介绍WebAssembly的各项特性，同时通过实例介绍如何使用WebAssembly进行开发调试。对于想进一步了解语言和浏览器引擎原理的开发者来说，这是一本非常好的进阶学习书籍。

——徐川，InfoQ中国主编

WebAssembly是一项很棒的技术。Web平台第1次有了不弱于Android和iOS的原生性能，第1次混入了多语言生态。它解决了Web平台的两个痛点：一个是性能；一个是单语言生态。而这些对于未来Web的发展都是具有深远影响的。因此，掌握WebAssembly技术，也是未来Web开发的一个趋势。但由于WebAssembly技术的复杂性，理解和掌握这项技术并不是一件容易的事情。这《深入浅出WebAssembly》从WebAssembly的设计和原理出发，由浅入深，转入实践和应用，帮助Web开发人员充分理解WebAssembly的知识体系。它几乎涵盖了理解WebAssembly所需要的所有知识，是WebAssembly领域不可多得的好书。

——郭力恒，广发证券前端架构师（QCon讲师，曾在腾讯、迅雷等互联网公司担任资深前端开发工程师，负责多项产品的研发）

精彩书摘

序言（一）

I’mveryexcitedtoseethisbook,whichcoversingreatdetailawiderangeoftopicsregardingWebAssembly.AtthispointintimeWebAssemblyisaroundoneyearold-ifwecountfromwhenitshippedinallmajorbrowsers-soit’sstillfairlyyoung,andtheindustryisjuststartingtofigureouthowrevolutionaryitisgoingtobe.Thepotentialisthereforhugeimpact,andgooddocumentationisnecessaryforthat.

WhyisWebAssembly’spotentialimpactsolarge?Forseveralreasons:

WebAssemblyhelpsmaketheWebfast:WebAssemblyisdesignedforsmalldownloadsize,faststartup,andpredictablyfastexecution.TheimprovementcomparedtoJavaScriptcanbeverysignificant,over2xinmanycases,andespeciallyinstartup,wherethespeedupcanbe10x.

WebAssemblymakestheWebcompetitivewithnative:WebAssemblyisdesignedasacompilertargetformultiplelanguages.ThatincludesCandC++,andinmanyareasofsoftwarethebestimplementationsareinthoselanguages,forexample,gameengineslikeUnityandUnreal,designsoftwarelikeAutoCAD,etc.ItwouldtakemanyyearstowritecomparableproductsinJavaScript;instead,bycompilingthemtoWebAssembly,theWebcanbeonparwithnativeplatformstoday.

WebAssemblyalsofillsanindustryneedoutsidetheWeb:WebAssemblyisfast,portable,sandboxed,hasmultipleexcellentopensourceimplementations,andjustliketheWebitselfitisanindustrystandardexpectedtobesupportedforthelongterm.Asaresult,it’snotsurprisingthatWebAssemblyisstartingtobeusedoutsideofbrowsers,forexampleintheblockchainandcontentdeliverynetwork(CDN)spaces.

Lookingback,it’sremarkablethatourindustryhasgottentothispoint.Justafewyearsago,therewasnocross-browsercollaborationongettingnativecodetorunontheWeb.Instead,thereweremultipleoptions,includingNativeClient,AdobeAlchemy,andASM.js,eachwithitsownadvantagesanddisadvantages.IbelieveitwasthemomentumofASM.jsthatgottheindustrytofocusonfixingthings:ASM.jsstartedoutinFirefox,andbyvirtueofbeingasubsetofJavaScriptitimmediatelyraninallbrowsers-justnotasefficiently.ThatledtopcompaniesinthevideogameindustryandelsewheretoadoptASM.js,togetherwithEmscripten,theopensourcecompilertoJavaScriptthatIstartedin2010,andwhichcouldemitASM.js.ThatadoptionledtoASM.jssupportinEdgeandlaterChrome,atwhichpointtherewasconsensusthattheindustryshouldproduceaproperstandardinthisspace,whichturnedintoWebAssembly.Asthespecwasdesignedandimplementationsstartedtoappear,weaddedWebAssemblysupporttoEmscripten,whichallowedpeopletocompiletobothASM.jsandWebAssemblybyjustflippingaswitch,makingiteasyforpeopletousethenewtechnology.Finally,asofMay2018EmscriptenemitsWebAssemblybydefault,andtodayWebAssemblyhasrobustandstablesupportbothinallmajorbrowsersandinthetoolchainprojectsthatemitit.

It’sbeenacomplicatedpathtogethere,butthefuturelooksbright.ItisespeciallyworthnotingthatWebAssemblyisexpectedtoaddfeatureslikemultithreading,SIMD,GC,andothers,whichwillopenupevenmoreinterestingopportunities.

AlonZakai

AlonisaresearcheratMozilla,whereheworksoncompile-to-Webtechnologies.Alonco-createdWebAssemblyandASM.js,andcreatedtheEmscriptenandBinaryenopensourceprojectswhicharepartoftheprimaryWebAssemblycompilertoolchain.

译文：

我很高兴能够看到这《深入浅出WebAssembly》的出版，作者在书中详细地介绍了有关WebAssembly的各种主题。在这《深入浅出WebAssembly》即将出版之际，WebAssembly差不多一岁了——如果从所有主流的Web浏览器开始支持WebAssembly算起，那么这项技术仍然相当年轻，业界也才刚刚开始意识到它将多么具有革命性。WebAssembly所拥有的潜力将会在未来对IT行业产生巨大的影响，但在此之前，我们需要有优秀的文档。

为什么WebAssembly的潜在影响力会如此之大？有以下几个原因。

WebAssembly让Web应用运行更快。WebAssembly是一种新的格式，文件体积更小，启动速度更快，运行速度也更快。与使用JavaScript构建的Web应用相比，性能提升非常明显。在大部分情况下，运行速度提升两倍以上，特别是在启动速度方面，速度提升可以达到10倍。

WebAssembly让Web应用能够与原生应用展开竞争。WebAssembly是多种编程语言的编译器目标，包括C和C++。基于这些编程语言实现的优秀软件，如游戏引擎Unity、Unreal，设计软件AutoCAD等，如果使用JavaScript开发在功能上与这些软件旗鼓相当的产品可能需要很多年时间。但如果将它们编译成WebAssembly，这些原生应用就可以直接运行在Web平台上。因此，Web能够与原生平台相提并论。

WebAssembly还在Web领域之外为行业带来了其他可能性。WebAssembly运行速度快、可移植，提供了沙箱机制，并拥有众多优秀的开源实现，就像Web本身一样，它将会是一个被长期支持的行业标准。因此，WebAssembly开始被应用在Web浏览器之外的领域也就不足为奇了，例如区块链和内容分发网络（CDN）。

回首过去，我们的行业能够取得如此的成就已经很了不起了。几年前，还没有人去进行这种跨浏览器协作，以便让原生代码运行在Web平台上。不过有很多不同的项目，如NativeClient、AdobeAlchemy和ASM.js，它们都在尝试做同样的事情，只是每个项目都有各自的优缺点。而我认为，是ASM.js的出现让业界开始专注于解决这个问题——ASM.js最初出现在Firefox中，由于它是JavaScript的一个子集，因此可以无缝地运行在所有浏览器中，但运行效率不高。视频游戏等行业的一些顶级的公司开始尝试使用ASM.js和Emscripten（我在2010年开源的编译器工具链，可以将代码编译成ASM.js）。由于在这些领域的广泛应用，Edge以及后来的Chrome均开始支持ASM.js。此时，人们一致认为这个领域需要一个行业标准，于是WebAssembly出现了。

随着规范设计和实现的不断演进，我们在Emscripten中加入了WebAssembly支持——只需要在编译命令中加入一个“开关”，便可选择性地将编译目标设置为ASM.js或WebAssembly，从而可以更轻松地使用这项新技术。截至2018年5月，Emscripten已经将默认的编译目标类型改为WebAssembly。今天，WebAssembly已经在所有主流浏览器和工具链项目中得到了强大而稳定的支持。

一路走来历经坎坷，但未来是光明的。特别值得注意的是，WebAssembly将会在未来添加多线程、SIMD、GC等功能，而这些新特性将会为我们带来更多有趣的可能性。

——AlonZakai（Alon是Mozilla的研究员，从事与“编译到Web平台”相关的研究工作。Alon参与制定了WebAssembly和ASM.js标准，并创建了Emscripten和Binaryen等开源项目，这些项目都是WebAssembly编译器工具链的重要组成部分）

序言（二）

前端的可玩性变得越来越高，也越来越开放了。现如今，我们不仅仅能够使用HTML、CSS及Javascript来编写各种跨端的应用程序，WebAssembly的出现还让我们能够以极小的成本来复用其他领域已存在的成果，以此来弥补JavaScript在其性能与功能上的不足。

我第一次了解到WebAssembly是在2017年年初，当时沉迷于想自己制作一个基于Node.js环境和树莓派的语音助手。可惜对于语音处理这个领域来说，JavaScript还是一个“新人”，大量成熟的实现成果主要集中在C/C++领域。因此，对于当时对Node.js扩展及C/C++了解甚少的我来说，这是难度颇大的一个门槛。后来通过Twitter我了解到WebAssembly的前身是ASM.js，于是我立即尝试使用Emscripten将GoogleAssistant的LinuxSDK编译为ASM.js，并顺利地在Node.js环境中进行了调用，那份喜悦我记忆犹新，同时这也极大地提升了我对这项技术的信心和好感。之后在全民直播的技术提升项目中，我与另一位研发人员有幸一起对最核心的播放器组件编解码和弹幕协议加密部分进行WebAssembly化，并成功上线且获得了极大的性能提升。在此之后，我坚信WebAseembly在未来一定会大有可为。

由于WebAssembly是一项极新的技术，因此在最初学习WebAssembly的过程中常常觉得知识零碎且不成体系，经常会出现浮沙驻高塔的情形，感觉入门十分困难。好在《深入浅出WebAssembly》的出版，让这种情形不再复现。这《深入浅出WebAssembly》的好处就是它系统详细地讲述了WebAssembly的方方面面，由浅入深地构建了整个WebAssembly的知识体系。不管你是刚接触WebAssembly的新人，还是已经在工作场景中使用WebAssembly的“老鸟”，通过阅读这《深入浅出WebAssembly》都能够得到极大的提升。总之，如果你想了解WebAssembly，或者想补足相关的知识体系，它都是一本不可多得的案头好书。风雨欲来，如果现在还不进行WebAssembly的技术储备，更待何时？

最后，我要感谢于航让我第一时间读到如此精彩的作品，同时也感谢他对WebAssembly在国内的布道普及所做的工作，我相信WebAssembly的未来一定会更加美好，Web的未来也会更加开放和美好。

——赵洋（赵洋是“全民直播”的前端研发经理，曾经主导全民直播播放器编解码核心模块及弹幕协议加密过程WebAssembly化）

前言/序言

前言

为什么要写这《深入浅出WebAssembly》

自从JavaScript（后面简称JS）脚本语言于1995年诞生以来，人们便一直在使用该语言以及HTML与CSS来编写和开发以浏览器为主的Web应用。近年来，随着JS的不断流行，以及Node.js的出现，JS也开始逐渐向除Web前端之外的其他领域发力，比如开发后端应用、机器学习应用乃至硬件编程等领域。但就JS本身而言，所不能无视的是它是一种弱类型语言，因此，相比于C/C++等强类型语言，尽管ChromeV8、SpiderMonkey等JS引擎已经通过诸如JIT等多种技术手段来优化JS脚本代码的整体执行效率，但引擎每一次版本优化的迭代速度（所花费的时间）却远远跟不上当今各类Web应用的复杂程度变化。因此，发明一种能够从根本上解决该问题的技术便显得迫在眉睫。

曾昙花一现的ASM.js、NaCl与PNaCl等技术都尝试以其各自的方式来优化Web应用的执行效率，但由于其所存在的诸如“浏览器兼容性不佳”以及“性能优化不彻底”等问题，导致它们最终并没有被广泛推广。而在2015年出现的WebAssembly（简称Wasm）技术，便是在吸取了前者经验教训的基础上而被设计和发明出来的。现在，我们可以看到该项技术所具有的潜力——W3C成立了专门的WWG工作组来负责Wasm技术的标准迭代与实现，四大主流浏览器（GoogleChrome、FireFox、Edge和Safari）已经全部实现WebAssembly技术在其MVP标准中制定的所有特性，C/C++、Go和Rust等高级语言已经逐渐开始支持编译到Wasm格式。这一系列的发展和变化都说明了人们对该项技术所寄予的厚望。

如今世间百态，万物的发展速度越来越快，而前端技术领域也同样如此，正在转向技术融合的道路——从2000年专门指代PC网页技术的Web前端，到2010年左右包含有H5技术的前端，再到融合了移动端甚至部分后端技术的“大前端”。“前端”一词所指代的技术实体正变得越来越模糊，已经不单单是指我们所熟知的JS、HTML与CSS了，正如大学里生物学专业与化学专业两者融合后所形成的“生物化学专业”一样。技术本身并无好坏之分，只有能否适用于某些业务场景。而技术的融合则正好能够发挥各项技术本身所具备的优势，达到“1+1>2”的效果。WebAssembly技术便正是如此。

在写作《深入浅出WebAssembly》的过程中，笔者曾与WWG的核心成员Alon、Ben和JF等专家进行了多次交流，以力求保证书中各个技术细节的正确性。但Wasm技术发展非常之快，比如Emscripten工具链每天都会有众多的“commit”被提交到主分支中，新版本的发布也是以“周”甚至“天”为单位进行的。因此，书中所述内容并不保证会在今后的半年甚至一年时间里都具有时效性。而对于相关内容的时效性变化，笔者也会在对应于《深入浅出WebAssembly》的Github仓库（详见“勘误和支持”部分）中及时进行标注。作为国内第一本介绍WebAssembly的技术书籍，希望《深入浅出WebAssembly》的内容能够为国内互联网基础技术的发展做出微小的贡献。虽然现阶段我们还无法完全地自主创新，或者参与到各项国际技术标准的制定过程中，但唯有紧跟其脚步，才能够伺机超越。

《深入浅出WebAssembly》特色

作为市面上第一本深入介绍WebAssembly技术的相关书籍，笔者尝试由浅入深地来介绍与Wasm技术相关的各种底层理论知识，以及相关编译器工具链的内部实现结构与使用方法。WebAssembly技术从其第一版MVP标准诞生至今，时间过去并不久，但抽象的英文官方文档并不适合各类Web前端开发工程师直接进行阅读。从另一个方面来看，虽然我们可以在国内如“百度”等中文搜索引擎上找到部分与Wasm实践相关的介绍文章，但它们大都不会深入该技术标准的背后，探寻该技术的底层设计本质。因此，《深入浅出WebAssembly》力求从一些简单的实践入手，深入理论，再到复杂的具有实际业务价值的综合实践，深入浅出地介绍Wasm技术发展至今，其背后所涉及的各种底层设计原理与实现、相关工具链以及未来发展方向等多方面内容。

由于WebAssembly并不是一种单方面的前端或后端技术，因此在《深入浅出WebAssembly》中，我们将会随着内容的深入逐渐接触到除Web前端技术之外的诸如编译原理、V8引擎、LLVM以及Linux动态链接等多方面内容。笔者将会用最简单和直观的方式，由浅入深地介绍这些平日里可能很少接触到的技术与特性。

另外，作为市面上首本与WebAssembly相关的纯技术类书籍，笔者只能从自己所接触到的Wasm相关技术中，按照各个知识点的相关性与重要性来编排内容。相信读者在读完整《深入浅出WebAssembly》后，一定会对Wasm技术背后的实现原理以及相关技术有着进一步的理解。

读者对象

□Web前端开发人员。

□C/C++开发人员。

□对WebAssembly技术感兴趣的人员。

《深入浅出WebAssembly》内容

《深入浅出WebAssembly》分为8章。

第1章：《深入浅出WebAssembly》的开篇，主要介绍WebAssembly技术的发展历程，从PNaCl到ASM.js再到WebAssembly，以及这些技术的基本应用方法与性能对比。

第2章：介绍WebAssembly的标准上层API、底层堆栈机的设计原理，以及对MVP标准理论的深入解读。

第3章：介绍与WebAssembly标准相关的进阶内容，如单指令多数据流（SIMD）、动态链接技术等。

第4章：由浅入深地介绍LLVM工具链与WAT可读文本格式的相关内容。

第5章：从理论走向实践，从本章开始介绍基于Emscripten工具链开发WebAssembly应用的基本流程，以及工具链的一些基本常用功能和特性。

第6章：介绍基于Emscripten工具链实现的C/C++语言动态关系绑定技术。

第7章：从基础走向深入，继续介绍Emscripten工具链所提供的一些如WebGL支持、虚拟文件系统、应用优化以及事件系统等高级应用特性。

第8章：构建一个具有实际业务价值的WebAssembly应用，并介绍现阶段Wasm生态的发展情况，以及在Post-MVP标准中制订的一些WebAssembly未来发展规划。

勘误和支持

作为市面上首本介绍WebAssembly相关技术的书籍，《深入浅出WebAssembly》在内容组织与编排上全部由笔者一人完成。由于笔者的知识水平有限，以及编写时间仓促，书中难免会出现一些错误或不准确的地方，恳请读者批评指正。如果你有更多的宝贵意见，欢迎在笔者的Github仓库“Book-DISO-WebAssembly”下创建“issue”，留下你的问题、意见或建议，笔者会在第一时间给予答复。

致谢

首先要感谢的是Emscripten工具链的作者Alon，在编写Emscripten实践部分时，通过邮件与他沟通了很多技术细节上的内容。Alon是Mozilla的技术研究员，他主要负责维护和开发Emscripten与Binaryen两个重要的WebAssembly工具链。Alon平日工作繁忙，非常感谢他能够抽出时间为我指导技术，以及《深入浅出WebAssembly》内容组织方面的事情，并为《深入浅出WebAssembly》写了序言。

其次要感谢的是我的女朋友，工作本已十分繁忙，而写书路漫漫，这期间曾遇到过无数次难以下笔、不知所措的时刻，而她却总是能在关键时刻鼓励我陪我共渡难关。在写书的半年多时间里，基本上所有的双休日都是在家中或咖啡馆度过的，没有时间陪伴，希望能够和你一同见证《深入浅出WebAssembly》出版的时刻。

还要感谢的是我的好友以及家人。早早地立下写书的誓言，正是因为有了你们每天的监督，我才能督促自己完成每天规定的任务，最终完成《深入浅出WebAssembly》所有章节的编写。

最后要感谢的是《深入浅出WebAssembly》的策划编辑张春雨，2017年上海QCon全球软件开发大会之后，他通过微信找到了作为讲师的我，并给予我这次写书的机会。但十分抱歉的是，由于我的日程和时间安排不当，导致《深入浅出WebAssembly》的出版比预定时间晚了近三个月。但张老师并没有放弃我，这里真的要说一声：“感谢您对我的信任”。

关于源码

关于《深入浅出WebAssembly》第3章、第4章和第5章中所涉及的相关源代码示例，读者可以在笔者Github账号（https://github.com/Becavalier）下的“Cinderella”和“Book-DISO-WebAssembly”仓库中找到完整的代码文件。其他章节中所涉及的部分源代码文件，也会被同时整理并放置到上面的“Book-DISO-WebAssembly”仓库中。