JS 单线程

Posted 2021-10-22 justsmile2

js单线程阻塞实例
setTimeout(function () { while (true) { } }, 1000);
setTimeout(function () { alert(‘end 2‘); }, 2000);
setTimeout(function () { alert(‘end 1‘); }, 100);
alert(‘end‘);
结果是弹出’end’、’end 1’，然后浏览器假死，就是不弹出‘end 2’。

 

js单线程重点：
JS 是单线程的，但是却能执行异步任务，
这主要是因为 JS 中存在事件循环（Event Loop）和任务队列（Task Queue）。

事件循环：
JS 会创建一个类似于 while (true) 的循环，
每执行一次循环体的过程称之为 Tick。
每次 Tick 的过程就是查看是否有待处理事件，
如果有则取出相关事件及回调函数放入执行栈中由主线程执行。
待处理的事件会存储在一个任务队列中，
也就是每次 Tick 会查看任务队列中是否有需要执行的任务。

任务队列：
异步操作会将相关回调添加到任务队列中。
而不同的异步操作添加到任务队列的时机也不同，如 onclick, setTimeout, ajax 处理的方式都不同，
这些异步操作是由浏览器内核的 webcore 来执行的。
onclick 由浏览器内核的 DOM Binding 模块来处理，
当事件触发的时候，回调函数会立即添加到任务队列中。
setTimeout 会由浏览器内核的 timer 模块来进行延时处理，
当时间到达的时候，才会将回调函数添加到任务队列中。
ajax 则会由浏览器内核的 network 模块来处理，
在网络请求完成返回之后，才将回调添加到任务队列中。

主线程：
JS 只有一个线程，称之为主线程。
而事件循环是主线程中执行栈里的代码执行完毕之后，才开始执行的。
所以，主线程中要执行的代码时间过长，会阻塞事件循环的执行，也就会阻塞异步操作的执行。
只有当主线程中执行栈为空的时候（即同步代码执行完后），才会进行事件循环来观察要执行的事件回调，
当事件循环检测到任务队列中有事件就取出相关回调放入执行栈中由主线程执行。