Accelerating the Web performance by compiling Javascript code to WASM

13 September 2023


Andrew Comminos, angel_, ChrisLorenzo, Christian Liebel, christianliebel, chunming, Daniel Peintner, dape, Ding Wei, Dingwei, fuqiao, gaochun, Huaqi Shan, JaseW, Jiantong Zhou, Ken Komatsu, Li Lin, martin_alvarez, MartinA, participants on Zoom (Kirk Lin; Jianxin Zhang; Larry Zhao; yu luo; Huihai Shen; davey; Alexandru Mihai; Davor Davidovikj; ripple; Dbettkk), Roy, Sam Weiss, shanhuaqi, SHi Lin, Shi_Xiaohua_BeihangU, Thomas Steiner, tomayac, xfq_, xiaoqian, Xiaoshua Shi, xueyuan, Zhao Lei
Shi Ling, Wei Ding

Meeting minutes

<Dingwei> thank you @tidoust

Dingwei: welcome
… is there any objections to recording this session?


Dingwei: we have 2 presentations
… and about 10 minutes Q&A
… health rules: https://www.w3.org/2023/09/TPAC/health.html
… slides are in w3c/tpac2023-breakouts#22 (comment)
… my colleague Ling Shi will present

ling: thanks for joining us
… my topic is 'web for apps'
… when preparing this topic, I read the 7 Predictions For The Web

… James Bankoski : 85% of All Apps use some level of web tech
… Meituan is famous in China
… the miniapp and native app versions have almost the same interface
… let's review the history of building apps using frameworks
… phonegap, cordorva etc.
… frameworks like react-native, weex, and Hippy are system UI frameworks
… there are also self-rendering frameworks like Flutter

ling: let's look at the web dev stack using the front-end perspective
… application framework can only use limited DOM APIs
… there's still no good optimization methods for application development
… WASM is better, but rarely used
… currently mainly used for compiled code like C++
… JS continue to be the language for web dev
… here's an ideal Web Application Development Model we would like to discuss
… even the system API calls are based on wasm
… of course, there are still many problems we need to solve to achieve such a model
… some of them are already being discussed
… how to compile JS to wasm?
… there are still many problems that need to be studied and discussed

Dingwei: we have the next speaker
… who will introduce the solution
… and present online

Shi_Xiaohua_BeihangU: thanks Dingwei
… I'm Shi_Xiaohua_BeihangU from Beihang University
… I'll present JWST—— A JavaScript-to- WebAssembly Static Translator
… we think that ait is useful to build a static compiler to compile from js to wasm

[show code example]

Shi_Xiaohua_BeihangU: the example is simple, some compilers can statically analyze the code
… in JS different types could be operating together
… no compilers can know each type and generate the appropriate type

[Demonstration of dynamic types]

[Demonstration of dynamic loading]

Shi_Xiaohua_BeihangU: for static compiler, the JS features of dynamic loading are key challenges
… now I would like to introduce JWST
… it is a static compiler for compiling JavaScript to WASM and native code
… it uses QuickJS bytecode as input, and outputs LLVM IR
… it got the similar pass rate as QuickJS for ECMA test262
… JWST is about 30% and 50% faster than node.js when running SunSpider

[show WASM Sample Code]

[WASM vs. Java Bytecode]

Shi_Xiaohua_BeihangU: wasm and Java bytecode are different
… Java bytecode is designed for expressing Java programs
… because they have almost the same semantic expression capability
… WASM is designed for working with JavaScript
… For instance, WASM is not a dynamically typed language
… WASM does not have a GC, etc.

[Show JWST Compilation Process]

Shi_Xiaohua_BeihangU: all wasm code can be replaced with native code by the compiler

[Compilation process demonstration]

Shi_Xiaohua_BeihangU: on the left side it's JS code
… the right side is QuickJS Bytecode
… to solve the problem of dynamic types
… JWST reuses the JSValue data structure of QuickJS
… before each operation the type of the value must be determined

[Demonstration of Dynamic Type Compilation Process]

Shi_Xiaohua_BeihangU: here we demonstrate the dynamic type compilation process
… if we already know a and b are integers there's no need to generate any @@ at all

[Type Profiling: Type information fusion]

[Type Profiling: Example]

Shi_Xiaohua_BeihangU: the type information is shown on the figure

[Mixed running mode of compiled code and QuickJS Interpreter]

[Speculative Optimizations of Type Fixing]

Shi_Xiaohua_BeihangU: here's a more complicated mechanics for type fixing
… determine whether the types are correct or not

[GC Support]

Shi_Xiaohua_BeihangU: the GC for QuickJS is used in JWST by default

[Exception Support]

Shi_Xiaohua_BeihangU: there is no exception table as we know in Java
… we don't use exception tables

[async/await Support]

Shi_Xiaohua_BeihangU: when the program is executed to await, the function foo() pauses the execution
… after the main function has been completed, the remaining code of the function foo() will be executed

[Asynchronous in mixed running mode]

[Typical Optimizations of JWST]

Shi_Xiaohua_BeihangU: type fixing has been introduced in the previous section
… and inline cache

[Inline Cache]

Shi_Xiaohua_BeihangU: managed JS runtimes like V8 implement optimization called inline cache
… it adds a cache area for object searching

[Array layout optimization]

[Global Function Caching]

Shi_Xiaohua_BeihangU: *Most* JS functions do not change their names after definitions
… the compiler resolves the definitions at compile time, so the generated code calls into the function directly without going through dispatch() or other wrappers

[Performance Evaluation of the compiler]

Shi_Xiaohua_BeihangU: the compiler has a consistent pass rate compared to QuickJS
… wrt test262
… in terms of built-ins, 204 test cases related to Atomic require multithreading support, while WASM runtime does not support multithreading currently
… 1 test cases related to floating-point precision

[Floating-Point Rounding modes]

Shi_Xiaohua_BeihangU: wasm only supports round-to-nearest
… unlike native
… we ran JWST on SunSpider
… its total performance is ~50% faster than Node.js, for the first execution
… the running time on Node.js include all the initialization

[Shi_Xiaohua_BeihangU introduces SunSpider@wasmer, Kirin 990E]

[SunSpider@wasmer, Intel i7]

[Show React Native Samples (TTI, 0.1x play)]

Shi_Xiaohua_BeihangU: the examples are V8 with cache and V8 without cache
… significantly faster than V8 without cache

[Comparing JWST (WASM), JWST Native, V8-Cache, and V8-No-Cache]

[Evaluate the Start-up JS Scripts of a RN APP]

Shi_Xiaohua_BeihangU: when we analyze the overhead on the startup script of a release-mode RN app

<Dingwei> the presentation will end at 10:10 followed by Q/A

<Dingwei> the q is open, please do q+ if you like to speak

Shi_Xiaohua_BeihangU: JWST-WASM is ~10.5x and ~126% faster than V8 without code cache and with code cache, respectively

[React Native Samples: Compilation Time and Code Size]

Shi_Xiaohua_BeihangU: the JS Release version is 1.3MB
… JWST (JSBundle => LLVM IR) compilation time is 640s
… on Intel Core i9-12900KF 3.20GHz with 32G Memory

[Expectations for WASM]

Shi_Xiaohua_BeihangU: 1. DLL Support
… 2. GC Support
… 3. DOM Support
… 4. Furthermore, is it possible to use WASM as the fundamental language/bytecode for web applications?
… that means running JavaScript and all other languages on WASM runtimes

Dingwei: thanks for sharing
… before going to the Q&A session, I want to reintroduce the goal of the session
… we would like to solicit comments

tomayac: thanks for the presentation

tomayac: regarding the development experience, I was wondering if you have compared it to AssemblyScript

<tomayac> How is the developer experience compared to AssemblyScript? https://www.assemblyscript.org/

<xiaoqian> Shi_Xiaohua_BeihangU ^^

tomayac: second question, where can we find out more?

<tomayac> Where can we find out more? Is there a link to a repository?

tomayac: I tried searching for them, but didn't find any information

Shi_Xiaohua_BeihangU: the challenge for a static compiler is bigger
… we will handle all the dynamic type features
… for this part it is more difficult than AssemblyScript
… we build this with Huawei

Dingwei: we will consider to open source this and it is still in the process

daniel: how is the point of view for a developer?
… if something goes wrong and do some tracing, is that supported through the whole process?

ling: this is a good question
… we think debugging should be supported
… this is an attempt to compiling JS to wasm
… there are a lot of problems need solving
… debugging is a problem that needs to be solved later

<Zakim> tomayac, you wanted to ask if they have looked at WebAssembly Garbage Collection (WasmGC)

tomayac: Chrome just sent an intent to ship WebAssembly Garbage Collection (WasmGC)
… have you looked at it?

Shi_Xiaohua_BeihangU: regarding GC, we just use the GC of QuickJS
… if wasm runtime has GC, I think we will use it

Dingwei: any other questions?
… especially from the wasm WG

Dingwei: we will continue to discuss on github
… on this page: w3c/tpac2023-breakouts#22
… we want to collect more thoughts and discuss together

<gaochun> Is SIMD supported by JWST?

Shi_Xiaohua_BeihangU: we have a compiler toolchain
… if the LLVM compiler supports SIMD, we will support SIMD

Dingwei: any more questions?

Minutes manually created (not a transcript), formatted by scribe.perl version 221 (Fri Jul 21 14:01:30 2023 UTC).


Succeeded: s/hippy/Hippy

Succeeded: s/startup screen/startup script

Succeeded: s/startup script/startup script of a release-mode RN app

Succeeded: s/will open source this/ will consider to open source this and it is still in the process

Succeeded: s/supportsSIMD/supports SIMD

Succeeded: s/if LLVM/if the LLVM

Maybe present: daniel, ling

All speakers: daniel, Dingwei, ling, Shi_Xiaohua_BeihangU, tomayac

Active on IRC: angel_, ChrisLorenzo, christianliebel, chunming, dape, Dingwei, gaochun, JaseW, martin_alvarez, Roy, shanhuaqi, Shi_Xiaohua_BeihangU, tidoust, tomayac, xfq, xfq_, xiaoqian, xueyuan