浏览器如何执行js代码(编译步骤)

2,197 阅读1分钟

经历了以下几步:

  • 1: js代码 经历 词法分析,成为token
  • 2: 然后经过语法分析,将token转换成AST(抽象语法树)
  • 3: 用解释器根据AST,生成字节码
  • 4: 使用JIT即时编译技术,将字节码转成机器码,然后计算机就可以识别执行了。

V8 的优化

编译过程很复杂,V8做了很多来提示浏览器性能,比如:

1:脚本流:下载的同事就已经在解析,节省时间。

2:对代码打warm hot 标签:js引擎有个监视器对代码进行监控,如果代码执行多次,会将编译结果进行缓存,下次再使用会直接执行,无需编译。

3:内联:如果一个函数内部调用其他函数,那么编译器会直接函数中将要执行的内容放到主函数里。

function add(a, b) {
    return a + b;
}
function calculateTwoPlusFive() {
    var sum;
    for (var i = 0; i <= 1000000000; i++) {
        sum =add(2+5);
    }
}
// 会被编译成:
function add(a, b) {
    return a + b;
}
function calculateTwoPlusFive() {
    var sum;
    for (var i = 0; i <= 1000000000; i++) {
        sum =2+5;
    }
}

最后扩展一下babel工作流

比如babel要将ess6转成es5,其也是根据AST来进行转换的:

  • 先将ES6代码编译为AST
  • 然后将该AST转换为ES5的AST
  • 由ES5的AST还原出ES5代码

参考文章:这里