Webassembly learning - dynamic linking

One 、 Dynamic link technology

Have done C/C++ Programming developers know , Dynamic library technology is the standard configuration of almost large programs today . Dynamic library technology , One of the most basic problems involved is dynamic loading and dynamic linking technology . Make a more basic intermediate language ,WebAssembly A similar dynamic link technology must be provided . And c/c++ Dynamic link technology in the dynamic library , The import and export of modules allow N Instantiate modules to share functions 、 Linear memory 、 Tables and constants .（ stay Iinux in , Dynamic library dynamic link uses dlopen function ）. Also in WASM Enable dynamic linking for load and dynamic runtime in , In particular, some non local states can be shared through dynamic links . therefore , Yes WebAssembly The relevant development and compilation tools of need to support similar functions .
Generally speaking ,WebAssembly The running environment needs to be provided by the host , So the hosting environment must provide this method of dynamically importing instantiated modules .

Two 、WASM How to load dynamically

Let's start with a piece of code ：

int test1(){ 
   return 100; 
}
int test2(){ 
   return 200; 
}
#include <stdio.h>

int test1(); 
int test2();
int main() { 
   int result = test1() + test2(); 
   return result; 
}

Compile with the relevant tool commands ：

emcc test1.c test2.c main.c -s SIDE_MODULE=1 -o maintest.wasm

And then use WasmToWat This tool （https://webassembly.github.io/wabt/demo/wasm2wat/） To convert to text ：

(module 
   (type $t0 (func (result i32))) (type $t1 (func)) 
   (type $t2 (func (param i32))) (type $t3 (func (param i32 i32) (result i32))) 
   (import "env" "stackSave" (func $env.stackSave (type $t0))) 
   (import "env" "stackRestore" (func $env.stackRestore (type $t2))) 
   (import "env" "__memory_base" (global $env.__memory_base i32)) 
   (import "env" "__table_base" (global $env.__table_base i32)) 
   (import "env" "memory" (memory $env.memory 0)) 
   (import "env" "table" (table $env.table 0 funcref)) 
   (func $f2 (type $t1) 
      (call $__wasm_apply_relocs)
   )
   (func $__wasm_apply_relocs (export "__wasm_apply_relocs") (type $t1)) 
   (func $test1 (export "test1") (type $t0) (result i32) 
      (local $l0 i32) 
      (local.set $l0 
         (i32.const 100)
      )
      (return 
         (local.get $l0)
      )
   )
   (func $test2 (export "test2") (type $t0) (result i32) 
      (local $l0 i32) 
      (local.set $l0 
         (i32.const 200)) 
      (return 
         (local.get $l0)
      )
   ) 
   (func $__original_main 
      (export "__original_main") 
      (type $t0) 
      (result i32) 
      (local $l0 i32) 
      (local $l1 i32) 
      (local $l2 i32) 
      (local $l3 i32) 
      (local $l4 i32) 
      (local $l5 i32) 
      (local $l6 i32) 
      (local $l7 i32) 
      (local $l8 i32) 
      (local $l9 i32) 
      (local.set $l0(call $env.stackSave))
      (local.set $l1 (i32.const 16))
      (local.set $l2 (i32.sub (local.get $l0) (local.get $l1)))
      (call $env.stackRestore (local.get $l2) ) (local.set $l3(i32.const 0)) 
      (i32.store offset=12 (local.get $l2) (local.get $l3)) 
      (local.set $l4 (call $test1)) 
      (local.set $l5 (call $test2)) 
      (local.set $l6 (i32.add (local.get $l4) (local.get $l5))) 
      (i32.store offset=8 (local.get $l2) (local.get $l6)) 
      (local.set $l7 (i32.load offset=8 (local.get $l2))) 
      (local.set $l8 (i32.const 16)) 
      (local.set $l9 (i32.add (local.get $l2) (local.get $l8))) 
      (call $env.stackRestore (local.get $l9)) (return(local.get $l7))
   )
   (func $main 
      (export "main") 
      (type $t3) 
      (param $p0 i32) 
      (param $p1 i32) 
      (result i32) 
      (local $l2 i32) 
      (local.set $l2 
      (call $__original_main)) 
      (return (local.get $l2))
   ) 
   (func $__post_instantiate (export "__post_instantiate") (type $t1) (call $f2)) 
   (global $__dso_handle (export "__dso_handle") i32 (i32.const 0))
)

After the above actions ,WebAssembly It will generate marks in both import and export directions, i.e. functions imp And function exp. If in practical application libc Will increase the import of linear memory and related variables . stay C and c++ The application of , As mentioned earlier , Use dloepn,dlsym,dlopen A new module will be compiled and instantiated , Store the compiled instance in the host environment table , And return the index to the caller .dlsym Will get this index , Take the instance from the table , Search for instance related exports , Attach the found function to the function table and the return table to Caller The index of the element .
It should be noted that ,WebAssembly in C The representation of function pointer is the index of function table , Therefore, the above scheme is similar to dlsym The return value of the function pointer is exactly the same .
In fact, we all know , Can you provide a standard ABI Interface standards , That's what matters , unfortunately , Currently in C/C++ Is still unable to do .

But in JS Using this routine in, you can do the following ：

<meta charset="UTF-8">
   
      <script>
         var wasmMemory = new WebAssembly.Memory({'initial': 256,'maximum': 65536}); 
         const importObj = {
            env: {
               stackSave: n => 2, stackRestore: n => 3, //abortStackOverflow: () => {
                  throw new Error('overflow'); 
               }, 
               table: new WebAssembly.Table({ 
                  initial: 0, maximum: 65536, element: 'anyfunc' 
               }), __table_base: 0,
               memory: wasmMemory, __memory_base: 256 
            } 
         };
         fetch("maintest.wasm") .then(bytes => bytes.arrayBuffer()) .then(
            module => WebAssembly.instantiate(module, importObj)
         )
         .then(finalcode => {        
            console.log(finalcode);     
            console.log(WebAssembly.Module.imports(finalcode.module)); 
            console.log(finalcode.instance.exports.test1());    
            console.log(finalcode.instance.exports.test2());   
            console.log(finalcode.instance.exports.main()); 
         });
      </script>
   

The routines used in this article are mango document related routines ：
https://www.imangodoc.com/29060.html

3、 ... and 、、 summary

webassembly The current efficiency is very close to that of locally running code , some 3D Tests of software and large-scale games have shown that , Compared with the traditional Javascript Has an overwhelming advantage . In fact, a careful analysis shows that , The weak language that is still interpretive has to sacrifice efficiency and speed ,wasm It's just that a shotgun has dropped . But then again , This flower gun fell well , Let developers understand , There is nothing that cannot be used at a higher level through the integration of underlying technologies .
Maybe it will be the age of hodgepodge , There is no such thing as "hello" or "bad" about him , It's just a habit , statements of a school , Less than one phase .