Веб-модуль Mozilla, что это такое

Обновлено: 03.07.2024

Проект Mozilla слишком велик, чтобы один человек или даже небольшая группа людей могли принимать решения. Вместо этого принятие решений распределяется среди ряда участников посредством разделения проекта на «модули», каждый из которых имеет владельца модуля. Модуль — это, в случае кода, часть функциональности, а в случае не кода — действие с достаточно четко определенными границами. (Некоторые из приведенных ниже объяснений относятся к коду, но аналогичные моменты можно сделать и без кода.)

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

Работа владельцев модуля и работоспособность системы контролируются владельцем и коллегами модуля «Владение модулем». Ряд более крупных модулей (например, Firefox, Thunderbird, SeaMonkey) имеют подчиненные им подмодули. Владелец модуля и одноранговые узлы соответствующего модуля несут ответственность за назначение и удаление владельца подмодуля в этих областях. Mozilla использует свою вики для отслеживания модулей, владельцев модулей и коллег.

Роль владельца модуля

«Владелец модуля» — это лицо, которому делегировано руководство работой модуля. Обязанности владельца модуля могут включать в себя, в случае модуля кода: улучшение качества кода, внедрение изменений и инноваций по мере необходимости, координацию разработки с остальной частью кодовой базы, разработку и поддержание общего понимания того, куда движется модуль. , разработка API, где это уместно, максимальное документирование, надлежащее реагирование на добавленный код, предложения по дизайну и заявленные потребности сообщества, а также создание среды, в которой приветствуются и вовлекаются компетентные новички.

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

Владельцам модулей не нужно самостоятельно выполнять всю работу по управлению модулем. Владельцы модулей могут указать других лиц, которые также могут утверждать код для регистрации в модуле. Эти разработчики известны как «равные» и должны обладать многими качествами хорошего владельца модуля. Владельцы модулей должны поручить оценку собственного кода коллеге; владельцам модулей не разрешается просматривать собственный код. Если владельца модуля нет, подтверждения партнёра достаточно, чтобы проверить код в этом модуле.

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

Эскалация и проверка

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

Критерии владения модулем

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

  1. Опыт работы с кодом или активностью модуля
  2. Текущий уровень участия в модуле
  3. Понимание/видение того, куда следует направить модуль
  4. Возможность общаться с разнообразным, географически распределенным сообществом
  5. Готовность оценивать вклад по существу, независимо от его источника (т. е. отсутствие синдрома «не здесь изобретено»)
  6. Возможность учитывать различные точки зрения и потребности разных потребителей этого модуля

И особенно для модулей кода:

  1. Должное понимание кодовой базы Mozilla в целом и отношения модуля к ней
  2. Возможность оценить код для этого модуля, включая исправления и новые функции.
  3. Возможность оценить влияние кода на другие части кодовой базы.
  4. Возможность удовлетворять различные потребности с помощью факторинга или других методов абстракции, когда это необходимо

Назначение владельца модуля

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

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

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

При определении владельца модуля вышеуказанные критерии не обязательно имеют одинаковый вес для каждого модуля. Важность того или иного элемента зависит от модуля. Например, критерии кода 1 (надлежащее понимание кодовой базы Mozilla в целом и отношения модуля к ней) и 3 (способность оценивать влияние кода на другие части кодовой базы) будут иметь меньшее значение для модулей, которые самонастраиваются. содержится и имеет большое значение для модулей, содержащих основные технологии, которые существенно влияют на другие части кода. Точно так же общий критерий 6 (способность учитывать различные точки зрения и потребности разных потребителей этого модуля) и критерий кода 4 (способность удовлетворять различные потребности с помощью факторинга или других методов абстракции, когда это уместно) будут менее важны для модуля, который обслуживает конкретную задачу. , четко определенная функция для небольшого числа участников и критически важный модуль, который поддерживает различные варианты использования и широкую группу участников.

Отношения с владельцами компонентов Bugzilla

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

Плохо поддерживаемые модули

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

Почетные владельцы и партнеры

Почетный владелец — это бывший владелец модуля, передавший право собственности другому лицу. Способность развивать новых лидеров важна для здоровья Mozilla и нашей миссии. Также очень важно распознавать, когда кто-то другой является лучшим лидером в области или деятельности, а затем беспрепятственно передавать полномочия. Именно так мы остаемся надежными и актуальными как организация, которая переживет любого из нас. Существует соответствующий статус Emeritus Peer для тех, кто раньше был, но больше не является коллегой по модулю.

Статус почетного владельца модуля является фактическим статусом. Это не качественное решение о ценности услуг человека как Владельца Модуля или об эффективности передачи права собственности на Модуль. Почетные владельцы модулей будут различаться по своим навыкам владения, а также по разработке и выполнению плана преемственности. Когда требуется такое качественное понимание, следует проконсультироваться с другими владельцами, коллегами и участниками Модуля.

Спасибо!

Если вы ранее не подтверждали подписку на информационный бюллетень, связанный с Mozilla, возможно, вам придется это сделать. Пожалуйста, проверьте папку "Входящие" или спам-фильтр на наличие писем от нас.

Это руководство содержит все необходимое для начала работы с синтаксисом модуля JavaScript.

Общие сведения о модулях

Программы JavaScript изначально были довольно маленькими. В первые дни он использовался главным образом для выполнения изолированных задач написания сценариев, обеспечивая некоторую интерактивность веб-страниц там, где это необходимо, поэтому большие сценарии, как правило, не требовались. Перенесемся на несколько лет вперед, и теперь у нас есть полные приложения, которые запускаются в браузерах с большим количеством JavaScript, а также JavaScript, используемый в других контекстах (например, Node.js).

Поэтому в последние годы имело смысл задуматься о создании механизмов для разделения программ JavaScript на отдельные модули, которые можно было бы импортировать при необходимости. Node.js уже давно имеет эту возможность, и существует ряд библиотек и фреймворков JavaScript, которые позволяют использовать модули (например, другие модульные системы CommonJS и AMD, такие как RequireJS, а в последнее время — Webpack и Babel).< /p>

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

Поддержка браузера

Использование встроенных модулей JavaScript зависит от операторов импорта и экспорта; они поддерживаются в браузерах следующим образом:

импорт

Таблицы BCD загружаются только в браузере

экспортировать

Таблицы BCD загружаются только в браузере

Представляем пример

Чтобы продемонстрировать использование модулей, мы создали простой набор примеров, которые вы можете найти на GitHub. Эти примеры демонстрируют простой набор модулей, которые создают элемент на веб-странице, а затем рисуют (и сообщают информацию о них) различные фигуры на холсте.

Они довольно тривиальны, но намеренно сделаны простыми, чтобы наглядно продемонстрировать модули.

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

Базовая структура примера

В нашем первом примере (см. основные модули) у нас есть следующая файловая структура:

Примечание. Все примеры в этом руководстве имеют в основном одинаковую структуру; вышеизложенное должно стать довольно знакомым.

Два модуля каталога modules описаны ниже:

    canvas.js — содержит функции, связанные с настройкой холста:
      create() — создает холст заданной ширины и высоты внутри обертки
    • имя — константа, содержащая строку «квадрат».
    • draw() — рисует квадрат на указанном холсте заданного размера, положения и цвета. Возвращает объект, содержащий размер, положение и цвет квадрата.
    • reportArea() — записывает площадь квадрата в определенный список отчета, учитывая его длину.
    • reportPerimeter() — записывает периметр квадрата в определенный список отчетов, учитывая его длину.

    Кроме того, .mjs против .js

    • Это полезно для ясности, т. е. ясно, какие файлы являются модулями, а какие — обычным JavaScript.
    • Это гарантирует, что ваши файлы модулей анализируются как модуль средами выполнения, такими как Node.js, и инструментами сборки, такими как Babel.

    Это нормально, если вы уже используете такую ​​среду или если вы не используете ее, но знаете, что делаете, и имеете доступ (т. е. вы можете настроить свой сервер для установки правильного Content-Type для файлов .mjs). . Однако это может вызвать путаницу, если вы не контролируете сервер, с которого вы обслуживаете файлы, или публикуете файлы для общего пользования, как мы здесь.

    В целях обучения и переносимости мы решили сохранить .js .

    Если вы действительно цените ясность использования .mjs для модулей по сравнению с использованием .js для «обычных» файлов JavaScript, но не хотите сталкиваться с проблемой, описанной выше, вы всегда можете использовать .mjs во время разработки и конвертировать их. в .js на этапе сборки.

    Кратко

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

    WebAssembly дополняет JavaScript и работает вместе с ним. Используя API-интерфейсы WebAssembly JavaScript, вы можете загружать модули WebAssembly в приложение JavaScript и совместно использовать их функциональные возможности. Это позволяет вам использовать производительность и мощь WebAssembly, а также выразительность и гибкость JavaScript в одних и тех же приложениях, даже если вы не знаете, как писать код WebAssembly.

    И что еще лучше, так это то, что он разрабатывается как веб-стандарт рабочей группой и группой сообщества W3C WebAssembly при активном участии всех основных поставщиков браузеров.

    Руководства

    Начните с прочтения основных концепций WebAssembly — что это такое, почему он так полезен, как он вписывается в веб-платформу (и не только) и как его использовать.

    Когда вы написали код на C/C++, вы можете затем скомпилировать его в .wasm с помощью такого инструмента, как Emscripten. Давайте посмотрим, как это работает.

    Основным вариантом использования WebAssembly является использование существующей экосистемы библиотек C и предоставление разработчикам возможности использовать их в Интернете.

    Если вы написали код на Rust, вы можете скомпилировать его в WebAssembly! В этом руководстве вы узнаете все, что вам нужно знать, чтобы скомпилировать проект Rust в wasm и использовать его в существующем веб-приложении.

    Если у вас есть .wasm, в этой статье рассказывается, как получить, скомпилировать и создать его экземпляр, сочетая API JavaScript WebAssembly с API Fetch или XHR.

    Загрузив модуль .wasm, вы захотите его использовать. В этой статье мы покажем вам, как использовать WebAssembly через JavaScript API WebAssembly.

    Экспортированные функции WebAssembly — это отражения функций WebAssembly в JavaScript, которые позволяют вызывать код WebAssembly из JavaScript. В этой статье описывается, что это такое.

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

    Эта статья содержит руководство по преобразованию модуля WebAssembly, написанного в текстовом формате, в двоичный файл .wasm.

    Справочник по API

    Справочная документация по набору операторов потока управления WebAssembly.

    Этот объект действует как пространство имен для всех функций, связанных с WebAssembly.

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

    Поэтому, когда люди говорят о скорости WebAssembly, сравнение яблок с яблоками происходит с JavaScript. Но это не означает, что это ситуация «или-или» — либо вы используете WebAssembly, либо используете JavaScript.

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

    Модули WebAssembly определяют функции, которые можно использовать из JavaScript. Так же, как сегодня вы загружаете модуль, например lodash, из npm и вызываете функции, являющиеся частью его API, в будущем вы сможете загружать модули WebAssembly.

    Итак, давайте посмотрим, как мы можем создавать модули WebAssembly, а затем как мы можем использовать их из JavaScript.

    Куда подходит WebAssembly?

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

    Диаграмма, показывающая промежуточное представление между языками высокого уровня и языками ассемблера, со стрелками, идущими от языков программирования высокого уровня к промежуточному представлению, а затем от промежуточного представления к языку ассемблера

    Какое место в этой картине занимает WebAssembly?

    Вы можете подумать, что это просто еще один из целевых языков ассемблера. Отчасти это так, за исключением того, что каждый из этих языков (x86, ARM ) соответствует определенной архитектуре компьютера.

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

    Итак, WebAssembly немного отличается от других видов сборки. Это машинный язык для концептуальной машины, а не реальной физической машины.

    По этой причине инструкции WebAssembly иногда называют виртуальными инструкциями. Они имеют гораздо более прямое сопоставление с машинным кодом, чем исходный код JavaScript. Они представляют собой своего рода пересечение того, что можно эффективно делать на обычном популярном оборудовании. Но они не являются прямыми сопоставлениями с конкретным машинным кодом одного конкретного оборудования.

    Браузер загружает WebAssembly. Затем он может совершить короткий переход от WebAssembly к ассемблерному коду целевой машины.

    Компиляция в .wasm

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

    Примечание. Большинство разработчиков модулей WebAssembly пишут код на таких языках, как C и Rust, а затем компилируют в WebAssembly, но есть и другие способы создания модуля WebAssembly. Например, есть экспериментальный инструмент, который поможет вам создать модуль WebAssembly с помощью TypeScript, или вы можете напрямую кодировать текстовое представление WebAssembly.

    Допустим, мы хотим перейти с C на WebAssembly. Мы могли бы использовать интерфейс clang для перехода от C к промежуточному представлению LLVM. Как только он попадает в IR LLVM, LLVM понимает его, поэтому LLVM может выполнить некоторые оптимизации.

    Чтобы перейти от IR (промежуточного представления) LLVM к WebAssembly, нам нужна серверная часть. Один из них в настоящее время находится в разработке в проекте LLVM. Этот бэк-энд почти готов и должен быть завершен в ближайшее время. Однако заставить его работать сегодня может быть непросто.

    Есть еще один инструмент под названием Emscripten, который на данный момент немного проще в использовании. У него есть собственная серверная часть, которая может создавать WebAssembly путем компиляции в другую цель (называемую asm.js) и последующего преобразования ее в WebAssembly. Однако внутри он использует LLVM, так что вы можете переключаться между двумя серверными частями из Emscripten.

    Схема набора инструментов компилятора

    Emscripten включает в себя множество дополнительных инструментов и библиотек, позволяющих портировать целые кодовые базы C/C++, так что это больше похоже на комплект разработчика программного обеспечения (SDK), чем на компилятор. Например, разработчики систем привыкли иметь файловую систему, из которой они могут читать и записывать, поэтому Emscripten может смоделировать файловую систему с помощью IndexedDB.

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

    Загрузка модуля .wasm в JavaScript

    Файл .wasm представляет собой модуль WebAssembly, и его можно загрузить в JavaScript. На данный момент процесс загрузки немного усложнился.

    Подробнее об этом можно узнать в нашей документации.

    Мы работаем над тем, чтобы упростить этот процесс. Мы планируем улучшить набор инструментов и интегрировать его с существующими сборщиками модулей, такими как webpack, или загрузчиками, такими как SystemJS. Мы считаем, что загрузка модулей WebAssembly может быть такой же простой, как загрузка модулей JavaScript.

    Однако существует большое различие между модулями WebAssembly и модулями JS. В настоящее время функции в WebAssembly могут использовать только числа (целые числа или числа с плавающей запятой) в качестве параметров или возвращаемых значений.

    Диаграмма, показывающая вызов функции JS функция C и передача целого числа, которое возвращает целое число в ответ

    Для любых более сложных типов данных, таких как строки, необходимо использовать память модуля WebAssembly.

    Если вы в основном работали с JavaScript, вам не так уж знаком прямой доступ к памяти. Более производительные языки, такие как C, C++ и Rust, как правило, имеют ручное управление памятью. Память модуля WebAssembly имитирует кучу, которую вы найдете в этих языках.

    Для этого в JavaScript используется элемент ArrayBuffer. Буфер массива представляет собой массив байтов. Таким образом, индексы массива служат адресами памяти.

    Если вы хотите передать строку между JavaScript и WebAssembly, вы конвертируете символы в их эквивалентный код. Затем вы записываете это в массив памяти. Поскольку индексы являются целыми числами, индекс можно передать в функцию WebAssembly. Таким образом, в качестве указателя можно использовать индекс первого символа строки.

    Диаграмма, показывающая вызов функции JS функция C с целым числом, представляющим указатель в память, а затем функция C, записывающая в память

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

    Если вы хотите узнать больше, ознакомьтесь с нашей документацией по работе с памятью WebAssembly.

    Структура файла .wasm

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

    Если вы еще этого не сделали, рекомендуем прочитать статью о сборке (часть 3 цикла).

    Вот функция C, которую мы превратим в WebAssembly:

    Вы можете попробовать использовать WASM Explorer для компиляции этой функции.

    Если вы откроете файл .wasm (и если ваш редактор поддерживает его отображение), вы увидите что-то вроде этого.

    Это модуль в его «бинарном» представлении. Я заключаю двоичные кавычки, потому что обычно они отображаются в шестнадцатеричном представлении, но его можно легко преобразовать в двоичное представление или в удобочитаемый формат.

    Например, вот как выглядит число + 42.

    Таблица, показывающая шестнадцатеричное представление числа 3 инструкции (20 00 41 2A 6A), их двоичное представление, а затем текстовое представление (get_local 0, i32.const 42, i32.add)

    Как работает код: стековая машина

    Если вам интересно, вот что делают эти инструкции.

    Диаграмма, показывающая, что get_local 0 получает значение первого параметра и помещает его в стек, i32.const 42 помещает в стек постоянное значение, а i32.add добавляет два верхних значения из стека и помещает результат

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

    Такие операции, как добавление, знают, сколько значений им нужно. Поскольку для добавления требуется два, оно будет принимать два значения с вершины стека. Это означает, что инструкция добавления может быть короткой (один байт), потому что инструкции не нужно указывать регистры источника или назначения. Это уменьшает размер файла .wasm, а значит, его загрузка занимает меньше времени.

    Несмотря на то, что WebAssembly указан для стекового компьютера, на физическом компьютере он работает иначе. Когда браузер преобразует WebAssembly в машинный код машины, на которой работает браузер, он будет использовать регистры. Поскольку код WebAssembly не определяет регистры, это дает браузеру больше гибкости для использования наилучшего распределения регистров для этой машины.

    Разделы модуля

    Помимо самой функции add42, в файле .wasm есть и другие части. Это так называемые разделы. Некоторые разделы обязательны для любого модуля, а некоторые являются необязательными.

    1. Тип. Содержит сигнатуры для функций, определенных в этом модуле, и любых импортированных функций.
    2. Функция. Дает индекс каждой функции, определенной в этом модуле.
    3. Код. Фактические тела функций для каждой функции в этом модуле.
    1. Экспорт. Делает функции, память, таблицы и глобальные переменные доступными для других модулей WebAssembly и JavaScript. Это позволяет динамически связывать отдельно скомпилированные модули. Это версия библиотеки .dll от WebAssembly.
    2. Импорт. Указывает функции, память, таблицы и глобальные переменные для импорта из других модулей WebAssembly или JavaScript.
    3. Начать. Функция, которая будет автоматически запускаться при загрузке модуля WebAssembly (по сути, как основная функция).
    4. Глобальный. Объявляет глобальные переменные для модуля.
    5. Память.Определяет объем памяти, который будет использовать этот модуль.
    6. Таблица. Позволяет сопоставлять значения вне модуля WebAssembly, например объекты JavaScript. Это особенно полезно для разрешения непрямых вызовов функций.
    7. Данные. Инициализирует импортированную или локальную память.
    8. Элемент. Инициализирует импортированную или локальную таблицу.

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

    Следующее

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

    О Лин Кларк

    Лин работает в отделе передовых разработок в Mozilla, специализируясь на Rust и WebAssembly.

    Спасибо! Пожалуйста, проверьте свой почтовый ящик, чтобы подтвердить подписку.

    Если вы ранее не подтверждали подписку на информационный бюллетень, связанный с Mozilla, возможно, вам придется это сделать. Пожалуйста, проверьте папку "Входящие" или спам-фильтр на наличие писем от нас.

    4 комментария

    Отличный цикл статей Лин. Давно ждал чего-то вроде.

    Объясните, пожалуйста, как вы определили порядок,

    C —> IR —-> WASM —-> Machine Code

    а почему бы и нет

    C —> WASM —-> IR —-> Машинный код?

    На второй диаграмме IR LLVM будет отправлен в браузер в виде битового кода. Часто задаваемые вопросы по WebAssembly объясняют, почему они решили этого не делать.

    Мост от C к IR уже существовал (CLANG), и реализация мостов от IR к WASM и от WASM к машинному коду относительно проста.

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

    Комментарии к этой статье закрыты.

    Если не указано иное, контент на этом сайте находится под лицензией Creative Commons Attribution Share-Alike License v3.0 или любой более поздней версии.

    Добро пожаловать в область обучения MDN. Этот набор статей предназначен для того, чтобы помочь новичкам в веб-разработке и получить все необходимое для начала кодирования веб-сайтов.

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

    Если вы совсем новичок, веб-разработка может оказаться сложной задачей — мы будем держать вас за руку и предоставим достаточно подробностей, чтобы вы чувствовали себя комфортно и должным образом изучали темы. Вы должны чувствовать себя как дома, независимо от того, являетесь ли вы студентом, изучающим веб-разработку (самостоятельно или в составе класса), учителем, ищущим учебные материалы, любителем или кем-то, кто просто хочет больше узнать о том, как работают веб-технологии.< /p>

    Хотите стать фронтенд-разработчиком?

    Мы составили курс, который включает в себя всю необходимую информацию, необходимую для достижения вашей цели.

    С чего начать

    Если вы совсем новичок в веб-разработке, мы рекомендуем вам начать с изучения нашего модуля «Начало работы с веб-сайтом», который представляет собой практическое введение в веб-разработку.

    Помимо основ

    Если у вас уже есть какие-то знания, следующим шагом будет подробное изучение HTML и CSS: начните с нашего модуля «Введение в HTML» и перейдите к нашему модулю «Первые шаги по CSS».

    Переход к написанию сценариев

    Если вы уже хорошо разбираетесь в HTML и CSS или в основном интересуетесь кодированием, вам следует перейти к разработке JavaScript или серверной части. Начните с наших модулей «Первые шаги по JavaScript» и «Первые шаги на стороне сервера».

    Фреймворки и инструменты

    После освоения основ ванильного HTML, CSS и JavaScript вы должны изучить инструменты веб-разработки на стороне клиента, а затем рассмотреть возможность изучения фреймворков JavaScript на стороне клиента и программирования веб-сайтов на стороне сервера.

    Примечание. Наш глоссарий содержит определения терминов. Кроме того, если у вас есть конкретный вопрос о веб-разработке, наш раздел «Частые вопросы» может помочь вам.

    Случайная запись в глоссарии

    XHTML XHTML — это термин, исторически использовавшийся для описания HTML-документов, написанных в соответствии с правилами синтаксиса XML.

    Рассматриваемые темы

    Ниже приведен список всех тем, которые мы рассматриваем в области обучения MDN.

    Содержит практическое введение в веб-разработку для начинающих.

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

    CSS – это язык, который мы можем использовать для оформления и компоновки нашего веб-контента, а также для добавления таких действий, как анимация.В этом разделе представлен всесторонний обзор CSS.

    JavaScript – это язык сценариев, используемый для добавления динамических функций на веб-страницы. В этом разделе рассказывается обо всем, что необходимо для того, чтобы научиться писать и понимать JavaScript.

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

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

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

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

    Даже если вы занимаетесь веб-разработкой на стороне клиента, все равно полезно знать, как работают серверы и функции серверного кода. В этом разделе представлены общие сведения о том, как работает серверная часть, и подробные руководства, показывающие, как создать серверное приложение с использованием двух популярных платформ: Django (Python) и Express (Node.js).

    Получение примеров кода

    Примеры кода, с которыми вы столкнетесь в области обучения, доступны на GitHub. Если вы хотите скопировать их все на свой компьютер, проще всего загрузить ZIP-архив с последней веткой мастер-кода.

    Если вы предпочитаете копировать репозиторий более гибким способом, допускающим автоматические обновления, вы можете следовать более сложным инструкциям:

      на вашей машине. Это основное программное обеспечение системы контроля версий, над которым работает GitHub.
    1. Откройте командную строку компьютера (Windows) или терминал (Linux, macOS).
    2. Чтобы скопировать репозиторий области обучения в папку с именем Learning-Area в текущем местоположении, на которое указывает ваша командная строка/терминал, используйте следующую команду:

    Вы можете обновить репозиторий учебных областей любыми изменениями, внесенными в основную версию на GitHub, выполнив следующие действия:

      В командной строке/терминале перейдите в каталог области обучения, используя cd. Например, если вы находились в родительском каталоге:

    Свяжитесь с нами

    Если вы хотите связаться с нами по какому-либо вопросу, лучше всего отправить нам сообщение на нашем форуме Discourse. Мы хотели бы услышать от вас обо всем, что вы считаете неправильным или отсутствующим на сайте, запросах на новые учебные темы, запросах на помощь с элементами, которые вы не понимаете, или о любых других вопросах или проблемах.

    Если вы хотите помочь в разработке/улучшении контента, узнайте, как вы можете помочь, и свяжитесь с нами! Мы будем более чем рады поговорить с вами, независимо от того, являетесь ли вы учеником, учителем, опытным веб-разработчиком или кем-то еще, кто заинтересован в том, чтобы помочь улучшить процесс обучения.

    См. также

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

    Отличный ресурс для начинающих веб-разработчиков. Изучайте JavaScript в интерактивной среде с короткими уроками и интерактивными тестами, руководствуясь автоматизированной оценкой. Первые 40 уроков бесплатны, а весь курс доступен за небольшой разовый платеж.

    Отличная серия видеороликов, объясняющих основы работы в Интернете и предназначенная для начинающих веб-разработок. Создано Жереми Патонье.

    Отличный интерактивный сайт для изучения языков программирования с нуля.

    Основы теории кодирования с игровым процессом обучения. Ориентирован в основном на новичков.

    Основы теории и практики кодирования, в первую очередь предназначенные для детей/полных новичков.

    Бесплатные открытые курсы по обучению техническим навыкам с наставничеством и проектным обучением.

    Интерактивный сайт с учебными пособиями и проектами для изучения веб-разработки.

    Основа для начального уровня веб-грамотности и навыков 21 века, которая также обеспечивает доступ к учебным занятиям, отсортированным по категориям.

    Читайте также: