Привіт, маккали,
Цей пост є частиною багаточастинної серії про WebAssembly. Ознайомтеся з іншими частинами серії тут
Спочатку опубліковано — https://hemath.dev/blog/webassembly/why-webassembly-is-faster-than-javascript
Отже, ви, напевно, запитуєте, чому саме WebAssembly швидший за JavaScript. І це питання, на яке ми будемо відповідати в цьому пості.
Як виконується JavaScript?
Перш ніж зрозуміти, чому WebAssembly швидший, потрібно зрозуміти, як JavaScript виконується за лаштунками. Ось діаграма, яка ілюструє процес.
Ця діаграма пояснює етапи виконання коду JavaScript. Кожен стовпчик показує відносний час, витрачений на кожен процес.
Примітка: Це не точне представлення. Воно може відрізнятися в залежності від браузера та кількості завантаженого JavaScript на сторінці, але це дає загальне уявлення про всі етапи.
Кожен стовпчик представляє час, витрачений на кожен етап:
Парсинг
Парсинг — це процес перетворення текстового коду JavaScript у AST. Цей етап відбувається після того, як браузер завантажує JavaScript. Представлення коду JavaScript як AST дерева допомагає інтерпретатору виконати код.
Компіляція та оптимізація
Сучасні браузери мають компілятор just-in-time для компіляції JavaScript. Це не статична компіляція, як у C та інших компільованих мовах. Замість цього компілятор припускає типи параметрів і типи повернутих значень на основі використання. Потім він компілює код і зберігає його в пам'яті для подальшого використання. Це дозволяє досягти кращої оптимізації виконання.
Повторна оптимізація
Але ці припущення не завжди правильні. Іноді функція може отримати/повернути різні типи значень. У таких випадках JIT компілятор відкидає існуючу оптимізовану версію і перекомпілює її.
Виконання
Виконання — це етап, на якому код JavaScript перетворюється на виконувані інструкції, після чого виконується код рядок за рядком.
Збір сміття
На цьому етапі невикористана пам'ять очищується вбудованим збирачем сміття. Це додає додаткове навантаження на виконання JavaScript, оскільки збирач сміття постійно перевіряє, які об'єкти пам'яті потрібно очистити.
Як виконується WebAssembly?
Після завантаження файлу WASM, він проходить лише 3 етапи замість 5.
Декодування
Подібно до парсингу JavaScript. Але WASM не потрібно перетворювати в які-небудь структури. Тому після декодування перевіряється цілісність модуля. Після перевірки модуль готовий до виконання.
Компіляція та оптимізація
Код WebAssembly починається набагато ближче до машинного коду. Тому компіляція та оптимізація WebAssembly відбувається швидше, ніж у JavaScript. Оскільки він має статичну типізацію, компілятор не потребує часу для виконання коду, щоб спостерігати за використанням типів.
Більше того, багато оптимізацій уже виконуються на етапі складання.
Отже, для компіляції та оптимізації потрібно менше роботи.
Виконання
Оскільки компілятори вже створили набір інструкцій, виконання коду відбувається набагато швидше, ніж у JavaScript.
Висновок
покликано з посту Лін Кларк
WebAssembly швидший за JavaScript у багатьох випадках, оскільки:
- отримання WebAssembly займає менше часу, оскільки він є компактнішим за JavaScript, навіть коли стискається.
- декодування WebAssembly займає менше часу, ніж парсинг JavaScript.
- компіляція та оптимізація займають менше часу, оскільки WebAssembly ближчий до машинного коду, ніж JavaScript, і вже пройшов оптимізацію на серверній стороні.
- повторна оптимізація не потрібна, оскільки WebAssembly має типи та іншу інформацію, вбудовану в код, тому JS-двигун не потребує спекуляцій під час оптимізації, як це відбувається з JavaScript.
- виконання часто займає менше часу, оскільки для написання стабільно ефективного коду розробнику потрібно знати менше трюків компілятора та підводних каменів, плюс набір інструкцій WebAssembly більш ідеальний для машин.
- збір сміття не потрібен, оскільки пам'ять керується вручну.
Саме тому, у багатьох випадках, WebAssembly перевершить JavaScript при виконанні однакового завдання.
Спочатку опубліковано на https://hemath.dev.
Перекладено з: Why WebAssembly is faster than JavaScript