吃饭的时候看到说WebAssembly成为W3C标准，于是好奇查了查相关文章

Posted 2021-03-21 ashiamd

自己看第一篇文章的时候，中间遇到一些词或多或少有兴趣又去多看了几篇文章，insteresting。

大概说下自己的理解，希望无意间看到这篇没啥东西的文章的人能指出错误，学学东西真有意思，哈哈。

 

WebAssembly大致就是用C/C++之类的更低级的语言编写代码后生成.wasm文件，这个文件也和js一样能够在浏览器被解释执行。

至于为什么WebAssembly有优势，因为其生成的.wasm更接近机器码，浏览器解释执行更快。

而.wasm类似C的.o和java的.class文件，不过其更算是IR和机器码之间的，比传统的中间代码文件更接近机器码（大概）

其编译、优化等工作已经大多由LLVM预先执行了，不像.js还要在浏览器上进行更多的编译、优化工作。

（LLVM类似C语言编译、链接用到的gcc，不过这个更方面更优异，大致就是编译原理的词法、语法、语义、中间代码等工作优化很多，所以快，具体细节喜欢编译器深入的人可以再去多查查）

 

下面文章里JIT会涉及到编译器和解释器，编译器就是把代码加工成中间代码（更靠近机器码，之后可以交给解释器解释成机器码），解释器就是将代码解释成计算机真正能运行的机器码

我们平时写代码就是为了代码能够运行，而我们可以想到，可以先代码->编译器编译成中间代码->解释器解释成机器码（当然不是所有语言都一定有编译器编译成中间代码那一步骤），

而JIT就是在编译器把代码编译成中间代码生成中间代码后，解释器解释期间，把经常被用到的部分（比如经常调用某个方法、函数之类的，或者循环体内的操作）提取出来先转换成运行环境下的机器可识别的机器码，这样代码解释的时候遇到相同部分就不用解释了，直接就是可以执行的机器码。

 

静态编译就是 把代码中间用到的库函数之类的（外部引用的代码）也加入中间代码（可执行代码），这样中间每个用到外部代码（比如C语言include的c文件之类的）在中间代码中都会表现成直接复制一份进去，好像内敛函数一样。

动态编译就是 不把外部引用的代码直接加到中间代码里，但是留个引用的标志啥的，到时候中间代码会在遇到标志时从外部代码中找对应的代码。

比如 执行 function () { 外部代码；a=1; } 静态编译后， function() { 一大堆引用的代码;a=1 }

动态编译可能就是 function(){外部代码;a=1 } -> function{这里引用了外部代码，请到XXX动态链接库去调用 ; a=1}

看上去静态编译好像编译比较慢，但是这样子后面解释花的时间就比动态编译少了，毕竟该用到的代码都整在一起了，而动态编译生成的中间代码解释时还需要各种调用外部链接库的东西。

 

javascript的V8引擎C++写的，就是对js在浏览器的编译进行了优化，比如使用隐藏类等神奇的东西，使得编译快很多，然后解释成机器码也用到了前面提到的JIT，这样整个从代码到机器码的时间就少了很多。

 

AST抽象语法树，就是编译原理的语法分析生成树了，JS可以用类似语法分析树伪代码的形式转换成js代码，也可以把js代码转换成其被编译器编译时的中间产物语法树。

AST用的牛逼就可能能够从语法等更底层的地方就“优化了“代码，比如原本一个类转换成机器码是20行代码，可能你AST设计得好，使得这个类平均转换下来只要15-17行代码。

 

 

 [几张图让你看懂WebAssembly]
https://www.jianshu.com/p/bff8aa23fe4d 

 

 [什么是JIT，写的很好]
https://www.cnblogs.com/dzhou/p/9549839.html

 

 [关于编译器和解释器]
https://blog.csdn.net/qq_36627886/article/details/80402959

 

 [静态编译和动态编译有何不同]
https://zhidao.baidu.com/question/235110129.html 

 

 [javascript的V8引擎]
https://www.jianshu.com/p/81f6ded64ab2

 

 [AST抽象语法树-最基础的Javascript重点知识，99%人不知道]
https://segmentfault.com/a/1190000016231512?utm_source=tag-newest

 

 [Compiler Theory(编译原理)、词法/语法/AST/中间代码优化在Webshell检测上的应用]
https://www.cnblogs.com/LittleHann/p/4754446.html

 

 [llvm入门篇]
https://www.codercto.com/a/41721.html