JS 执行机制

约 894 字大约 3 分钟

2024-10-02

经典面试题

console.log(1)
setTimeout(() => {
	console.log(2)
}, 1000)
console.log(3)
// 问:输出的顺序是什么
// 答1, 3, 2

延时了1秒钟, 所以是132, 合理.

console.log(1)
setTimeout(() => {
    console.log(2)
}, 0)
console.log(3)
// 问:输出的顺序是什么
// 答1, 3, 2

为什么延时0秒, 不应该是立即执行么, 怎么还是132?

JavaScript语言的一大特点就是单线程, 也就是说, 同一时间只能做一件事.

注

这是因为JavaScript这门脚本语言诞生的使命所致的.

JavaScript是为处理页面中用户的交互, 以及操作DOM而诞生的.比如我们对某个DOM元素进行添加和删除操作, 不能同时进行.应该先添加, 之后再删除.

单线程就意味着, 所有任务需要排队, 前一个任务结束, 才会执行后一个任务.这样所导致的问题是:

如果JS执行的时间过长, 就会造成页面渲染不连贯, 导致页面渲染加载堵塞感.

为了解决这个问题, 利用多核CPU的算力, Html5提出Web Worker标准, 运行JavaScript脚本创建多个线程.于是, JS中出现了同步和异步.

前一个任务结束后再执行后一个任务, 程序的执行顺序与任务的排队顺序是一致的, 同步的. 举个例子:

洗米花费5分钟, 煮饭花费40分钟, 饭熟了才去切菜花费5分钟, 炒菜花费30分钟, 一共花费了1个小时30分钟. 看不懂? 上图!

你在做一件事情时, 因为这件事情会花费很长时间, 在做这件事的同时, 可以去处理其他事情. 举个例子:

洗米花费5分钟, 煮饭花费40小时, 饭还有35分钟熟的时候, 去切菜花费5分钟, 炒菜花费30分钟, 这时饭刚好熟了, 一共花费了45个小时. 看不懂? 上图!

同步和异步本质就是执行顺序的不同.

同步任务都是在主线程上执行, 形成一个执行栈

JS 的异步是通过回调函数实现的.

一般而言, 异步任务有以下3种类型.

异步任务相关添加到任务队列中(任务队列也称为消息队列).

由于主线程不断的重复获取任务, 执行任务, 再获取任务, 再执行, 所以这种机制被称为事件循环(event loop).

版权归属：Erhai_lake