【JS重点知识04】JS执行机制（重点面试题）

程序员微木

已于 2024-06-23 12:18:33 修改

阅读量492

点赞数 11

分类专栏： JS重点文章标签： javascript 前端 ecmascript

于 2024-06-07 15:49:33 首次发布

本文链接：https://blog.csdn.net/qq_67896626/article/details/139528038

版权

JS重点专栏收录该内容

18 篇文章 0 订阅

订阅专栏

学前案例：

console.log(111);
setTimeout(function () {
   console.log(222);
}, 1000)
console.log(333);
//输出结果：1111 333 222
console.log(111);
setTimeout(function () {
   console.log(222);
}, 0)
console.log(333);
//输出结果：111 333 222

一：JS两种运行方式

1 同步代码

每条指令都会严格按照他们出现的顺序来执行，而每条指令执行后也能立即获得存储在系统本地（如寄存器或系统内存）的信息

实际上浏览器是按照我们书写代码的顺序一行一行地执行程序的。浏览器会等待代码的解析和工作，在上一行完成后才会执行下一行。这样做很有必要，因为每一行新的代码都是建立在前面代码基础之上的

这使得它称为一个同步程序

同步代码逐行执行，需原地等待结果后，才继续向下执行

2异步代码

异步编程技术使你的程序可以在执行一个可能长期运行的任务，同时继续对其他事件做出反应而不必等待任务完成。与此同时，你的程序也将在任务完成后显示结果

异步代码调用后耗时，不阻塞代码继续执行(不必原地等待)，在将来完成解析后，触发一个回调函数

3 同步任务

同步任务都在主线程上执行，形成一个执行栈（主线程）

4 异步任务

异步任务存放位置

异步任务会经浏览器异步进程处理，最终添加到任务队列中（也称为消息队列）

异步任务常见

1 普通事件，如click、resize、input等

2 资源加载事件，如load、error等

3 定时器，包括setInterval、setTimeout等

4 ajax（网络模块）

二：JS执行机制（重要）

1 JS执行机制流程汇总

首先判断程序中存在任务类型即同步任务、异步任务；
同步任务会在执行栈中先执行
异步任务则会经浏览器处理后，放入任务队列中
当同步任务完全执行完后，执行栈会查询任务队列，取出任务队列中罗列好的异步任务来执行
重复第4步直到异步也完全执行完毕（事件循环）

2 事件循环（EventLoop）（重要）

概念：JS有一个基于事件循环的并发模型，事件循环负责执行代码、收集和处理事件以及执行任务队列中的子任务。

即：执行代码和收集异步任务的模型，在执行栈空闲时，不断从任务队列中获取任务、执行任务、再获取任务、再执行的过程，称为事件循环(eventLoop)

为什么设计事件循环，JS是一门单线程语言(某一刻只能执行一行代码)，为了让耗时代码不阻塞其他代码运行，设计了事件循环模型

3 图片版流程

4 练习题

console.log(111);
setTimeout(function () {
  console.log(222);
}, 1000)
console.log(333);
答案：111 333 222
console.log(111)以及console.log(333)两条指令属于同步任务，所以会在执行栈中先执行；
而延时函数属于异步任务，则会在任务队列中等待；当两个同步任务执行完毕后，才会执行延时
函数中的内容