...

/

Understanding How WebAssembly Works

Understanding How WebAssembly Works

Compare how a JS engine deals with JavaScript and WebAssembly execution.

Let’s first explore how JavaScript and WebAssembly are executed inside the JavaScript engine.

Understanding JavaScript execution inside the JavaScript engine

The JavaScript engine first fetches the complete JavaScript file (the engine has to wait until the entire file is downloaded/loaded).

Note: The bigger the JavaScript file, the longer it takes to load. It doesn’t matter how fast your JavaScript engine is or how efficient your code is. If your JavaScript file is huge (that is, greater than 170 KB), then your application is going to have a slow loading time.

Press + to interact
JavaScript execution inside the JavaScript engine
JavaScript execution inside the JavaScript engine

Once loaded, the JavaScript is parsed into abstract syntax trees (ASTs). This phase is called parse. Since JavaScript is both an interpreted and compiled language, the JavaScript engine kickstarts the execution after parsing. The interpreter executes the code faster, but it compiles the code every time. This phase is called interpret.

The JavaScript engine has watchers (called profilers in some browsers). Watchers keep track of code execution. If a particular block of code is executed frequently, then ...