Webassembly

Captions

Licensingedit

This file is in the public domain because it comes from the Manual on Uniform Traffic Control Devices

Any traffic control device design or application provision contained in this Manual shall be considered to be in the public domain. Traffic control devices contained in this Manual shall not be protected by a patent, trademark, or copyright, except for the Interstate Shield and any other items owned by FHWA.

This work includes material that may be protected as a trademark in some jurisdictions. If you want to use it, you have to ensure that you have the legal right to do so and that you do not infringe any trademark rights. See our general disclaimer.This tag does not indicate the copyright status of the attached work. A normal copyright tag is still required. See Commons:Licensing.

File history

Click on a date/time to view the file as it appeared at that time.

Date/Time Thumbnail Dimensions User Comment
current 17:31, 22 August 2017 601 × 601 (12 KB) Fredddie

The following page uses this file:

User:Fredddie/gallery/archive 15

Metadata

This file contains additional information such as Exif metadata which may have been added by the digital camera, scanner, or software program used to create or digitize it. If the file has been modified from its original state, some details such as the timestamp may not fully reflect those of the original file. The timestamp is only as accurate as the clock in the camera, and it may be completely wrong.

Width 601.00299
Height 601

JIANGMEN XINLIKE MAGNET CO., LTD.

Business Type: Manufacturer/Factory
Main Products: Magnet , Permanent Magnet , Neodymium Magnet , NdFeB Magnet , Strong Magnet
Mgmt. Certification:

ISO 9001

Factory ownership: Limited Company
R&D Capacity: OEM, ODM, Own Brand
Location: Jiangmen, Guangdong

Tags:
Motorcycle Brake Assembly Company, Steering Shaft Assembly Company, U Joint Assembly Company

  • Block High Quality Neodymium Permanent Sintered Rare Earth Magnet

    Unit Price: US $ 0.01-5 / Piece

    Min. Order: 1000 Pieces

  • 2018 Steady Magnetic Power Quality Neodymium Permanent Magnet

    Unit Price: US $ 0.5-1 / Piece

    Min. Order: 500 Pieces

  • Permanent Strong Neodymium Magnet with Metal Cup and Screw

    Unit Price: US $ 2-5 / Piece

    Min. Order: 100 Pieces

Почему это важно?

Во-первых, новый формат WebAssembly обещает значительное увеличение производительности парсинга. Как сказано в FAQ WebAssembly, тип бинарного формата, используемый в WebAssembly, может быть декодирован гораздо быстрее, чем JavaScript может быть пропарсен (эксперименты показывают более чем 20-кратную разницу). На мобильных устройствах большому скомпилированному коду может запросто потребоваться 20–40 секунд только на парсинг, поэтому встроенное декодирование (особенно в сочетании с такими технологиями, как улучшенная по сравнению с gzip потоковая подача для сжатия) имеет решающее значение для обеспечения хорошего пользовательского опыта.

Обратите внимание, что речь идёт о производительности парсинга, а не о производительности исполнения, т.к. во многих случаях будет использоваться существующий JavaScript-движок

Однако даже это позволит использовать в вебе ПО, которое раньше было бы нецелесообразно разрабатывать, например: виртуальные машины, виртуальную реальность, распознавание изображений и многое другое.

Первыми пользователями wasm, вероятно, будут разработчики игровых движков, поскольку они всё время ищут, как бы улучшить производительность. До WebAssembly лучшим, на что они могли надеяться, был asm.js (упрощённый JavaScript, оптимизированный для скорости), который был хорошей технологией, но не очень полезной для многих игр.

В сущности, Autodesk планирует добавить поддержку WebAssembly для своего игрового движка Stingray, а Unity Technologies, создатели игрового движка Unity, начали экспериментировать с WebAssembly ещё в 2015 году. Разработчики Rust также работают над поддержкой WebAssembly для запуска кода Rust в вебе.

Прим.перев. На самом деле, Rust уже умеет компилировать в wasm напрямую, без Emscipten. Кроме того, с момента написания статьи произошли изменения: Autodesk сообщила о прекращении разработки и продажи Stingray.

Примечания

  1. . webassembly.org. Дата обращения 25 ноября 2018.
  2. . GitHub.
  3. . GitHub.
  4.  (англ.). ②ality — JavaScript and more (18 June 2015).
  5. Bright, Peter . Ars Technica. Condé Nast (18 June 2015).
  6.  (англ.). GitHub / WebAssembly / design (11 June 2015).
  7.  (англ.). Mike Holman’s Blog (17 June 2015). Дата обращения 7 июня 2017.
  8. Wagner, Luke . Mozilla Hacks (14 March 2016).
  9.  (англ.). WebAssembly (March 2017).
  10.  (англ.) (30 May 2017). Дата обращения 10 июня 2017.
  11.  (англ.) (22 December 2016). Дата обращения 7 июня 2017.
  12. . tip.golang.org. Дата обращения 16 июля 2018.
  13. .
  14.  (англ.). The Mozilla Blog (13 November 2017). Дата обращения 31 октября 2019.
  15. . Дата обращения 7 июня 2017.
  16.  (англ.) (7 March 2017). Дата обращения 7 июня 2017.
  17.  (англ.) (22 September 2017).
  18.  (англ.) (31 October 2017). Дата обращения 14 ноября 2017.

Оптимизация движка игры

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

Что нужно сделать:

  1. Реализовать логику игры на C;
  2. Компилировать логику с C на wasm;
  3. Перевести wasm в код на JavaScript;
  4. Найти способ взаимодействия между кодом на C и JavaScript.

Компиляция кода на C в wasm со связками JavaScript

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

Вам следует знать, что он не позволяет вызывать функцию  в коде на C, которая выделяет блок памяти размером байт и возвращает указатель на начало блока. Это не очень серьёзная проблема для нашей «Hello World», но это станет проблемой, если у вас будут более масштабные проекты. К счастью, есть возможность компилировать код на C с помощью SDK Emscripten, благодаря которому будет создан модуль wasm и модуль JavaScript, который будет служить в качестве соединяющего звена, позволяющего интегрировать WebAssembly в клиентский код. В нашем случае это позволит вызывать функцию  и считывать информацию с выделенной памяти со стороны JavaScript.

Компиляция выполняется следующим образом:

Используя , мы помещаем весь код на JavaScript в функуцию. К сожалению, это не совсем JS-модуль (ни AMDdefine, ни CommonJS, ни ES6), поэтому мы просто добавим к  (исходный код), а всё остальное уже сделает WebPack, что позволит нам импортировать модуль в наш клиентский код на ES6:

Нужно указать расширение при импорте, так как в той же папке уже имеется — это URL-адрес, который используется для асинхронного извлечения wasm-кода. Таким образом мы сообщаем Webpack, что нужно его с помощью .

Вызов функций wasm из JavaScript

Emscripten не отображает функции языка C по умолчанию (однако исключения имеют место быть), поэтому нам следует сообщить, что нужно это сделать:

делает именно то, что нужно — экспортирует функции. Теперь можно вызывать функцию , чтобы задать размер сетки 40 на 40 px, например.

Доступ к памяти wasm-модуля из JavaScript

SDK Emscripten удобным образом предоставляет память модуля через переменные . взаимодействия с памятью — использование и

Но так как этот способ является более медленным, поэтому в данном случае мы будем напрямую взаимодействовать с , принимая во внимание, что свойства содержатся в массиве символов

Примечание Доступ к незадокументированным свойствам может быть нарушен в будущем.

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

Использование WebAssembly

Если вы просто разработчик, заинтересованный в использовании WebAssembly, то для знакомства с ним вы можете использовать Emscripten (SDK). Emscripten — это набор инструментов, который уже используется для компиляции C/C++ в asm.js. С Emscripten вам будет легче использовать ранее упомянутый Binaryen и интегрировать его со своим собственным набором инструментов.

После установки Emscripten или его компиляции из исходного кода необходимо установить binaryen:

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

Наконец, вы можете писать ваш код:

И затем скомпилировать в WebAssembly и увидеть результат в браузере:

Первая команда создаст три файла: модуль WASM, HTML-файл, который показывает код в действии, и JS-файл, который запускает модуль и отвечает за всё, что нужно для его запуска. Параметр WASM=1 говорит Emscripten, что мы хотим сгенерировать модуль WASM вместо asm.js-файла.

Вы также можете вывести свой код в настраиваемый шаблон, используя флаг . Emscripten SDK содержит базовый шаблон в этом месте: . Скопируйте этот файл в свой проект и адаптируйте его под свои нужды (например, добавьте остальную часть вашего JS-кода).

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

Конечная цель состоит в том, чтобы подключать модуль WebAssembly так же легко, как подключается код JavaScript, с помощью HTML-тега

Why have wasm32 and wasm64, instead of just an abstract size_t?

The amount of linear memory needed to hold an abstract would then also
need to be determined by an abstraction, and then partitioning the linear memory
address space into segments for different purposes would be more complex. The
size of each segment would depend on how many -sized objects are stored
in it. This is theoretically doable, but it would add complexity and there would
be more work to do at application startup time.

Also, allowing applications to statically know the pointer size can allow them
to be optimized more aggressively. Optimizers can better fold and simplify
integer expressions when they have full knowledge of the bitwidth. And, knowing
memory sizes and layouts for various types allows one to know how many trailing
zeros there are in various pointer types.

Also, C and C++ deeply conflict with the concept of an abstract .
Constructs like are required to be fully evaluated in the front-end
of the compiler because they can participate in type checking. And even before
that, it’s common to have predefined macros which indicate pointer sizes,
allowing code to be specialized for pointer sizes at the very earliest stages of
compilation. Once specializations are made, information is lost, scuttling
attempts to introduce abstractions.

And finally, it’s still possible to add an abstract in the future if
the need arises and practicalities permit it.

What about mmap?

The
syscall has many useful features. While these are all packed into one overloaded
syscall in POSIX, WebAssembly unpacks this functionality into multiple
operators:

  • the MVP starts with the ability to grow linear memory via a
    operator;
  • proposed
    would
    allow the application to change the protection and mappings for pages in the
    contiguous range to .

A significant feature of that is missing from the above list is the
ability to allocate disjoint virtual address ranges. The reasoning for this
omission is:

  • The above functionality is sufficient to allow a user-level libc to implement
    full, compatible with what appears to be noncontiguous memory
    allocation (but, under the hood is just coordinated use of and
    ///).
  • The benefit of allowing noncontiguous virtual address allocation would be if
    it allowed the engine to interleave a WebAssembly module’s linear memory with
    other memory allocations in the same process (in order to mitigate virtual
    address space fragmentation). There are two problems with this:

    • This interleaving with unrelated allocations does not currently admit
      efficient security checks to prevent one module from corrupting data outside
      its heap (see discussion in
      #285).
    • This interleaving would require making allocation nondeterministic and
      nondeterminism is something that WebAssembly generally
      tries to avoid.

Compiling the Toolchain for unsupported Linux distributions or just for fun

If you are running a Linux distribution for which Emscripten toolchain is not available precompiled (currently Ubuntu 16.04 works best), or if you want to build the whole toolchain from source, Emscripten SDK can also be used to drive the build. The required steps are as follows.

Prerequisites

To compile the WebAssembly toolchain, some prerequisite tools are needed:

  • Git. On Linux and OS X this is likely already present. On Windows download the Git for Windows installer.
  • CMake. On Linux and OS X, one can use package managers like or , on Windows download CMake installer.
  • Host system compiler. On Linux, install GCC. On OS X, install Xcode. On Windows, install Visual Studio 2015 Community with Update 3 or newer.
  • Python 2.7.x. On Linux and OS X, this is most likely provided out of the box. See here for instructions.

After installing, make sure that , and are accessible in PATH. Technically, CMake and a system compiler may not be needed if using a precompiled toolchain, but development options may be a bit limited without them.

Will WebAssembly support View Source on the Web?

Yes! WebAssembly defines a text format to be rendered when
developers view the source of a WebAssembly module in any developer tool. Also,
a specific goal of the text format is to allow developers to write WebAssembly
modules by hand for testing, experimenting, optimizing, learning and teaching
purposes. In fact, by dropping all the
,
the WebAssembly text format should be much more natural to read and write than
asm.js. Outside the browser, command-line and online tools that convert between
text and binary will also be made readily available. Lastly, a scalable form of
source maps is also being considered as part of the WebAssembly
tooling story.

Представление

Следующая таблица показывает три различных представления одного и того же исходного кода по мере трансляции его в wasm:

Исходный код на C «линейный ассемблерный байт-код» бинарный код WASM
int factorial(int n) {
  if (n == )
    return 1;
  else
    return n * factorial(n-1);
}
get_local 0
i64.eqz
if i64
    i64.const 1
else
    get_local 0
    get_local 0
    i64.const 1
    i64.sub
    call 0
    i64.mul
end
20 00
50
04 7e
42 01
05
20 00
20 00
42 01
7d
10 00
7e
0b

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

(module
  (type $FUNCSIG$dd (func (param f64) (result f64)))
  (import "global.Math" "exp" (func $exp (param f64) (result f64)))
  (memory 256 256)
  (export "memory" (memory ))
  (func $doubleExp (param $0 f64) (result f64)
    (f64.mul
      (call $exp
        (get_local $0)
      )
      (f64.const 2)
    )
  )
  (export "doubleExp" (func $doubleExp))
)

Переопределение URL-адресов для маршрутизацииRewrite URLs for correct routing

Маршрутизация запросов к компонентам страниц в приложении Blazor WebAssembly не настолько проста, как маршрутизация запросов к приложению, размещенному на сервере Blazor.Routing requests for page components in a Blazor WebAssembly app isn’t as straightforward as routing requests in a Blazor Server, hosted app. Рассмотрим приложение Blazor WebAssembly с двумя компонентами:Consider a Blazor WebAssembly app with two components:

  • Main.razor – — загружается в корне приложения и содержит ссылку на компонент ().Main.razor – Loads at the root of the app and contains a link to the component ().
  • About.razor –  — компонент.About.razor – component.

При запросе документа приложения по умолчанию в адресной строке браузера (например, ):When the app’s default document is requested using the browser’s address bar (for example, ):

  1. Браузер отправляет запрос.The browser makes a request.
  2. Возвращается страница по умолчанию; обычно это index.html.The default page is returned, which is usually index.html.
  3. Страница index.html обеспечивает начальную загрузку приложения.index.html bootstraps the app.
  4. Загружается маршрутизатор Blazor, и компонент Razor преобразовывается для просмотра.Blazor’s router loads, and the Razor component is rendered.

На странице Main возможность выбора ссылки на компонент доступна на клиентском компьютере, так как маршрутизатор Blazor не разрешает браузеру сделать запрос в Интернете к для и сам обрабатывает отображенный компонент .In the Main page, selecting the link to the component works on the client because the Blazor router stops the browser from making a request on the Internet to for and serves the rendered component itself. Все запросы внутренних конечных точек в пределах приложения Blazor WebAssembly будут работать так же: Запросы не активируют браузерные запросы к ресурсам, размещенным на сервере в Интернете.All of the requests for internal endpoints within the Blazor WebAssembly app work the same way: Requests don’t trigger browser-based requests to server-hosted resources on the Internet. Маршрутизатор обрабатывает запросы внутренним образом.The router handles the requests internally.

Если запрос сделан с помощью адресной строки браузера, он завершится ошибкой.If a request is made using the browser’s address bar for , the request fails. Такой ресурс не существует на интернет-узле приложения, поэтому возвращается ответ 404 — Not Found (не найдено).No such resource exists on the app’s Internet host, so a 404 — Not Found response is returned.

Поскольку браузеры выполняют запросы к интернет-узлам для страниц на стороне клиента, веб-серверам и службам размещения необходимо переопределять все запросы к ресурсам, физически находящимся не на сервере, в случае страницы index.html.Because browsers make requests to Internet-based hosts for client-side pages, web servers and hosting services must rewrite all requests for resources not physically on the server to the index.html page. Когда index.html возвращается, маршрутизатор Blazor приложения берет на себя управление и отвечает необходимым ресурсом.When index.html is returned, the app’s Blazor router takes over and responds with the correct resource.

При развертывании на сервере IIS можно использовать модуль переопределения URL-адресов с опубликованным файлом приложения web.config.When deploying to an IIS server, you can use the URL Rewrite Module with the app’s published web.config file. Дополнительные сведения см. в описании .For more information, see the section.

Projects

Web frameworks-libraries

  • asm-dom — A minimal WebAssembly virtual DOM to build C++ SPA
  • Yew — Rust framework for making client web apps
  • Perspective — Streaming pivot visualization via WebAssembly
  • go-vdom-wasm — Webassembly VDOM to create web application using Golang(experimental)

WebGL

  • ammo.js — direct port of the Bullet physics engine to JavaScript using Emscripten
  • Particle System — an experiment designed to benchmark web technologies: ES6, Emscripten and Web Assembly

Node.js

  • webassembly — A minimal toolkit and runtime to produce and run WebAssembly modules.
  • wasm-pack — pack up the wasm and publish it to npm!
  • go-wasm-cli — Minimalistic cli to create and run (with hot reload) Go application targeting WASM
  • xwasm — WebAssembly Packager and WASM tooling for modern frontend

.NET

  • Uno Platform — An implementation of Microsoft’s UWP APIs for iOS/Android/WebAssembly, using C#/XAML on top of mono-wasm
  • Ooui.Wasm — A Xamarin.Forms backend for WebAssembly, using C#/XAML on top of mono-wasm

Others

  • wasm-init — Work environment and code generator for WebAssembly projects
  • wasm — Python WebAssembly decoder & disassembler library
  • MXnet.js — ASM.js build of MXNet, deep learning (neural nets and so) library
  • Eufa — a high efficient utility functions library written in webassembly
  • Argon2 in browser — Argon2 library compiled for browser runtime
  • cld3-asm — Wasm based JS binding for Google compact language detector 3
  • hunspell-asm — Wasm based JS binding for Hunspell spellchecker
  • wasm-bindgen — Interoperating JS and Rust code
  • ewasm — Ethereum flavored WebAssembly
  • webm-wasm — Create webm videos in JavaScript via WebAssembly
  • wasm-pdf – Generate PDF files with JavaScript/WASM
  • go-web-app – Quickly setup Go + WebAssembly frontend apps

Поддержка в языках программирования

Поддерживается компиляция в WebAssembly из множества языков, реализация находится на разных стадиях:

  • C/C++ — через набор инструментов Emscripten и Binaryen обеспечивается компиляция в asm.js и wasm, использует LLVM.
  • Rust — экспериментальная поддержка компиляции в wasm поддерживается с версии 1.14.
  • Elixir/Erlang — через компилятор Lumen, разработанный специально для WebAssembly.
  • Go — экспериментальная поддержка компиляции в wasm поддерживается с версии 1.11.
  • TypeScript — через AssemblyScript.
  • C# — через Blazor и Uno Platform — на основе mono
  • D — LDC начиная с версии 1.11 поддерживает компиляцию и линковку кода на D напрямую в WebAssembly.

Is WebAssembly trying to replace JavaScript?

No! WebAssembly is designed to be a complement to, not replacement of,
JavaScript. While WebAssembly will, over time, allow many languages to be
compiled to the Web, JavaScript has an incredible amount of momentum and will
remain the single, privileged (as described
) dynamic language of the
Web. Furthermore, it is expected that JavaScript and WebAssembly will be used
together in a number of configurations:

  • Whole, compiled C++ apps that leverage JavaScript to glue things together.
  • HTML/CSS/JavaScript UI around a main WebAssembly-controlled center canvas,
    allowing developers to leverage the power of web frameworks to build
    accessible, web-native-feeling experiences.
  • Mostly HTML/CSS/JavaScript app with a few high-performance WebAssembly modules
    (e.g., graphing, simulation, image/sound/video processing, visualization,
    animation, compression, etc., examples which we can already see in asm.js
    today) allowing developers to reuse popular WebAssembly libraries just like
    JavaScript libraries today.
  • When WebAssembly
    gains the ability to access garbage-collected objects ,
    those objects will be shared with JavaScript, and not live in a walled-off
    world of their own.

Languages

JavaScript-family

  • AssemblyScript — A subset of TypeScript that compiles to WebAssembly
  • TurboScript — A TypeScript-like language that compiles to asm.js and WebAssembly (unmaintained)
  • speedy.js — Accelerate JavaScript Applications by Compiling to WebAssembly (unmaintained)

Rust

  • parity-wasm — WebAssembly serialization/deserialization library in pure Rust
  • wasmi — WebAssembly interpreter in pure Rust
  • awesome-rust (has scattered references to targeting WASM)

WASM-like

  • wah — a slightly higher-level language superset of webassembly
  • Walt — Alternative Syntax for WebAssembly
  • wam — Superset of wast syntax that is more convenient for humans to write directly

Как это работает

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

Для достижения этой цели WebAssembly определяет как двоичный формат, так и эквивалентный текстовый формат для инструментов и людей. Технически текстовый формат использует S-выражения, поэтому он будет выглядеть следующим образом:

Однако инструменты, вероятно, покажут нечто более похожее на это (пример из документации):

C++ BINARY TEXT
int factorial(int n) {
  if (n == 0)
    return 1;
  else
    return n * factorial(n-1);
}
20 00
42 00
51
04 7e
42 01
05
20 00
20 00
42 01
7d
10 00
7e
0b
get_local 0
i64.const 0
i64.eq
if i64
    i64.const 1
else
    get_local 0
    get_local 0
    i64.const 1
    i64.sub
    call 0
    i64.mul
end

Если вас интересует, почему в качестве примера используется C++, то это из-за того, что целью начального выпуска (MVP) WebAssembly была поддержка C/C++. Поддержка других языков будет позже; в данный момент они находятся в разработке. Этот выбор был сделан по нескольким техническим и практическим причинам:

  • MVP WebAssembly не поддерживает сборку мусора (в разработке);
  • Реализация компилятора C/C++ в WebAssembly может полагаться на проверенные временем инструменты вроде LLVM (один из наиболее используемых наборов инструментов для компилятора).

Разработчики WebAssembly используют LLVM для сокращения объёма работы, необходимой для получения рабочего продукта. Кроме того, это позволило им легко интегрироваться с другими инструментами, которые работают с LLVM, такими как Emscripten.

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

Тестирование

Тестирование — это сложный и интересный шаг для каждого разработчика, но, возможно, это слово не очень подходит к такой программе, как «Hello World», поэтому следующая операция не должна расцениваться, как оценка производительности wasm. Код на C не оптимизирован для быстрой производительности, но он написан в виде простой реализации JavaScript. При этом мы можем посмотреть, будет ли он работать быстрее, чем стандартный JavaScript. Была произведена проверка производительности в браузере Chrome 58.

Оригинальный JavaScript-код:
Код на WebAssembly:
В среднем , которая запускалась за ~40 мс, теперь запускается за ~15 мс. Это, конечно, не заоблачные достижения, но этого достаточно, чтобы увеличить FPS с 18 до 40. Улучшения были менее заметны в Firefox 53.

  • Версия с 5 пикселями на одну клетку со скоростью до 60 FPS
  • Версия с 1 пикселем на одну клетку со скоростью до 60 FPS

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

Ссылка на основную публикацию