1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
---
title: Основы WebAssembly
slug: WebAssembly/Concepts
translation_of: WebAssembly/Concepts
---
<div>{{WebAssemblySidebar}}</div>
<p class="summary">В этой статье объясняются концепции, лежащие в основе работы технологии WebAssembly, включая ее цели, проблемы, которые она решает, и то, как она работает в движке рендеринга веб-браузера.</p>
<h2 id="Что_такое_WebAssembly">Что такое WebAssembly?</h2>
<p>WebAssembly - это технология, предоставляющая новый тип кода, который можно запускать в современных веб-браузерах, что обеспечивает новые функции и значительное повышение производительности. Код для WebAssembly не предназначен для написания вручную, скорее он спроектирован для эффективной компиляции из низкоуровневых исходных языков, таких как C, C++, Rust и.т.д.</p>
<p>WebAssembly позволяет запускать код, написанный на различных языках в web-приложениях почти c естественной скоростью. Это имеет огромное значение для веб-платформы, так как ранее это нельзя было сделать.</p>
<p>Более того, вам даже не нужно знать, как создавать код WebAssembly, чтобы его использовать. Модули WebAssembly можно импортировать в веб-приложение (или Node.js), и экспортировать из них функции для использования через JavaScript. JavaScript-фреймворки могут использовать модули WebAssembly для получения огромных преимуществ в производительности и новых функций, в то же время делая их функциональность легко доступной для веб-разработчиков.</p>
<h2 id="Цели_WebAssembly">Цели WebAssembly</h2>
<p>Технология WebAssembly создается как открытый стандарт внутри <a href="https://www.w3.org/community/webassembly/">W3C WebAssembly Community Group</a> со следующими целями:</p>
<ul>
<li>Быть быстрым, эффективным и переносимым - код WebAssembly может выполняться практически на естественной скорости на разных платформах, используя преимущества <a href="http://webassembly.org/docs/portability/#assumptions-for-efficient-execution">аппаратных возможностей</a>.</li>
<li>Быть читаемым и отлаживаемым - WebAssembly - это низкоуровневый ассемблерный язык, но он имеет читабельный текстовый формат (спецификация для которого еще дорабатывается), который позволяет писать, просматривать и отлаживать код вручную. </li>
<li>Поддерживать безопасность - код WebAssembly предназначен для запуска в безопасной, изолированной среде выполнения. Как и другой веб-код, он будет соблюдать политики безопасности браузера.</li>
<li>Не разрушать текущий веб - технология WebAssembly разработана так, что она прекрасно сочетается с другими веб-технологиями и поддерживает обратную совместимость.</li>
</ul>
<div class="note">
<p><strong>Примечание</strong>: Технология WebAssembly также будет иметь возможность использования за пределами веб и JavaScript-сред (см. <a href="http://webassembly.org/docs/non-web/">Встраивание вне Web</a>).</p>
</div>
<h2 id="Как_WebAssembly_встраивается_в_веб-платформу">Как WebAssembly встраивается в веб-платформу?</h2>
<p>Веб-платформа может рассматриваться как состоящая из двух частей:</p>
<ul>
<li>Виртуальная машина (ВМ), на которой выполняется код веб-приложения, например код JavaScript, который обеспечивает работу ваших приложений.</li>
<li>Набор <a href="/en-US/docs/Web/API">Web API</a>, которые веб-приложение может вызывать для управления функциональными возможностями веб-браузера / устройства и выполнения задач (<a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/en-US/docs/Web/API/CSS_Object_Model">CSSOM</a>, <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, и т.д.)</li>
</ul>
<p>Исторически ВМ могла загружать только JavaScript. Раньше нас это вполне устраивало, поскольку JavaScript достаточно мощный, чтобы решать большинство проблем, с которыми мы сталкивались в интернете. Однако мы столкнулись с проблемами производительности, когда попытались использовать JavaScript для более нагруженных сценариев использования, таких как 3D-игры, виртуальная и дополненная реальность, компьютерное зрение, редактирование изображений / видео и в ряде других применений, которые требуют повышенной производительности (см. <a href="http://webassembly.org/docs/use-cases/">варианты использования WebAssembly</a> где описано больше идей).</p>
<p>Кроме того, длительность загрузки, анализа и компиляции очень больших приложений JavaScript может быть непомерно высокой. Мобильные и другие ограниченные в ресурсах платформы могут еще более понизить производительность.</p>
<p>Язык WebAssembly отличается от языка JavaScript, но он не предназначен для его замены. Он предназначен для дополнения и работы вместе с JavaScript, что позволяет веб-разработчикам использовать преимущества обоих языков:</p>
<ul>
<li>JavaScript - это язык высокого уровня, гибкий и достаточно выразительный для написания веб-приложений. Он имеет много преимуществ - он динамически типизирован, не требует этапа компиляции и обладает огромной экосистемой, которая предоставляет мощные фреймворки, библиотеки и другие инструменты.</li>
<li>WebAssembly - это низкоуровневый язык, похожий на ассемблер, с компактным двоичным форматом, который работает с почти естественной производительностью и предоставляет низкоуровневые модели памяти для таких языков как C++ и Rust, с целью компиляции, чтобы они могли работать в интернете. (Обратите внимание, что у WebAssembly на будущее есть <a href="http://webassembly.org/docs/high-level-goals/">высокоуровневая цель</a> по поддержке языков со сборщиками мусора в модели памяти).</li>
</ul>
<p>С появлением WebAssembly в браузерах виртуальная машина, о которой мы говорили ранее, теперь будет загружать и запускать два типа кода - JavaScript и WebAssembly.</p>
<p>Различные типы кода могут вызывать друг друга по мере необходимости - <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly JavaScript API</a> оборачивает экспортированный код WebAssembly в функции JavaScript, которые можно вызывать обычным способом. А в код WebAssembly можно импортировать и синхронно вызывать обычные функции JavaScript. Фактически, базовая единица кода WebAssembly называется модулем, а модули WebAssembly во многом схожи с модулями ES2015.</p>
<h3 id="Ключевые_понятия_WebAssembly">Ключевые понятия WebAssembly</h3>
<p>Есть несколько ключевых понятий, необходимых для понимания того, как WebAssembly работает в браузере. Все эти понятия отражены 1:1 в <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly JavaScript API</a>.</p>
<ul>
<li><strong>Модуль</strong>: Представляет двоичный файл WebAssembly, который был скомпилирован браузером в исполняемый машинный код. Модуль не имеет состояния и, таким образом, как <a href="/en-US/docs/Web/API/Blob">Blob</a>, может быть явным образом разделен между windows и workers (через <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>). В модуле есть объявление импорта и экспорта точно такое же, как и в модуле ES2015.</li>
<li><strong>Память</strong>: Массив ArrayBuffer изменяемого размера, который содержит линейный массив байтов, считываемых и записываемых инструкциями низкоуровневого доступа к памяти в WebAssembly. </li>
<li><strong>Таблица</strong>: Типизированный массив ссылок изменяемого размера (например, для функций), которые не могут быть размещены в памяти в виде байтов (по соображениям безопасности и переносимости).</li>
<li><strong>Экземпляр</strong>: Модуль в паре со своим состоянием, которое он использует во время выполнения, включая память, таблицу и набор импортируемых значений. Экземпляр модуля похож на модуль ES2015, который был загружен в определенную глобальную переменную с определенным набором импортов.</li>
</ul>
<p>JavaScript API предоставляет разработчикам возможность создавать модули, объекты памяти, таблицы и экземпляры модулей. Получив экземпляр модуля WebAssembly, код JavaScript может синхронно вызывать его экспорты, которые представляются как обычные функции JavaScript. Любые функции JavaScript также могут синхронно вызываться кодом WebAssembly путем передачи этих функций в качестве импорта в экземпляр модуля WebAssembly.</p>
<p>Поскольку JavaScript полностью контролирует загрузку, компиляцию и запуск кода WebAssembly, разработчики JavaScript могут рассматривать технологию WebAssembly как расширение JavaScript для эффективной генерации высокопроизводительных функций.</p>
<p>В будущем модули WebAssembly будут загружаться так же, как и <a href="https://github.com/WebAssembly/design/issues/1087">модули ES2015</a> (с использованием <code><script type='module'></code>), что означает, что JavaScript сможет извлекать, компилировать и импортировать модуль WebAssembly так же легко, как модуль ES2015.</p>
<h2 id="Как_я_могу_использовать_WebAssembly_в_своем_приложении">Как я могу использовать WebAssembly в своем приложении?</h2>
<p>Выше мы говорили о низкоуровневых примитивах, которые WebAssembly добавляет к веб-платформе: двоичный формат для кода и API для его загрузки и запуска. Теперь давайте поговорим о том, как мы можем использовать эти примитивы на практике.</p>
<p>Экосистема WebAssembly находится на начальной стадии; больше инструментов, несомненно, появится в будущем. На данный момент есть три основные отправные точки:</p>
<ul>
<li>Портирование приложения C/C++ с <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>. </li>
<li>Написание или генерация WebAssembly кода непосредственно на уровне сборки.</li>
<li>Написание приложения Rust и выбор WebAssembly в качестве типа вывода при построении.</li>
</ul>
<p>Давайте поговорим об этих вариантах:</p>
<h3 id="Портирование_из_CC">Портирование из C/C++</h3>
<p>Из множества вариантов создания кода WASM есть два наиболее популярных - это онлайн-сборщик wasm или <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>. Существует еще несколько вариантов сборки WASM, таких как:</p>
<ul>
<li><a href="https://wasdk.github.io/WasmFiddle/">WasmFiddle</a></li>
<li><a href="https://anonyco.github.io/WasmFiddle/">WasmFiddle++</a></li>
<li><a href="https://mbebenita.github.io/WasmExplorer/">WasmExplorer</a></li>
</ul>
<p>Это отличные ресурсы для людей, которые хотят начать, но у них нет инструментов и возможностей Emscripten.</p>
<p>Инструмент Emscripten способен взять практически любой исходный код C/C++ и скомпилировать его в модуль .wasm, добавив необходимый "связующий" JavaScript-код для загрузки и запуска модуля в HTML-документе и отображения результатов работы.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14647/emscripten-diagram.png" style="display: block; height: 104px; margin: 0px auto; width: 764px;"></p>
<p>В двух словах, процесс работает следующим образом:</p>
<ol>
<li>Сначала Emscripten передает код C/C++ в clang + LLVM - набор инструментов компилятора C/C++ с открытым исходным кодом, который поставляется, например, как часть XCode для OSX.</li>
<li>Emscripten преобразует скомпилированный результат clang + LLVM в двоичный файл .wasm. </li>
<li>Сам по себе код WebAssembly в настоящее время не может напрямую обращаться к DOM; он может вызывать только JavaScript, передавая целочисленные и числа с плавающей точкой примитивные типы данных. Таким образом, чтобы получить доступ к любому Web-API, WebAssembly модуль должен обращаться к JavaScript, который затем вызывает Web-API. Поэтому Emscripten создает необходимый для этого связующий код HTML и JavaScript.</li>
</ol>
<div class="note">
<p><strong>Примечание</strong>: В будущем планируется <a href="https://github.com/WebAssembly/gc/blob/master/README.md">позволить WebAssembly напрямую вызывать Web API</a>.</p>
</div>
<p>Связующий код JavaScript не так прост, как вы можете себе представить. Прежде всего Emscripten предоставляет популярные библиотеки C/C++, такие как <a href="https://en.wikipedia.org/wiki/Simple_DirectMedia_Layer">SDL</a>, <a href="https://en.wikipedia.org/wiki/OpenGL">OpenGL</a>, <a href="https://en.wikipedia.org/wiki/OpenAL">OpenAL</a> и части <a href="https://en.wikipedia.org/wiki/POSIX">POSIX</a>. Эти библиотеки реализованы с точки зрения Web-API, и поэтому каждой из них требуется некоторый код JavaScript для соединения WebAssembly модуля с базовым Web-API.</p>
<p>Таким образом, часть связующего кода предоставляет функциональность каждой библиотеки, используемой кодом C/C++. Связующий код также содержит логику для вызова вышеупомянутых WebAssembly JavaScript API для извлечения, загрузки и запуска файла .wasm.</p>
<p>Сгенерированный HTML-документ загружает связующий файл JavaScript и может записать stdout в {{htmlelement("textarea")}}. Если приложение использует OpenGL, HTML документ будет содержать элемент {{htmlelement("canvas")}}, который будет использоваться для рендеринга. Очень легко изменить тип вывода компиляции Emscripten на любое веб-приложение, которое вам нужно.</p>
<p>Вы можете найти полную документацию по Emscripten на <a href="http://emscripten.org">emscripten.org</a>, а также руководство по созданию набора инструментов и компиляции вашего собственного приложения на C/C++ в wasm в разделе <a href="https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm">Компилирование из C/C++ в WebAssembly</a>.</p>
<h3 id="Написание_WebAssembly_напрямую">Написание WebAssembly напрямую</h3>
<p>Хотите создать свой собственный компилятор, собственные инструменты или библиотеку JavaScript, которая генерирует WebAssembly во время выполнения?</p>
<p>Аналогично другим ассемблерным языкам, двоичный формат WebAssembly имеет текстовое представление с которым имеет соответствие 1:1. Вы можете написать или сгенерировать этот формат вручную, а затем преобразовать его в двоичный формат с помощью любого из <a href="http://webassembly.org/getting-started/advanced-tools/">инструментов преобразования текста в двоичные файлы WebAssembly</a>.</p>
<p>Простое руководство о том, как это сделать, смотрите в нашей статье <a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Text_format_to_wasm">Перевод из текстового формата WebAssembly в wasm</a>.</p>
<h3 id="Написание_приложения_Rust_с_компиляцией_в_WebAssembly">Написание приложения Rust с компиляцией в WebAssembly</h3>
<p>Благодаря неустанной работе рабочей группы Rust WebAssembly, стало возможно писать Rust код и компилировать его в WebAssembly. В нашей статье <a href="/en-US/docs/WebAssembly/Rust_to_wasm">Компиляция из Rust в WebAssembly</a> описан процесс установки необходимого набора инструментов, компиляция примера программы Rust в пакет npm для WebAssembly с целью использования его в качестве примера веб-приложения.</p>
<h2 id="Резюме">Резюме</h2>
<p>Эта статья дала вам объяснение того, что такое технология WebAssembly, чем она полезная, как она вписывается в веб и как вы можете её использовать.</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="https://hacks.mozilla.org/category/webassembly/">Статьи WebAssembly в блоге Mozilla Hacks</a></li>
<li><a href="https://research.mozilla.org/webassembly/">WebAssembly на Mozilla Research</a></li>
<li><a href="/en-US/docs/WebAssembly/Loading_and_running">Загрузка и запуск кода WebAssembly</a> — узнайте, как загрузить свой собственный модуль WebAssembly на веб-страницу.</li>
<li><a href="/ru/docs/WebAssembly/Using_the_JavaScript_API">Использование WebAssembly JavaScript API</a> — узнайте, как использовать другие основные функции WebAssembly JavaScript API.</li>
</ul>
|
