Искусство WebAssembly

Рик Баттальини

Искусство Web As semb ly 

THE ART OF 
WEBASSEMBLY

Build Secure, Portable,  
High-Performance  
Applications 

Rick Battagline

San Francisco

ИСКУССТВО 
WEBASSEMBLY

Создание безопасных 
межплатформенных 
высокопроизводительных 
приложений

Рик Баттальини

Москва, 2022

УДК 004.9
ББК 32.072
Б28

Баттальини Р.
Б28 
Искусство Web As semb ly  / пер. с англ. П. М. Бомбаковой. – М.: ДМК Пресс, 
2022. – 310 с.: ил. 

ISBN 978-5-97060-976-7

В книге подробно рассматриваются принципы работы WebAssembly – компактной 
межплатформенной технологии, которая оптимизирует производительность 
ресурсоемких веб-приложений и программ.
Вы узнаете, как оптимизировать, компилировать и отлаживать низкоуровневый 
код, сравнивать его производительность с JavaScript, а также представлять код 
в удобном для прочтения текстовом формате WebAssembly Text (WAT). Затем сможете 
создать программу обнаружения столкновений на базе браузера, поработать 
с технологиями рендеринга в браузере для создания графики и анимации и выяснить, 
как WebAssembly взаимодействует с другими языками программирования.
Книга адресована веб-разработчикам, желающим понять, как создавать и развертывать 
приложения на основе WebAssembly, а также пользователям, которые 
хотят изучить и применять эту технологию.

УДК 004.9
ББК 32.072

Title of English-language original: The Art of Web As semb ly: Build Secure, Portable, High-
Performance Applications, ISBN 9781718501447, published by No Starch Press Inc. 245 8th Street, 
San Francisco, California United States 94103. The Russian-Language 1st edition Copyright © 
2021 by DMK Press Publishing under license by No Starch Press Inc. All rights reserved. 

Все права защищены. Любая часть этой книги не может быть воспроизведена в какой 
бы то ни было форме и какими бы то ни было средствами без письменного разрешения 
владельцев авторских прав.

ISBN 978-1-7185-0144-7 (англ.) 
© Rick Battagline, 2021
ISBN 978-5-97060-976-7 (рус.) 
©  Перевод, издание,  

оформление, ДМК Пресс, 2022

В память о моей бабушке Сью Баттальини (Sue Battagline).  
Я очень скучаю по тебе. 

Содержание

СОДЕРЖАНИЕ

От издательства ............................................................................................................. 10
Об авторе .......................................................................................................................... 11
О техническом рецензенте ............................................................................................ 11
Предисловие ....................................................................................................................... 12
Благодарности .................................................................................................................. 13
Введение ............................................................................................................................. 14

Глава 1. Введение в WebAssembly ................................................................. 19
Что такое Web As semb ly? ................................................................................................ 20
Причины использовать Web As semb ly ........................................................................ 21
Повышение производительности.......................................................................... 22
Интеграция существующих библиотек ................................................................ 22
Портируемость на другие платформы и безопасность .................................... 23
Противники Java Script .............................................................................................. 23
Связь Web As semb ly с Java Script .................................................................................... 24
Зачем учить WAT?............................................................................................................ 25
Стили кодирования WAT .......................................................................................... 26
Среда встраивания .......................................................................................................... 30
Браузер ......................................................................................................................... 31
WASI .............................................................................................................................. 31
Visual Studio Code ...................................................................................................... 32
Node.js ........................................................................................................................... 33
Наше первое приложение Web As semb ly с по мощью Node.js .......................... 35
Вызов модуля Web As semb ly из Node.js ................................................................. 36
Синтаксис .then .......................................................................................................... 37
Удачное время .................................................................................................................. 38

Глава 2. Основы работы с WebAssembly Text .......................................... 39
Написание простейшего модуля ................................................................................. 40
Hello World в WebAssembly ............................................................................................ 40
Создание WAT-модуля .............................................................................................. 41
Создание файла Java Script ....................................................................................... 43
Переменные WAT ............................................................................................................ 46
Глобальные переменные и преобразование типов ........................................... 46
Локальные переменные ........................................................................................... 50
Распаковка S-выражений ........................................................................................ 52
Переменные с индексами ........................................................................................ 54
Преобразование между типами ............................................................................. 54
Условные операторы if/else ........................................................................................... 56
Операторы цикла и блока ............................................................................................. 58

Содержание 7

Оператор блока (block) ............................................................................................. 59
Оператор цикла (loop) .................................................................................................... 61
Совместное использование операторов блока и цикла ................................... 62
Переход с по мощью br_table ................................................................................... 64
Заключение ....................................................................................................................... 66

Глава 3. Функции и таблицы .............................................................................. 67
Когда следует вызывать функции из WAT ................................................................. 68
Разработка функции is_prime ....................................................................................... 68
Передача параметров ............................................................................................... 68
Создание внутренних функций ............................................................................. 69
Функция is_prime ....................................................................................................... 71
Код на стороне Java Script ......................................................................................... 75
Объявление импортированной функции .................................................................. 77
Числа Java Script .......................................................................................................... 78
Передача типов данных ........................................................................................... 78
Объекты в WAT ........................................................................................................... 78
Влияние вызовов внешних функций на производительность ............................ 79
Таблицы функций ........................................................................................................... 83
Создание таблицы функций в WAT ....................................................................... 83
Заключение ....................................................................................................................... 92

Глава 4. Низкоуровневые битовые операции ........................................ 93
Системы счисления: двоичная, десятичная и шестнадцатеричная ................... 94
Арифметические операции над целыми числами и числами  
с плавающей запятой ..................................................................................................... 95
Целые числа ................................................................................................................ 96
Числа с плавающей запятой.................................................................................... 98
Биты старшего и младшего разрядов........................................................................101
Битовые операции .........................................................................................................103
Сдвиг и вращение битов .........................................................................................103
Маскирование битов с по мощью AND и OR ......................................................105
Инверсия битов с по мощью XOR ..........................................................................108
Обратный vs. прямой порядок байтов ................................................................109
Заключение ......................................................................................................................110

Глава 5. Строки в WebAssembly ......................................................................111
ASCII и Unicode................................................................................................................112
Строки в линейной памяти ..........................................................................................112
Передача длины строки в Java Script.....................................................................113
Строки с завершающим нулем ..............................................................................114
Строки с префиксом длины ...................................................................................117
Копирование строк ...................................................................................................120
Создание числовых строк .......................................................................................126
Создание шестнадцатеричной строки ................................................................131
Создание двоичной строки ....................................................................................136
Заключение ......................................................................................................................139

Содержание

Глава 6. Линейная память ..................................................................................140

Линейная память в Web As semb ly ...............................................................................141
Страницы ....................................................................................................................142
Указатели ....................................................................................................................144
Объект памяти Java Script ..............................................................................................146
Создание объекта памяти Web As semb ly .............................................................146
Запись в консоль в цвете .........................................................................................148
Создание Java Script в store_data.js ........................................................................149
Обнаружение столкновений ........................................................................................151
Начальный адрес, шаг и сдвиг ...............................................................................152
Загрузка структур данных из Java Script ..............................................................153
Отображение результатов ......................................................................................155
Функция обнаружения столкновений .................................................................156
Заключение ......................................................................................................................164

Глава 7. Веб-приложения ....................................................................................166

DOM ...................................................................................................................................167
Создание и настройка простого сервера Node ........................................................167
Первое веб-приложение Web As semb ly .....................................................................169
Определение HTML-заголовка  .............................................................................170
Java Script .....................................................................................................................170
HTML-тег <body> .......................................................................................................173
Готовое веб-приложение ........................................................................................173
Шестнадцатеричные и двоичные строки .................................................................175
HTML ............................................................................................................................175
WAT ...............................................................................................................................178
Компиляция и запуск...............................................................................................183
Заключение ......................................................................................................................184

Глава 8. Работа с Canvas ......................................................................................186

Рендеринг HTML-страницы на холсте ......................................................................187
Определение холста в HTML ..................................................................................187
Определение констант Java Script в HTML ..........................................................188
Создание случайных объектов ..............................................................................190
Данные растрового изображения .........................................................................191
Функция requestAnimationFrame ..........................................................................192
Модуль WAT .....................................................................................................................194
Импортируемые значения .....................................................................................194
Очистка холста ..........................................................................................................195
Функция вычисления абсолютного значения ...................................................196
Установка цвета пикселя .........................................................................................197
Рисуем объект ............................................................................................................200
Установка и получение атрибутов объекта ........................................................202
Функция $main ..........................................................................................................204
Компиляция и запуск приложения ......................................................................213
Заключение ......................................................................................................................214

Глава 9. Оптимизация производительности ...........................................216
Использование профилировщика ..............................................................................217
Профилировщик Chrome ........................................................................................217
Профилировщик Firefox ..........................................................................................224
wasm-opt ...........................................................................................................................228
Установка Binaryen ...................................................................................................228
Запуск wasm-opt ........................................................................................................228
Взглянем на оптимизированный код WAT .........................................................230
Приемы повышения производительности ..............................................................231
Встраивание функций .............................................................................................231
Умножение и деление vs. сдвиг .............................................................................235
DCE ...............................................................................................................................237
Сравнение приложения обнаружения столкновений с Java Script .....................238
Оптимизация WAT вручную ........................................................................................241
Запись производительности в лог ..............................................................................242
Более сложное тестирование с помощью benchmark.js ........................................247
Сравнение WebAssembly и Java Script с флагом --print-bytecode .........................253
Заключение ......................................................................................................................256

Глава 10. Отладка WebAssembly ....................................................................258
Отладка из консоли ........................................................................................................259
Запись сообщений в консоль .................................................................................264
Предупреждения об ошибках ......................................................................................268
Трассировка стека ..........................................................................................................269
Отладчик Firefox .............................................................................................................275
Отладчик Chrome ...........................................................................................................279
Заключение ......................................................................................................................282

Глава 11. AssemblyScript .....................................................................................283
Интерфейс командной строки в AssemblyScript .....................................................284
Приложение Hello World на AssemblyScript .............................................................286
Код Java Script для приложения Hello World ........................................................288
Приложение Hello World в загрузчике AssemblyScript ....................................290
Объединение строк AssemblyScript ......................................................................291
Объектно-ориентированное программирование на AssemblyScript ................293
Приватные атрибуты ...............................................................................................295
Среда встраивания Java Script ................................................................................297
Загрузчик AssemblyScript ........................................................................................298
Расширение классов в AssemblyScript .................................................................301
Сравнение производительности загрузчика и прямых вызовов 
WebAssembly ..............................................................................................................303
Заключение ......................................................................................................................306

Послесловие ......................................................................................................................307
Предметный указатель .................................................................................................308

От издательства

Отзывы и пожелания

Мы всегда рады отзывам наших читателей. Расскажите нам, что вы 
ду маете об этой книге, – что понравилось или, может быть, не понравилось. 
Отзывы важны для нас, чтобы выпускать книги, которые 
будут для вас максимально полезны.
Вы можете написать отзыв на нашем сайте www.dmkpress.com, зайдя  
на страницу книги и оставив комментарий в разделе «Отзывы и рецензии». 
Также можно послать письмо главному редактору по адресу  
dmkpress@gmail.com; при этом укажите название книги в теме письма. 
Если вы являетесь экспертом в какой-либо области и заинтересованы 
в написании новой книги, заполните форму на нашем сайте по 
адресу http://dmkpress.com/authors/publish_book/ или напишите в издательство 
по адресу dmkpress@gmail.com.

Скачивание исходного кода примеров

Скачать файлы с дополнительной информацией для книг издательства «
ДМК Пресс» можно на сайте www.dmkpress.com на странице с описанием 
соответствующей книги. 

Список опечаток

Хотя мы приняли все возможные меры для того, чтобы обеспечить 
высокое качество наших текстов, ошибки все равно случаются. Если 
вы найдете ошибку в одной из наших книг, мы будем очень благодарны, 
если вы сообщите о ней главному редактору по адресу dmkpress@
gmail.com. Сделав это, вы избавите других читателей от недопонимания 
и поможете нам улучшить последующие издания этой книги. 

Нарушение авторских прав

Пиратство в интернете по-прежнему остается насущной проблемой. 
Издательства «ДМК Пресс» и No Starch Press очень серьезно относятся 
к вопросам защиты авторских прав и лицензирования. Если вы столкнетесь 
в интернете с незаконной публикацией какой-либо из наших 
книг, пожалуйста, пришлите нам ссылку на интернет-ресурс, чтобы 
мы могли применить санкции.
Ссылку на подозрительные материалы можно прислать по адресу 
элект ронной почты dmkpress@gmail.com.
Мы высоко ценим любую помощь по защите наших авторов, благодаря 
которой мы можем предоставлять вам качественные материалы. 

Об авторе

Рик Баттальини (Rick Battagline) – разработчик игр и автор книги 
«Hands-On Game Development with Web As semb ly» (Packt Publishing, 
2019). Занимается браузерными технологиями с 1994 г. В 2006 г. он 
основал независимую студию разработки веб-игр BattleLine Games 
LLC. Разработанная студией игра Epoch Star была номинирована на 
награду конкурса Slamdance Guerilla Games Competition. На сегодняшний 
день под его авторством созданы сотни игр с использованием 
различных веб-технологий, таких как Web As semb ly, HTML5, WebGL, 
Java Script, TypeScript, ActionScript и PHP.

О техническом рецензенте

Конрад Уатт (Conrad Watt) – научный сотрудник Питерхауса, Кембриджский 
университет (Peterhouse, University of Cambridge). Прежде 
чем получить степень доктора компьютерных наук в Кембриджском 
университете, он успешно прошел обучение по программе бакалав-
риата в Имперском колледже Лондона (Imperial College London). Исследования 
Конрада Уатта сосредоточены преимущественно на формальной 
семантике и характеристиках безопасности Web As semb ly. 
Он является разработчиком WasmCert-Isabelle – первой в мире механизации 
семантики языка Web As semb ly с по мощью инструмента 
Isabelle/HOL.
Конрад является активным членом Web As semb ly Community Group 
и продолжает участвовать в создании спецификаций новых языковых 
возможностей, делая упор на многопоточность и параллелизм. 
Его исследование характеристик слабых моделей памяти Java Script 
и Web As semb ly является ключевым компонентом спецификации потоков 
Web As semb ly. Вне профессиональной жизни он увлекается хоровым 
пением, а также много путешествует (напоминаем, что ввиду 
ситуации, сложившейся в мире на момент написания этой книги, заниматься 
тем и другим не рекомендуется). 

ПРЕДИСЛОВИЕ

С

егодня, когда большинство языков успешно компилируются 
в Java Script, Web As semb ly представляет собой новый виток развития 
технологий, который позволит выйти за пределы устоявшихся 
рамок. Web As semb ly является универсальным эффективным 
инструментом для выполнения кода на вашем любимом языке в браузере, 
который к тому же позволяет переосмыслить способы взаимодействия 
многократно используемых программных компонентов не 
только в сети, но и на других платформах, начиная от блокчейна и заканчивая 
граничными вычислениями интернета вещей (IoT – Inter-
net of things).
Безусловно, Web As semb ly – это молодая технология, на развитие 
которой уйдет немало времени. Однако уже сегодня ее явный потенциал 
вдохновил огромное количество самых разных людей. В качестве 
примера хотелось бы привести разрабатываемый совместно 
с Риком (Rick) проект AssemblyScript. Здесь мы рассматриваем Web As-
semb ly не как язык системного программирования, а как инструмент 
для объединения лучших концепций данной технологии с Java Script. 
AssemblyScript позволяет компилировать варианты кода Java Script, 
схожие с TypeScript, в Web As semb ly, формируя при этом сверхмалые 
и эффективные модули. Все это дает возможность ощутить преимущества 
Web As semb ly тем, кто работает с Java Script.
Web As semb ly обладает множеством интересных функций и аспектов, 
которые будут интересны тем, кто стремится исследовать новые 
технологии и внести свою лепту в их развитие. Книга «Искусство Web-
As semb ly» поможет овладеть базовыми знаниями для дальнейшего 
более глубокого погружения в тонкости работы технологий, способных 
совершить революцию в области вычислений и во всей сети.

– ДЭНИЕЛ ВИРТЦ (DANIEL WIRTZ),
создатель AssemblyScript

БЛАГОДАРНОСТИ

В 

первую очередь хотелось бы сказать спасибо Лиз Чедвик (Liz 
Chadwick), работавшей над первыми набросками этой книги. 
Благодаря неутомимой работе и огромному труду она воплотила 
мой смутный поток мыслей в связную письменную форму и превратила 
его в полноценный проект. Если вам понравится читать эту 
книгу, будьте уверены, что это заслуга Лиз (Liz) и результат ее усилий, 
приложенных на каждом этапе создания. 
Я хочу поблагодарить Конрада Уатта (Conrad Watt), который является 
приглашенным экспертом рабочей группы W3C Web As semb ly, за 
предоставление экспертных технических рецензий. Я искренне восхищаюсь 
его талантом. Его технический опыт в данной области невозможно 
переоценить. Конрад Уатт (Conrad Watt) провел глубокий 
и доскональный технический анализ данной книги.
Также я хочу сказать спасибо Катрине Тейлор (Katrina Taylor) и Энн 
Мари Уокер (Anne Marie Walker). Я искренне признателен за вашу работу 
по подготовке книги к печати. И конечно, я благодарю своих друзей 
Винита Капура (Vineet Kapur), Стива Тэка (Steve Tack) и Терри Коэна (
Terri Cohen), которые нашли время, чтобы ознакомиться с моим 
первым черновиком и дать по этому поводу свои комментарии. Все 
вы помогли мне сделать эту книгу лучше.
Особую благодарность хотелось бы выразить Биллу Поллоку (Bill 
Pollock), чья помощь в некоторых критических моментах помогла 
мне продвинуться дальше и завершить эту книгу.

Введение

ВВЕДЕНИЕ

Добро пожаловать в «Искусство Web As semb ly». Цель этой 
книги – показать, как читать, понимать и писать код 
Web As semb ly на уровне виртуальной машины. Здесь вы 
узнаете, как Web As semb ly взаимодействует с Java Script, 
веб-браузером и средой встраивания. После прочтения книги 
вы поймете, что такое Web As semb ly, узнаете об оптимальных вариантах 
его применения, а также научитесь писать коды Web As semb ly 
с высокой скоростью их исполнения в браузере.

Для кого предназначена эта книга

Данная книга предназначена для веб-разработчиков, желающих понять, 
когда и зачем стоит использовать Web As semb ly. Если вы действительно 
хотите понять Web As semb ly, вам необходимо изучить его 
подробно. На сегодняшний день существует множество книг о различных 
наборах инструментальных средств Web As semb ly. Однако 
данная книга создана не для того, чтобы научить вас писать коды на 
C/C++, Rust или другом языке. Вместо этого она расскажет вам о механизмах 
и возможностях Web As semb ly.
Также данная книга предназначена для пользователей, которые хотят 
понять, что такое Web As semb ly, на что он способен и как применять 
его наиболее оптимальным образом. Web As semb ly превосходит 
Java Script по части производительности, объема загружаемых данных 
и потребления памяти. Однако разработка высокопроизводительных 
приложений Web As semb ly представляет собой более сложный процесс, 
нежели просто написание приложения на C++/Rust или AssemblyScript 
и его дальнейшая компиляция в Web As semb ly. Для создания приложения, 
в три раза превосходящего по скорости свой эквивалент в Java-
Script, необходимо погрузиться в работу Web As semb ly чуть глубже.