Как ускорихме уеб приложение 20 пъти с помощта на WebAssembly

Тази статия обсъжда случай на ускоряване на приложение на браузър чрез замяна на изчисленията на JavaScript с WebAssembly.

WebAssembly - какво е това?

Накратко, това е двоичен формат на инструкции за подредена виртуална машина. Често Wasm (съкратеното име) се нарича език за програмиране, но не е така. Форматът на инструкцията се изпълнява в браузъра заедно с JavaScript.

Важно е WebAssembly да може да се получи чрез компилиране на източници на езици като C / C ++, Rust, Go. Той използва статистическо типизиране и така наречения модел на плоска памет. Кодът, както бе споменато по-горе, се съхранява в компактен двоичен формат, което го прави почти толкова бърз, колкото ако приложението се стартира от командния ред. Тези функции доведоха до повишаване на популярността на WebAssembly.

Напомняме ви: за всички читатели на "Habr" - отстъпка от 10 000 рубли при записване във всеки курс Skillbox, използвайки промоционалния код на "Habr".

Skillbox препоръчва: Практически курс „Мобилен разработчик PRO“.

В момента Wasm се използва в много приложения, от игри като Doom 3 до уеб пренесени приложения като Autocad и Figma. Wasm се прилага и в такава област като изчисления без сървър.

Тази статия предоставя пример за използване на Wasm за ускоряване на уеб услуга за анализ. За по-голяма яснота взехме работещо приложение, написано на C, което ще се компилира в WebAssembly. Резултатът ще бъде използван за замяна на нискоефективни JS секции.

Трансформация на приложението

Примерът ще използва браузър услугата fastq.bio, която е предназначена за генетици. Инструментът ви позволява да оцените качеството на ДНК секвенирането (декодирането).

Ето едно примерно приложение в действие:

Не е необходимо да се дават подробности за процеса, тъй като те са доста сложни за неспециалисти, но накратко, учените могат да използват горната инфографика, за да разберат дали процесът на секвениране на ДНК е преминал гладко и какви проблеми са възникнали.

Тази услуга има алтернативи, десктоп програми. Но fastq.bio ви позволява да ускорите нещата, като визуализирате данните. В повечето други случаи трябва да можете да работите с командния ред, но не всички генетици имат необходимия опит.

Всичко работи просто. Входните данни са представени като текстов файл. Този файл се генерира от специализирани инструменти за секвениране. Файлът съдържа списък с ДНК последователности и качествен резултат за всеки нуклеотид. Файловият формат е .fastq, откъдето идва и името на услугата.

Внедряване в JavaScript

Първата стъпка за потребителя при работа с fastq.bio е да избере подходящия файл. Използвайки обекта File, приложението чете произволна извадка от данни от файла и обработва тази партида. Задачата на JavaScript тук е да извършва прости операции с низове и да изчислява експоненти. Един от тях е броят на нуклеотидите A, C, G и T на различни ДНК фрагменти.

След изчисляване на необходимите показатели, те се визуализират с помощта на Plotly.js и услугата започва работа с нова извадка от данни. Разделянето на фрагменти се прави, за да се подобри качеството на UX. Ако работите с всички данни наведнъж, процесът ще виси за известно време, тъй като файловете с резултатите от последователността заемат стотици гигабайти файлово пространство. Услугата, от друга страна, взема секции с данни с размер от 0,5 до 1 MB и работи с тях стъпка по стъпка, изграждайки графични данни.

Вот как това работи:

Червеният правоъгълник съдържа алгоритъма за преобразуване на низове за рендиране. Това е най-натоварената от изчисления част от услугата. Струва си да опитате да го замените с Wasm.

Тестване на WebAssembly

За да оцени възможността за използване на Wasm, екипът на проекта започна да търси готови решения за създаване на QC метрика (QC - контрол на качеството) на базата на fastq файлове. Търсенето беше извършено сред инструменти, написани на C, C ++ или Rust, така че да е възможно пренасянето на кода към WebAssembly. Освен това инструментът не трябва да е "суров", изисква се услуга, която вече е тествана от учените.

В резултат на това изборът беше направен в полза на seqtk. Приложението е доста популярно, то е с отворен код, изходният език е C.

Преди да конвертирате към Wasm, трябва да разгледате принципа на компилиране на seqtk за работния плот. Според Makefile, ето какво е необходимо:

# Compile to binary
$ gcc seqtk.c 
   -o seqtk 
   -O2 
   -lm 
   -lz

По принцип можете да компилирате seqtk с помощта на Emscripten. Ако го няма, ще се справим. Докер начин.

$ docker pull robertaboukhalil/emsdk:1.38.26
$ docker run -dt --name wasm-seqtk robertaboukhalil/emsdk:1.38.26

Ако се желае, можете да го сглобите самино това отнема време.

Вътре в контейнера можете лесно да вземете emcc като алтернатива на gcc:

# Compile to WebAssembly
$ emcc seqtk.c 
    -o seqtk.js 
    -O2 
    -lm 
    -s USE_ZLIB=1 
    -s FORCE_FILESYSTEM=1

Минимални промени:

Вместо да извежда в двоичен файл, Emscripten използва .wasm и .js за генериране на файлове, които се използват за изпълнение на модула WebAssemby.

Флагът USE_ZLIB се използва за поддръжка на библиотеката zlib. Библиотеката се разпространява и пренася към WebAssembly, а Emscripten я включва в проекта.

Виртуалната файлова система Emscriptpten е активирана. Това POSIX-подобен FS, работещ в RAM в браузъра. Когато страницата се обнови, паметта се изчиства.

За да разберете защо е необходима виртуална файлова система, струва си да сравните начина, по който изпълнявате seqtk от командния ред с начина, по който изпълнявате компилиран модул WebAssembly.

# On the command line
$ ./seqtk fqchk data.fastq
 
# In the browser console
> Module.callMain(["fqchk", "data.fastq"])

Получаването на достъп до виртуалната файлова система е необходимо, за да не се пренаписва seqtk за въвеждане на низ, а не въвеждане на файл. В този случай фрагментът от данни се показва като файл data.fastq във виртуална файлова система с извикване на main() seqtk върху него.

Ето я новата архитектура:

Фигурата показва, че вместо да изчисли в основната нишка на браузъра, той използва уебработници. Този метод дава възможност да се извършват изчисления във фонова нишка, без да се влошава реакцията на браузъра. Е, контролерът WebWorker стартира Worker, управлявайки взаимодействието му с основната нишка.

Командата seqtk се изпълнява с Worker на монтиран файл. След приключване на изпълнението, Работникът издава резултата под формата на обещание. Когато съобщението бъде получено от основната нишка, резултатът се използва за актуализиране на графиките. И така нататък в продължение на няколко повторения.

Какво ще кажете за производителността на WebAssembly?

За да се оцени промяната в производителността, екипът на проекта използва параметъра операции за четене за секунда. Времето за интерактивно чертане не се взема предвид, тъй като JavaScript се използва и в двете реализации.

При използване на готовото решение увеличението на производителността беше девет пъти.

Това е отличен резултат, но, както се оказа, има възможност да се оптимизира. Факт е, че голям брой резултати от QC анализи не се използват от seqtk, така че те могат да бъдат изтрити. Ако това се направи, резултатът е 13 пъти по-добър, отколкото в JS.

Това беше постигнато чрез просто коментиране на командите printf().

Но това не е всичко. Въпросът е, че на този етап fastq.bio получава резултатите от анализа, като извиква различни функции на C. Всяка от тях изчислява свой собствен набор от характеристики, така че всеки фрагмент от файла да бъде прочетен два пъти.

За да се преодолее този проблем, беше решено двете функции да се комбинират в една. В резултат на това производителността се увеличава 20 пъти.

Трябва да се отбележи, че такъв изключителен резултат не винаги може да бъде постигнат. В някои случаи производителността пада, така че си струва да оцените всеки конкретен случай.

Като заключение можем да кажем, че Wasm предоставя възможност за подобряване на производителността на приложението, но трябва да го използвате разумно.

Skillbox препоръчва:

• Двугодишен практически курс „Аз съм PRO уеб разработчик“.
• Онлайн курс „C# разработчик от 0“.
• Практически годишен курс „PHP разработчик от 0 до PRO“.

Източник: www.habr.com