Как благодаря WebAssembly получилось ускорить приложение в 20 раз

https://tproger.ru/translations/wasm-site-speed-up/

WebAssembly — это формат инструкций, который можно исполнять в браузере так же, как и JavaScript.

В этой статье рассмотрим реальный случай, когда команде удалось ускорить своё браузерное приложение, заменив медленные вычисления JavaScript на предкомпилированный WebAssembly.

#javascript #wasm

​Что не так с WebAssembly?

WebAssembly нацелен на то, чтобы решать сложные задачи в браузере, используя различные высокоуровневые языки программирования, такие как C, C++, Rust и другие. Способность WASM (сокращение от WebAssembly) обрабатывать низкоуровневый код, а также компилировать языки отличные от JavaScript теоретически способна похоронить привычную веб-разработку и даже убрать потребность в JS.

Но почему тогда WASM ещё не захватил все проекты веб-разработки? В этой статье попробовали разобраться в этом вопросе:

https://tprg.ru/ok0O

#wasm

​Возможности и перспективы WebAssembly

WebAssembly был представлен почти 10 лет назад и является одной из важнейших разработок для веб-сферы. Он решил такую проблему, как компиляция кода в код (транспиляция). Также он предложил использовать более эффективный байт-код.

Но почему же он тогда до сих пор не убил JavaScript? В этой статье автор порассуждал на тему возможностей Wasm, его перспектив и недостатков:

https://nuancesprog.ru/p/16336/

#wasm

А что вы думаете об этой технологии?

​WebAssembly — топливо для скоростного веба

WebAssembly (Wasm) — новый формат кода для браузеров и серверов. Он позволяет запускать код на C++, Rust и других языках очень быстро. В Figma уже успешно используется WebAssembly, благодаря чему компания ускорила работу своего сервиса в 3 раза.

Плюсы Wasm:
— малый размер и быстрая загрузка;
— легко кэшируется и повторно используется;
— высокая скорость, гораздо быстрее JavaScript.

В этой статье представлен подробный обзор возможностей WebAssembly на примере Figma.

#wasm #javascript

Компилятор WebAssembly, который помещается в один твит

192 байта. Это не просто рандомное число, а размер компилятор WebAssembly, который умещается в одном твите. Авторы статьи, чей перевод я принёс вам сегодня, добились такого результата, глубоко изучив WASM.

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

#wasm

WebAssembly выходит за пределы браузера: серверные и embedded-применения

WebAssembly (WASM) создавался, как безопасная, эффективная и портируемая платформа для компиляции высокоуровневых языков. для работы в браузере. Но сегодня он набирает всё большие обороты и уже выходит за привычные границы. Теперь его можно использовать и для серверных задач, и для бессерверных архитектур.

Как это работает, зачем нужно и что сулит, мы разобрали в статье.

#wasm

Строгий CSP и nginx без пары заголовков ломают WebAssembly на проде

Распознавание паспорта в браузере без отправки фото на сервер делается WASM-модулем. У Smart ID Engine четыре сборки (nosimd.nothreads, simd.nothreads, simd.threads, nosimd.threads), нужную выбирают на лету через wasm-feature-detect. SIMD без потоков работает в Safari 17.1+, Chrome 91+ и Firefox 89+.

Серверные ловушки: .wasm отдаётся с Content-Type: application/wasm и сжимается; строгая CSP блокирует JIT, нужна директива wasm-unsafe-eval; многопоточная сборка требует COOP: same-origin и COEP: require-corp.

Камера: документу нужно не меньше 120 DPI, оптимальный кадр 1600×1200, веб-камерам ноутбуков на А4 разрешения не хватает, на трёхкамерных iPhone основной модуль не фокусируется ближе 20 см. Android и iOS стартуют камеру в разной ориентации, сверяйте matchMedia.

Пошаговая интеграция с конфигами для getUserMedia, CSP и nginx.

#wasm #браузеры

Интерпретатор Wasm стал в 2,2 раза быстрее, и это важно там, где V8 не поможет

В браузере WebAssembly исполняет JIT, и про интерпретаторы фронтендеры обычно не думают. Но как только Wasm выходит за пределы вкладки, в плагины, edge-функции, iOS-приложения и песочницы, JIT либо запрещён, либо не помещается в память. Там живёт Wasmi, интерпретатор на Rust, и версия 2.0 по замерам проекта в 2,2 раза быстрее 1.0 по геометрическому среднему.

Внутри четыре режима dispatch вместо одного switch-loop, новое IR с аккумуляторными регистрами и структура CodeMap, где вызов функции не делает ни одного lookup. Включение SIMD больше не замедляет обычный код: в 1.0 это стоило около 8%.

Бенчмарки можно повторить из репозитория wasmi-benchmarks; сравнение с Wasm3, WAMR и Wasmtime Pulley, а также историю про Rust 1.92, который уронил CoreMark на треть, разобрали на сайте.

#wasm #перформанс