Полное введение в WebAssembly - понять прошлое и настоящее wasm

предисловие

После знакомства с WebAssembly я прочитал много информации в гугле. Я чувствую, что использование, введение и значение WebAssembly являются расплывчатыми и общими. Чувствую, что урожай не оправдал ожиданий после прочтения, либо потому, что примеры в статье не удалось успешно реализовать самому, либо они были запутаны и ослеплены. С отношением бизнеса, рождающего технологии, родилась эта статья. В первой части в основном рассказывается об истории WebAssembly, о том, как появился WebAssembly и каковы его преимущества. Если вы хотите сразу приступить к кодированию, чтобы попробовать эффект, вы можете перейти к последнему.пластина.

Что такое веб-сборка?

определение

Сначала давайте определимся.

WebAssembly или wasm — это новый формат, портативный, компактный, быстрый и совместимый с Интернетом.

пример

Конечно, я знаю, даже если вы посмотрите на определение, вы не знаете, что такое WebAssembly. Без лишних слов давайте посмотрим, что такое WebAssembly, на простом примере.

Левая часть рисунка выше — это рекурсивная функция, реализованная на C++. В середине находится двоичный код в шестнадцатеричном формате. Справа текст инструкции. Некоторые люди могут спросить, имеет ли это какое-то отношение к WebAssembly? На самом деле двоичный код в середине шестнадцатеричной системы — это WebAssembly.

Цели компиляции

Как видите, его записываемость и читабельность невообразимо плохи. Это потому, что WebAssembly не предназначен для того, чтобы дать вам практический опыт.построчнокод, WebAssembly — этоцель компиляции. Что такое цель компиляции? Когда мы пишем TypeScript, конечный файл JavaScript, сгенерированный Webpack, является целью компиляции. Как вы могли догадаться, двоичный файл на приведенном выше рисунке является результатом кода C++ слева после компиляции компилятором.

Происхождение WebAssembly

узкое место производительности

Сейчас, когда бизнес-требования становятся все более сложными, логика фронтенд-разработки становится все более сложной, а соответствующий объем кода становится все больше и больше. Соответственно, время запуска всего проекта становится все больше и больше. На компьютере с низкой производительностью запуск внешнего проекта может занять даже более десяти секунд. Это на самом деле хорошо, поскольку указывает на то, что интерфейсу уделяется все больше и больше внимания, и все больше и больше людей начинают его разрабатывать.

Но помимо сложной логики и большого объема кода есть еще одна причина дефектов самого языка JavaScript — в JavaScript нет статических типов переменных. Брендан Эйх, автор этого интерпретируемого языка программирования, создал язык, который настолько широко используется сегодня, что история JavaScript в некотором смысле даже превратилась в историю заполнения дыр. Почему менее эффективно говорить, что статического типа нет. Для этого потребуются некоторые знания движка JavaScript.

Проблемы со статическими типами переменных

Это структура ChakraCore, движка JavaScript браузера Microsoft Edge. Давайте посмотрим, через что проходит наш код JavaScript в движке.

• Файл JavaScript будет загружен.
• Затем введите Parser, который преобразует код в AST (абстрактное синтаксическое дерево).
• Затем, согласно абстранному синтаксическому дереву, компилятор Bytecode будет генерировать Bytecode, который двигатель может напрямую прочитать и выполнять.
• Bytecode входит в переводчик и переводит строку Bytecode по линии в очень эффективный машинный код.

В процессе выполнения проекта движок будет оптимизировать функции, которые выполняются чаще, скомпилирует свой код в машинный код, упакует его и отправит компилятору Just-In-Time (JIT) вверху, и выполните эту функцию в следующий раз.Компилированный машинный код будет выполняться напрямую. Но из-за динамических переменных JavaScript одна секунда может быть массивом, а следующая секунда может быть объектом. Тогда оптимизация, сделанная движком в прошлый раз, будет бесполезна, и он снова будет оптимизирован в этот раз.

появляется asm.js

Поэтому для решения этой проблемы родился предшественник WebAssembly, asm.js. asm.js — это строгое подмножество Javascript, разумный и законный код asm.js должен быть разумным и законным кодом JavaScript, но обратное неверно. Как и WebAssembly, asm.js не предназначен для того, чтобы дать вам практический опыт.построчноКод asm.js представляет собойцель компиляции. Хотя его удобочитаемость и читабельность лучше, чем у WebAssembly, он все же неприемлем для разработчиков.

Например, asm.js обеспечивает статическую типизацию.

function asmJs() {
    'use asm';
    
    let myInt = 0 | 0;
    let myDouble = +1.1;
}

Почему asm.js имеет статическую типизацию? потому что нравится0 | 0Таким образом, он представляет, что это данные Int, и+1.1Это означает, что это двойные данные.

asm.js не решает всех проблем

Некоторые люди могут возникнуть сомнения, что эта проблема не решена? Так почему же есть windassembly? Webassembly, но и решить проблему? Вы можете посмотреть на структуру двигателя выше чакракора. Будь то статические типы проблем ASM.js лучше, он всегда убегает, чтобы пройти через анализатор, чтобы пройти через компилятор Bytecode, который представляет собой два этапа JavaScript Code, который потребляет самый часовой шаг в двигателе выполнения процесса. Webassembly, не проходя через эти два шага. Это Webassembly быстрее, чем причинами ASM.JS.

WebAssembly родился

Итак, в 2015 году мы представили WebAssembly. WebAssembly — это код, скомпилированный компилятором, который имеет небольшой размер и быстрый запуск. Синтаксически полностью вне JavaScript, но с изолированной средой выполнения. Такая же обязательная статическая типизация WebAssembly является целью компиляции C/C++/Rust.

Преимущества WebAssembly

Сравнение производительности WebAssembly и asm.js

На следующем рисунке показан тест BenchMark, сравнивающий время запуска Unity WebGL с WebAssembly и без него, в качестве справки для всех. Как видите, разница в производительности между WebAssembly и asm.js составляет 2x в FireFox, 3x в Chrome и даже 6x в Edge. Благодаря этим сравнениям также видно со стороны, что все текущие основные браузеры уже поддерживают WebAssembly V1 (Node >= 8.0.0).

Сравните с JavaScript

Я сам пользуюсьcreate-react-appВ недавно созданном проекте сравнивается версия WEBASSEMBLY и рекурсивная неоптимизированная функция Фибоначчи собственной версии JavaScript.На следующем рисунке показано сравнение производительности двух функций на 45, 48, 50.

Глядя на картинку, это очень практичное сравнение производительности между WebAssembly и JavaScript. Почти в два раза стабильнее JavaScript.

Применение WebAssembly в крупных проектах

Здесь можно привести еще много примеров, таких как AutoCAD, GoogleEarth, Unity, Unreal, PSPDKit, WebPack и так далее. Только некоторые из них.

AutoCAD

Это программа для рисования, а веб-версии давно нет.Причин две.Во-первых, производительность веба не соответствует их потребностям. Во-вторых, до того, как WebAssembly стал доступен, AutoCAD был реализован на C++, и перенос его в Интернет означал бы переписывание всего их кода, что было бы очень дорого.

После запуска WebAssembly AutoCAD смог использовать компилятор для прямой компиляции кода, накопленного за более чем 30 лет, в WebAssembly, и производительность была значительно улучшена по сравнению с предыдущими обычными веб-приложениями. Именно эти причины позволяют AutoCAD перемещать свои приложения с рабочего стола в Интернет.

Google Earth

Google Планета Земля также называется Google Планета Земля.Поскольку ей нужно отображать много 3D-изображений, к ней предъявляются очень высокие требования к производительности, поэтому она использует некоторые нативные технологии. Поначалу даже браузер Google Chrome не поддерживал веб-версию, а приложение Google Earth для настольных компьютеров нужно было загружать отдельно. А после WebAssembly Google Earth запустила веб-версию. И говорят, что следующим браузером, который сможет запустить Google Планета Земля, будет FireFox.

Unity и игровой движок Unreal

Вот ссылки двух нефтепроводов, чтобы испытать это на себе, всем обратить внимание на научный интернет.

• Печать единства WebGLздесь
• Штамп Unreal Engineздесь

Заменит ли WebAssembly JavaScript?

Ответ отрицательный, см. рисунок ниже.

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

Когда использовать WebAssembly?

Сказав все это, когда именно я должен его использовать? Подводя итог, большинство дел делится на два пункта.

• Приложение/модуль/игры с высокими требованиями к производительности
• Библиотеки для использования C/C++/Rust/Go в Интернете Возьмем простой пример. Если вы внедряете веб-версию Instagram или Facebook, вам нужно быть более эффективным. Затем инструменты для сжатия, распаковки и обработки изображений можно реализовать на C++, а затем скомпилировать обратно в WebAssembly.

Несколько инструментов разработки для WebAssembly

• AssemblyScript. Поддерживает прямую компиляцию TypeScript в WebAssembly. Для многих передовых студентов порог входа все еще очень низок.
• Emscripten. Можно сказать, что это инструмент души WebAssembly.Выше упоминалось много компиляций, и это компилятор. Скомпилируйте другие языки высокого уровня в WebAssembly.
• WABT. Это инструмент, который преобразует WebAssembly между форматами байт-кода и текста, чтобы разработчики могли понять, что делает этот wasm.

Значение WebAssembly

В моем личном понимании WebAssembly не означает замену JavaScript и доминирование в мире. Я заканчиваю двумя моментами.

• Повышает производительность Интернета
• Расширение возможностей Интернета Что касается проблем с производительностью WebAssembly, я уже много говорил об этом. И более вероятно, что по мере того, как технология WebAssembly будет становиться все более и более зрелой, будет больше приложений, которые будут перенесены с рабочего стола в Интернет, что сделает и без того мощный Интернет богаче и мощнее.

WebAssembly в действии

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

Применение WebAssembly в узле

Импорт переменных окружения Emscripten

Перейдите в каталог установки emscripten и выполните следующий код.

source emsdk/emsdk_env.sh

Создайте новый файл C

Реализация файла суммирования в Ctest.c,следующим образом.

int add(int a, int b) {
	return a + b;
}

Компиляция файлов C с помощью Emscripten

Выполните следующий код в том же каталоге.

emcc test.c -Os -s WASM=1 -s SIDE_MODULE=1 -o test.wasm

emccэто компилятор Emscripten,test.cнаш входной файл,-OsУказывает, что эта компиляция требует оптимизации,-s WASM=1Указывает файл, который выводит wasm, потому что по умолчанию выводится asm.js,-s SIDE_MODULE=1Это означает, что только этот один модуль, не давайте мне другие беспорядочные коды,-o test.wasmнаш выходной файл.

После успешной компиляции текущий каталог сгенерируетtest.wasm.

Напишите код, чтобы позвонить в узле

Создайте новый js-файлtest.js. код показывает, как показано ниже.

const fs = require('fs');
let src = new Uint8Array(fs.readFileSync('./test.wasm'));
const env = {
	memoryBase: 0,
	tableBase: 0,
	memory: new WebAssembly.Memory({
		initial: 256
	}),
	table: new WebAssembly.Table({
		initial: 2,
		element: 'anyfunc'
	}),
	abort: () => {throw 'abort';}
}
WebAssembly.instantiate(src, {env: env})
.then(result => {
	console.log(result.instance.exports._add(20, 89));
})
.catch(e => console.log(e));

выполнить test.js

Запустите следующий код.

node test.js

Затем вы можете увидеть результат вывода 109.

Применение Webasembly в реакции

Вызывая метод выборки

Используйте метод выборки напрямую. Примерный способ вызова следующий.

const fibonacciUrl = './fibonacci.wasm';
const {_fibonacci} = await this.getExportFunction(fibonacciUrl);

а такжеgetExportFunctionКонкретный код выглядит следующим образом.

getExportFunction = async (url) => {
    const env = {
      memoryBase: 0,
      tableBase: 0,
      memory: new WebAssembly.Memory({
        initial: 256
      }),
      table: new WebAssembly.Table({
        initial: 2,
        element: 'anyfunc'
      })
    };
    const instance = await fetch(url).then((response) => {
      return response.arrayBuffer();
    }).then((bytes) => {
      return WebAssembly.instantiate(bytes, {env: env})
    }).then((instance) => {
      return instance.instance.exports;
    });
    return instance;
};

Вызывается путем импорта файла C

Сначала введите зависимости через Import.

import wasmC from './add.c';

Затем позвоните. Конкретный способ заключается в следующем.

wasmC({
  'global': {},
  'env': {
    'memoryBase': 0,
    'tableBase': 0,
    'memory': new WebAssembly.Memory({initial: 256}),
    'table': new WebAssembly.Table({initial: 0, element: 'anyfunc'})
  }
}).then(result => {
  const exports = result.instance.exports;
  const add = exports._add;
  const fibonacci = exports._fibonacci;
  console.log('C return value was', add(2, 5643));
  console.log('Fibonacci', fibonacci(2));
});

Подробный код находится вздесь, добро пожаловать в Звезду.

написать на обороте

В наше время появляется все больше и больше технологий, но на самом деле их не так уж и много, которые можно использовать в работе. На самом деле, некоторые технологии, экспортируемые многими крупными заводами, имеют бизнес-сценарии и продвигаются бизнесом. Вместо того, чтобы делать колеса из воздуха. Итак, в заключение, тот, который подходит вам, является лучшим. Конечно, это не значит, что вы не должны разбираться в новых технологиях, необходимо понимать новые технологии, чтобы идти в ногу со временем. Нам это сейчас не нужно, но это не значит, что нам не нужно понимать. Наоборот, когда мы столкнемся с подобными бизнес-сценариями в будущем, у нас будет еще один выбор, и мы сможем отнестись к нему более спокойно.

Прошлые статьи:

• Как интегрировать аутентификацию JWT (JSON Web Token) в SpringBoot
• Научит вас создавать фреймворк бэкенд-проекта SpringBoot с нуля.

Связанный:

• Персональный сайт:Lunhao Hu
• Официальная учетная запись WeChat: заметки о полном стеке SH (или прямой поиск WeChat LunhaoHu в интерфейсе добавления официальной учетной записи)