JS-线程、事件循环、任务队列
JS 是单线程的,但是却能执行异步任务,这主要是因为 JS 中存在事件循环(Event Loop)和任务队列(Task Queue)。
事件循环:
JS 会创建一个类似于 while (true) 的循环,每执行一次循环体的过程称之为 Tick。每次 Tick 的过程就是查看是否有待处理事件,如果有则取出相关事件及回调函数放入执行栈中由主线程执行。待处理的事件会存储在一个任务队列中,也就是每次 Tick 会查看任务队列中是否有需要执行的任务。
任务队列:
异步操作会将相关回调添加到任务队列中。而不同的异步操作添加到任务队列的时机也不同,如 onclick, setTimeout, ajax 处理的方式都不同,这些异步操作是由浏览器内核的 webcore 来执行的,webcore 包含上图中的 3 种 webAPI,分别是 DOM Binding、network、timer 模块。
- onclick 由浏览器内核的 DOM Binding 模块来处理,当事件触发的时候,回调函数会立即添加到任务队列中。
- setTimeout 会由浏览器内核的 timer 模块来进行延时处理,当时间到达的时候,才会将回调函数添加到任务队列中。
- ajax 则会由浏览器内核的 network 模块来处理,在网络请求完成返回之后,才将回调添加到任务队列中。
主线程
JS 只有一个线程,称之为主线程。而事件循环是主线程中执行栈里的代码执行完毕之后,才开始执行的。所以,主线程中要执行的代码时间过长,会阻塞事件循环的执行,也就会阻塞异步操作的执行。只有当主线程中执行栈为空的时候(即同步代码执行完后),才会进行事件循环来观察要执行的事件回调,当事件循环检测到任务队列中有事件就取出相关回调放入执行栈中由主线程执行。
- (所有代码都主线程里跑,主线程没代码了就在任务队列中读回调函数(异步操作)回到主线程里跑)
- 所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
- 主线程之外,还存在一个 "任务队列"(task queue)。只要异步任务有了运行结果,就在 "任务队列" 之中放置一个事件。
- 一旦 "执行栈" 中的所有同步任务执行完毕,系统就会读取 "任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
主线程不断重复上面的第三步。("任务队列" 是一个先进先出的数据结构,排在前面的事件,优先被主线程读取。)
例1:
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function (){}; // 这两个异步方法就会在 ajax 完成后推入任务队列,再由主线程执行
req.onerror = function (){};
req.send();例2:
setTimeout(function(){
// 如果有大量的操作,可能会阻塞 UI 等,则可以使用 setTimeout 让这些操作在主线程把更重要的代码执行完毕之后,再来执行这里的操作。从而提高浏览器的性能。
},0);// 设置为 0,也会有个最小间隔值,也会在主线程中的代码运行完成后,由事件循环从任务队列将回调添加到执行栈中才执行例3:
// 事件循环测试。执行结果是 2-3-4-1,1在最后输出,说明事件循环是所有同步代码执行完后才开始执行的。'use strict';
setTimeout(function() {
console.log(1);
}, 0);console.log(2);
let end = Date.now() + 1000*5;
while (Date.now() < end) {
}console.log(3);
end = Date.now() + 1000*5;
while (Date.now() < end) {
}console.log(4);
最新文章
- Atom使用纪要
- C#中浮点数依IEEE-754标准转二进制串 (MODBUS 浮点数转换)
- 解决AndroidStudio升级版本后恢复初始化设置的问题
- 1057. Stack (30)
- Windows Server 2008系统如何取消登录时要按Ctrl+Alt+Delete组合键
- Android 中断线程的处理
- eclipse安装插件的各种方法
- VS2008下编译boost_1_47_0
- NOIP 2001 提高组 题解
- 10.javaweb核心标签库详解
- 【打印】windows打印控件,Lodop.js介绍
- hdoj:2053
- kubernetes namespace Terminating
- mongodb分享(二)
- linux:apt-get 如何安装,查询,解除依赖包
- springboot-day01-引入如何读取配置文件以及helloWorld
- Android布局分析工具HierarchyView的使用方法
- Linux 后台进程管理和就几个“Ctrl+”命令 【转载】
- 安装EKL
- PHP中var_dump
热门文章
- python基础-2 编码转换 pycharm 配置 运算符 基本数据类型int str list tupple dict for循环 enumerate序列方法 range和xrange
- java项目中,针对缓存问题的处理方式【接口中的处理方式】
- SpringBoot(六) -- SpringBoot错误处理机制
- HDFS数据流——写数据流程
- 微信小程序 Mustache语法详解
- [HNOI2016]树(可持久化线段树+树上倍增)
- 让网站动起来!12款优秀的 jQuery 动画
- 生日蛋糕 (poj1190) (dfs剪枝)
- Python 数据分析中金融数据的来源库和简单操作
- 十大热门AI芯片