JavaScript 运行机制
2022-03-18 14:01:58
登录查看完整内容
简述 JavaScript 运行流程和执行机制
举报
猜你喜欢
大纲/内容
语言 -> 编译成二进制机器码 -> ready to run
编译器来编译，系统执行
编译型
语言 -> ready to run -> 解释器解析为机器码并执行
解释器解释并执行
解释型
Google Chrome
Node.js
V8引擎
Firefox
SpiderMonkey
Microsoft Edge（后面换成chrome内核，所以也变成V8引擎了。）
Chakra
Safari
JavaScriptCore
JavaScript引擎相当于解释型语言的解释器
JavaScript引擎
JavaScript 引擎的核心就是实现 ECMAScript 标准
一些最新的 ECMAScript 提案，到达 stage3 或 stage4 后，就会被 JavaScript 引擎实现。例如 v8 会把它的一些对语言标准的实现更新在它的博客上：https://v8.dev/
EcmaScript
各大浏览器
运行时环境
JavaScript
最核心的进程，负责管理各个标签页的创建和销毁、页面显示和功能（前进，后退，收藏等）、网络资源的管理，下载等
浏览器进程
负责每个第三方插件的使用，每个第三方插件使用时候都会创建一个对应的进程、这可以避免第三方插件crash影响整个浏览器、也方便使用沙盒模型隔离插件进程，提高浏览器稳定性
插件进程
负责3D绘制和硬件加速
GPU进程
浏览器会为每个窗口分配一个渲染进程、也就是我们常说的浏览器内核
我们常说的浏览器内核，比如 webkit 内核，就是浏览器的渲染进程
浏览器内核是多线程的
渲染进程
chrome是一个多进程的架构
Chrome
GUI 渲染线程
定时触发器线程
当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可以是当前执行的代码块如定时任务、也可来自浏览器内核的其他线程如鼠标点击、AJAX 异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理
事件触发线程
XMLHttpRequest 在连接后是通过浏览器新开一个线程请求， 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件放到 JavaScript 引擎的处理队列中等待处理
异步http请求线程
解释和执行 JavaScript 代码。
JavaScript 是一种单线程编程语言，所以在浏览器内核中只有一个 JavaScript 引擎线程。
但是，在 JavaScript 的一个运行环境中，因为可能有多个渲染进程，所以可能有多个 JavaScript 引擎线程。
代码实际执行的地方
异步事件的回调会被加入事件队列
执行栈
当执行栈为空时，会依次把微任务的回调加入到执行栈中，直到微任务队列为空
微任务队列
当执行栈和微任务队列都为空时，会依次把宏任务的回调加入到执行栈中，直到宏任务队列为空
宏任务队列
事件队列
事件循环
JavaScript 引擎线程
webkit
词法分析就是将字符序列转换为标记（token）序列的过程
所谓 token ，就是源文件中不可再进一步分割的一串字符，类似于英语中单词，或汉语中的词。
词法分析
语法分析将这些 token 根据语法规则转换为 AST
在生成 AST 的同时，还会为代码生成执行上下文，在解析期间，所有函数体中声明的变量和函数参数，都被放进作用域中
语法分析
负责将 JavaScript 代码转换成 AST 抽象语法树。
解析器（Parser）
字节码（byte code）是一种包含执行程序、由一序列 OP代码(操作码)/数据对 组成的二进制文件。字节码是一种中间码，它比机器码更抽象，需要直译器转译后才能成为机器码的中间代码。
字节码
负责将 AST 转换为字节码，并收集编译器需要的优化编译信息。
解释器（Ignition）
机器码(machine code)，学名机器语言指令，有时也被称为原生码（Native Code），是电脑的 CPU 可直接解读的数据(计算机只认识0和1)
机器码
利用解释器收集到的信息，将字节码转换为优化的机器码。
编译器（TurboFan）
同时采用了解释执行和编译执行这两种方式，这种混合使用的方式就称为 JIT (即时编译)，
在解释器执行字节码的过程中，如果发现有热点代码，比如一段代码被重复执行多次，这种就称为热点代码，那么后台的编译器就会把该段热点的字节码编译为高效的机器码，然后当再次执行这段被优化的代码时，只需要执行编译后的机器码就可以了，这样就大大提升了代码的执行效率。
JIT (即时编译)
V8
编程语言
0 条评论
回复 删除
下一页
职业：web前端工程师
作者其他创作：
vue异步更新流程图
263 2022-10-08
vue组件化流程
1005 2022-04-15
vue异步更新
333 2022-04-15
vue初始化
547 2022-04-15
JavaScript 运行机制
279 2022-03-21
webpack
257 2022-03-21