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

目录

 

学前案例：

1 JS两种运行方式

同步

异步

同步任务

异步任务

异步任务存放位置

异步任务常见

2 JS执行机制（重要）

文字版流程

事件循环（重要）

图片版流程

3 练习题

---

学前案例：

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

1 JS两种运行方式

同步

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

异步

当前进程外部的实体可以触发代码执行

大白话，做一件事情的同时，可以去做别的事情；例如做饭异步，烧水的同时，可以利用间隙去切菜、炒菜

同步任务

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

异步任务

异步任务存放位置

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

异步任务常见

1 普通事件，如click、resize等

2 资源加载，如load、error等

3 定时器，包括setInterval、setTimeout等

4 ajax（网络模块）

2 JS执行机制（重要）

文字版流程

1. 首先判断程序中的同步任务、以及异步任务；
2. 同步任务会在执行栈中先执行
3. 异步任务则会经浏览器处理后，放入任务队列中
4. 当同步任务完全执行完后，执行栈会查询任务队列，取出任务队列中罗列好的异步任务来执行
5. 重复第4步直到异步也完全执行完毕

事件循环（重要）

执行栈不断从任务队列中获取任务、执行任务、再获取任务、再执行的过程，称为事件循环(event loop)

图片版流程

3 练习题

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