document/TranslateProject
2
0
Fork 0
mirror of https://github.com/LCTT/TranslateProject.git synced 2025-01-25 23:11:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

translated

Browse Source
This commit is contained in:
geekpi 2021-03-10 08:34:33 +08:00
parent 5b1c27941e
commit 07c4991404
2 changed files with 85 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
sources/tech/20210304 An Introduction to WebAssembly.md
View File

@ -1,86 +0,0 @@
[#]: subject: (An Introduction to WebAssembly)
[#]: via: (https://www.linux.com/news/an-introduction-to-webassembly/)
[#]: author: (Dan Brown https://training.linuxfoundation.org/announcements/an-introduction-to-webassembly/)
[#]: collector: (lujun9972)
[#]: translator: (geekpi)
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )
An Introduction to WebAssembly
======
_By Marco Fioretti_
## **What on Earth is WebAssembly?**
[WebAssembly, also called Wasm][1], is a Web-optimized code format and API (Application Programming Interface) that can greatly improve the performances and capabilities of websites. Version 1.0 of WebAssembly, was released in 2017, and became an official W3C standard in 2019.
The standard is actively supported by all major browser suppliers, for obvious reasons: the official list of [“inside the browser” use cases][2] mentions, among other things, video editing, 3D games, virtual and augmented reality, p2p services, and scientific simulations. Besides making browsers much more powerful than JavaScript could, this standard may even extend the lifespan of websites: for example, it is WebAssembly that powers the continued support of [Flash animations and games at the Internet Archive][3].
WebAssembly isn’t just for browsers though; it is currently being used in mobile and edge based environments with such products as Cloudflare Workers.
## **How WebAssembly works**
Files in .wasm format contain low level binary instructions (bytecode), executable at “near CPU-native speed” by a virtual machine that uses a common stack. The code is packaged in modules – that is objects that are directly executable by a browser – and each module can be instantiated multiple times by a web page. The functions defined inside modules are listed in one dedicated array, or Table, and the corresponding data are contained in another structure, called arraybuffer. Developers can explicitly allocate memory for .wasm code with the Javascript WebAssembly.memory() call.
A pure text version of the .wasm format – that can greatly simplify learning and debugging – is also available. WebAssembly, however, is not really intended for direct human use. Technically speaking, .wasm is just a browser-compatible **compilation target**: a format in which software compilers can automatically translate code written in high-level programming languages.
This choice is exactly what allows developers to program directly for the preferred user interface of billions of people, in languages they already know (C/C++, Python, Go, Rust and others) but could not be efficiently used by browsers before. Even better, programmers would get this – at least in theory – without ever looking directly at WebAssembly code or worrying (since the target is a **virtual** machine) about which physical CPUs will actually run their code.
## **But we already have JavaScript. Do we really need WebAssembly?**
Yes, for several reasons. To begin with, being binary instructions, .wasm files can be much smaller – that is much faster to download – than JavaScript files of equivalent functionality. Above all, Javascript files must be fully parsed and verified before a browser can convert them to bytecode usable by its internal virtual machine.
.wasm files, instead, can be verified and compiled in a single pass, thus making “Streaming Compilation” possible: a browser can start to compile and execute them the moment it starts **downloading them**, just like happens with streaming movies.
This said, not all conceivable WebAssembly applications would surely be faster – or smaller – than equivalent JavaScript ones that are manually optimized by expert programmers. This may happen, for example, if some .wasm needed to include libraries that are not needed with JavaScript.
## **Does WebAssembly make JavaScript obsolete?**
In a word: no. Certainly not for a while, at least inside browsers. WebAssembly modules still need JavaScript because by design they cannot access the Document Object Model (DOM), that is the [main API made to modify web pages][4]. Besides, .wasm code cannot make system calls or read the browser’s memory. WebAssembly only runs in a sandbox and, in general, can interact with the outside world even less than JavaScript can, and only through JavaScript interfaces.
Therefore – at least in the near future – .wasm modules will just provide, through JavaScript, the parts that would consume much more bandwidth, memory or CPU time if they were written in that language.
## **How web browsers run WebAssembly**
In general, a browser needs at least two pieces to handle dynamic applications: a virtual machine (VM) that runs the app code and standard APIs that that code can use to modify both the behaviour of the browser, and the content of the web page that it displays.
The VMs inside modern browsers support both JavaScript and WebAssembly in the following way:
1. The browser downloads a web page written in the HTML markup language, and renders it
2. if that HTML calls JavaScript code, the browser’s VM executes it. But…
3. if that JavaScript code contains an instance of a WebAssembly module, that one is fetched as explained above, and then used as needed by JavaScript, via the WebAssembly APIs
4. and when the WebAssembly code produces something that would alter the DOM – that is the structure of the “host” web page – the JavaScript code receives it and proceeds to the actual alteration.
## **How can I create usable WebAssembly code?**
There are more and more programming language communities that are supporting compiling to Wasm directly, we recommend looking at the [introductory guides][5] from webassembly.org as a starting point depending what language you work with. Note that not all programming languages have the same level of Wasm support, so your mileage may vary. 
We plan to release a series of articles in the coming months providing more information about WebAssembly. To get started using it yourself, you can enroll in The Linux Foundation’s free [Introduction to WebAssembly][6] online training course.
The post [An Introduction to WebAssembly][7] appeared first on [Linux Foundation – Training][8].
--------------------------------------------------------------------------------
via: https://www.linux.com/news/an-introduction-to-webassembly/
作者：[Dan Brown][a]
选题：[lujun9972][b]
译者：[译者ID](https://github.com/译者ID)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://training.linuxfoundation.org/announcements/an-introduction-to-webassembly/
[b]: https://github.com/lujun9972
[1]: https://webassembly.org/
[2]: https://webassembly.org/docs/use-cases/
[3]: https://blog.archive.org/2020/11/19/flash-animations-live-forever-at-the-internet-archive/
[4]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
[5]: https://webassembly.org/getting-started/developers-guide/
[6]: https://training.linuxfoundation.org/training/introduction-to-webassembly-lfd133/
[7]: https://training.linuxfoundation.org/announcements/an-introduction-to-webassembly/
[8]: https://training.linuxfoundation.org/

85
translated/tech/20210304 An Introduction to WebAssembly.md Normal file
View File

@ -0,0 +1,85 @@
[#]: subject: (An Introduction to WebAssembly)
[#]: via: (https://www.linux.com/news/an-introduction-to-webassembly/)
[#]: author: (Dan Brown https://training.linuxfoundation.org/announcements/an-introduction-to-webassembly/)
[#]: collector: (lujun9972)
[#]: translator: (geekpi)
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )
WebAssembly 介绍
======
_Marco Fioretti 编写_
## **到底什么是 WebAssembly？**
[WebAssembly，也叫 Wasm][1]，是一种 Web 优化的代码格式和 API（应用编程接口），它可以大大提高网站的性能和能力。WebAssembly 的 1.0 版本，于 2017 年发布，并于 2019 年成为 W3C 官方标准。
该标准得到了所有主流浏览器供应商的积极支持，原因显而易见：官方列出的[“浏览器内部”用例][2]中提到了，其中包括视频编辑、3D 游戏、虚拟和增强现实、p2p 服务和科学模拟。除了让浏览器的功能比J avaScript 强大得多，该标准甚至可以延长网站的寿命：例如，正是 WebAssembly 为[互联网档案馆的 Flash 动画和游戏][3]提供了持续的支持。
不过，WebAssembly 并不只用于浏览器，目前它还被用于移动和基于边缘环境的 Cloudflare Workers 等产品中。
## **WebAssembly 如何工作**
.wasm 格式的文件包含低级二进制指令（字节码），可由使用通用栈的虚拟机以“接近 CPU 原生速度”执行。这些代码被打包成模块，也就是可以被浏览器直接执行的对象。每个模块可以被一个网页多次实例化。模块内部定义的函数被列在一个专用数组中，或称为 Table，相应的数据被包含在另一个结构中，称为 arraybuffer。开发者可以通过 Javascript WebAssembly.memory() 的调用，为 .wasm 代码显式分配内存。
.wasm 格式的纯文本版本可以大大简化学习和调试，同样也可以使用。然而，WebAssembly 并不是真的要供人直接使用。从技术上讲，.wasm 只是一个与浏览器兼容的**编译目标**：一种软件编译器可以自动翻译用高级编程语言编写的代码的格式。
这种选择正是使开发人员能够使用数十亿人熟悉的语言（C/C++、Python、Go、Rust 等）直接为用户界面进行编程的方式，但以前浏览器无法对其进行有效利用。更妙的是，程序员将得到这些，至少在理论上无需直接查看 WebAssembly 代码，也无需担心（因为目标是一个**虚拟**机）物理 CPU 将实际运行他们的代码。
## **但是我们已经有了 JavaScript，我们真的需要 WebAssembly 吗？**
是的，有几个原因。首先，作为二进制指令，.wasm 文件比同等功能的 JavaScript 文件小得多，下载速度也快得多。最重要的是，Javascript 文件必须在浏览器将其转换为其内部虚拟机可用的字节码之前进行完全解析和验证。
而 .wasm 文件则可以一次性验证和编译，从而使“流式编译”成为可能：浏览器在开始**下载它们**的那一刻就可以开始编译和执行它们，就像串流电影一样。
这就是说，并不是所有可以想到的 WebAssembly 应用肯定会比由专业程序员手动优化的等效 JavaScript 应用更快或更小。例如，如果一些 .wasm 需要包含 JavaScript 不需要的库，这种情况可能会发生。
## **WebAssembly 是否会让 JavaScript 过时？**
一句话：不会。当然暂时不会，至少在浏览器内不会。WebAssembly 模块仍然需要 JavaScript，因为在设计上它们不能访问文档对象模型 （DOM），也就是[主要用于修改网页的 API][4]。此外，.wasm 代码不能进行系统调用或读取浏览器的内存。WebAssembly 只能在沙箱中运行，一般来说，它能与外界的交互甚至比 JavaScript 更少，而且只能通过 JavaScript 接口进行。
因此，至少在不久的将来 .wasm 模块将只是通过 JavaScript 提供那些如果用 JavaScript 语言编写会消耗更多带宽、内存或 CPU 时间的部分。
## **网络浏览器如何运行 WebAssembly**
一般来说，浏览器至少需要两块来处理动态应用：运行应用代码的虚拟机 （VM），以及可以同时修改浏览器行为和网页显示的 API。
现代浏览器内部的虚拟机通过以下方式同时支持 JavaScript 和 WebAssembly：
1. 浏览器下载一个用 HTML 标记语言编写的网页，然后进行渲染
2. 如果该 HTML 调用 JavaScript 代码，浏览器的虚拟机就会执行该代码。但是...
3. 如果 JavaScript 代码中包含了 WebAssembly 模块的实例，那么就按照上面的描述获取该实例，然后根据需要通过 JavaScript 的 WebAssembly API 来使用该实例
4. 当 WebAssembly 代码产生的东西将修改 DOM 即“宿主”网页的结构，JavaScript 代码就会接收到，并继续进行实际的修改。
## **我如何才能创建可用的 WebAssembly 代码？**
越来越多的编程语言社区支持直接编译到 Wasm，我们建议从 webassembly.org 的[入门指南][5]开始，这取决于你使用什么语言。请注意，并不是所有的编程语言都有相同水平的 Wasm 支持，因此你的工作量可能会有所不同。 
我们计划在未来几个月内发布一系列文章，提供更多关于 WebAssembly 的信息。要自己开始使用它，你可以报名参加 Linux 基金会的免费 [WebAssembly 介绍][6]在线培训课程。
这篇[WebAssembly 介绍][7]首次发布在 [Linux Foundation – Training][8]。
--------------------------------------------------------------------------------
via: https://www.linux.com/news/an-introduction-to-webassembly/
作者：[Dan Brown][a]
选题：[lujun9972][b]
译者：[geekpi](https://github.com/geekpi)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://training.linuxfoundation.org/announcements/an-introduction-to-webassembly/
[b]: https://github.com/lujun9972
[1]: https://webassembly.org/
[2]: https://webassembly.org/docs/use-cases/
[3]: https://blog.archive.org/2020/11/19/flash-animations-live-forever-at-the-internet-archive/
[4]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
[5]: https://webassembly.org/getting-started/developers-guide/
[6]: https://training.linuxfoundation.org/training/introduction-to-webassembly-lfd133/
[7]: https://training.linuxfoundation.org/announcements/an-introduction-to-webassembly/
[8]: https://training.linuxfoundation.org/