GithubHelp home page GithubHelp logo

alexxnica / polyfill-prototype-1 Goto Github PK

View Code? Open in Web Editor NEW

This project forked from lukewagner/polyfill-prototype-1

0.0 1.0 0.0 276 KB

Experimental WebAssembly polyfill library and tools

License: Apache License 2.0

Makefile 0.48% JavaScript 22.43% Shell 0.03% C++ 76.50% C 0.18% Python 0.38%

polyfill-prototype-1's Introduction

WebAssembly Polyfill (prototype)

This repo contains a prototype built to demonstrate the viability of a WebAssembly polyfill. Work is ongoing in other repos to design the actual standard binary format. This prototype also makes no attempt to call native browser decoding and so it is not, technically, a polyfill but rather a pure JS library.

Demos

See FAQ entry.

How it (currently) works

A real (non-prototype) polyfill would hook into an ES6 Module loader polyfill so that loading a WebAssembly module will Just Work. The scheme described here is just a proof of concept for how the polyfill can avoid massive copying, string manipulation and garbage.

  1. On the main thread, the client kicks off a load of a URL by calling loadWebAssembly and receives a Promise<Function>.
  2. The polyfill library starts up a worker containing asm.js code compiled from unpack.cpp concatenated with the glue code in load-wasm-worker.js.
  3. The worker glue code fetches the binary via XHR then copies the result into the asm.js heap.
  4. The asm.js code decodes the binary into asm.js in the form of UTF8 bytes in a separate region of the asm.js heap.
  5. The worker glue code creates a Blob (a read-only copy) from a view of just the asm.js UTF8 bytes.
  6. The Blob is postMessage()ed back to the main thread (a non-copying operation) where it is loaded as a script element with script.src = URL.getObjectURL(blob).
  7. When the asm.js script is executed, it passes the asm.js module function object to a callback which resolves the promise in step 1.

Build instructions

The library in jslib/ should be ready to use, just copy both files and call loadWebAssembly().

Running make compiles the C++ implementation into the JS files in jslib/ and into native executables in tools/. (The Makefile is currently super-unportable. Sorry! Patches welcome.)

Packing asm.js into the binary format

The polyfill also comes with a tool (tools/pack-asmjs) that compiles a single JS file (containing only asm.js) into the (experimental) WebAssembly format decoded by the library. Given an existing asm.js application, one can experiment with this polyfill (perform direct size/load-time comparisons) by following the steps:

  1. Separate the asm.js module out into a separate file.
  2. Run tools/pack-asmjs to produce a .wasm file.
  3. Refactor the code that called the asm.js module to instead call loadWebAssembly() (which returns a promise that resolves to the unlinked asm.js module function).

Future work

  • Decode while downloading (using HTTP Range requests or splitting into separate files)
  • Perform generic compression on top of the .wasm file (e.g., lzham gives a further 24% boost over gzip).

polyfill-prototype-1's People

Contributors

1div0 avatar ckknight avatar kg avatar kripken avatar lukewagner avatar waywardmonkeys avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.