Искусство 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, HighPerformance 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.
Мы высоко ценим любую помощь по защите наших авторов, благодаря которой мы можем предоставлять вам качественные материалы.