About Web, About WebAssembly

  • Hans Huang
  • 38 Minutes
  • April 3, 2021

The giants behind javascript/web.

Render Engine

Webkit Architecture

WebCore

WebCore implementation impacts HTML compatibility.

JavascriptCore

Javascript engine which interpreters and executes javascript.
Roughly Javascript Engine = Interpreter + JIT Compiler + GC

The lexer will break down our source codes into a series of JS Tokens

1
2
3
const a = 1;
let b = 1 + a
[a, b].forEach(s=> console.log(s))

Some example tokens from above code snippet

Code Token
const Keyword
a Identifier
= EQUAL
1 Number
; SEMICOLON

For more detail, we can directly check in source code:
https://github.com/WebKit/WebKit/blob/main/Source/JavaScriptCore/parser/Lexer.cpp

The parser will build an abstract syntax tree from above tokens. The AST represents code structural detail & meaning of each node.

Still for above sample codes, example AST would be like below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "value": 1,
            "raw": "1"
          }
        }
      ],
      "kind": "const"
    },
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "b"
          },
          "init": {
            "type": "BinaryExpression",
            "operator": "+",
            "left": {
              "type": "Literal",
              "value": 1,
              "raw": "1"
            },
            "right": {
              "type": "Identifier",
              "name": "a"
            }
          }
        }
      ],
      "kind": "let"
    }
  ]
}

Visualize Generator: https://esprima.org/demo/parse.html

All above processes are running in single thread. To allow web app handling multi-thread tasks asynchronously, WebWorker & EventLoop are involved.
WebWorker is a separated OS level thread provided by browser core, communicate with main/UI thread with event driven mechanism, this communication mechanism is called EventLoop.

Pain Points of JavaScript

Javascript is rapid development / highly deliverable language, but was not designed to be executed with high performance, first version is designed within 10 days.

Cutting Edge Research

WebAssembly

  1. It’s a new standard by W3C, supported by mainstream modern web browsers.
  2. It’s a VM and compilation target from different languages: C/C++, Go/Rust, C#/Java/Swift…
  3. Compact binary format with near native speed.
  4. Shares same security policies in web browser sandbox.
  5. Goal is to handle high performance requirement, not to replace JS.

Get Start with WebAssemble: https://webassembly.org/getting-started/developers-guide/

WebAssembly Examples

WebAssembly Ecosystem

Performance Benchmark

  1. https://github.com/stefan-schweiger/bakkBenchmark

When to consider WebAssembly ?

WebGL

Render 2D/3D graphics on WebBrowser with GPU.
Makes GPU computing is possible for web apps.
e.g. https://blog.logrocket.com/ai-in-browsers-comparing-tensorflow-onnx-and-webdnn-for-image-classification/

© 2021 Hans Huang