JavaScript Event Loop相关原理解析


Posted in Javascript onJune 10, 2020

1.单线程模型

单线程模型指的是,JavaScript只能在一个线程上运行,也就是说只能同时指向一个任务,其他任务都必须在后面排队等待。注意:虽然JavaScript只在一个线程上运行,但并不代码JavaScript引擎只有一个线程。事实上,JavaScript引擎有多个线程,单个脚本只能在一个线程上运行(主线程),其他线程都是在后台配合。

JavaScript Event Loop相关原理解析

JavaScript为什么要采用单线程,而不是多线程?

不想让浏览器变得复杂(避免复杂性),因为多线程需要共享资源、且可能修改彼此运行的结果。

该模式会导致的问题?

如果单个任务耗时长,会拖延整个程序的执行,可能导致浏览器无响应(假死)

JavaScript是如何解决这个问题的?

因为单线程的原因,CPU很多时候都闲着的,并且因为IO操作(输入输出)很慢(比如Ajax操作从网络读取数据),这时CPU可以完全不管IO操作,挂起等待中的任务,先运行排在后面的任务。等到IO操作返回了结果,再回过头,把挂起的任务继续执行下去。这种机制就是JavaScript内部采用的“事件循环”机制(Event Loop)

2.同步任务和异步任务

程序里面所有的任务,可以分成两类:同步任务(synchronous)和异步任务(asynchronous)

同步任务:没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕,才能执行后一个任务。

异步任务:被引擎放一边、不进行主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了(比如Ajax操作从服务器得到了结果),那么该任务(通过回调函数的形式)才能进入主线程执行。排在异步任务后面的代码,不用等到异步任务结束就会马上运行,也就是说,异步任务不具有“堵塞”效应

3.任务队列和事件循环

JavaScript运行时,除了一个正在运行的主线程(又称为“调用栈(call stack)”),引擎还提供了一个任务队列(task queue),里面是各种需要处理当前程序处理的异步任务。(实际上,根据异步任务的类型,存在多个任务队列,后面再详讲)

JavaScript Event Loop相关原理解析

1.主线程会去执行所有的同步任务。

2.等到同步任务全部执行完,查看任务队列中的异步任务,将满足条件的重新进入主线程开始执行,这时候就变成同步任务。

3.等任务执行完,下一个异步任务再进入主线程开始执行。

4.引擎不停检查(“事件循环”),一旦任务队列清空,程序就结束执行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
js验证上传图片的方法
May 12 Javascript
详解javascript事件冒泡
Jan 09 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
vue Element左侧无限级菜单实现
Jun 10 #Javascript
详解用js代码触发dom事件的实现方案
Jun 10 #Javascript
Vue中key的作用示例代码详解
Jun 10 #Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 #Javascript
js 获取扫码枪输入数据的方法
Jun 10 #Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 #Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 #Javascript
You might like
MySQL中create table语句的基本语法是
2007/01/15 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
JavaScript window.location对象
2014/11/14 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
基于Vue.js实现简单搜索框
2020/03/26 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
Python中单例模式总结
2018/02/20 Python
python散点图实例之随机漫步
2018/08/27 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
python多维数组分位数的求取方式
2020/03/03 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
2014年减负工作总结
2014/12/10 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
政协委员个人总结
2015/03/03 职场文书
化工厂员工工作总结
2015/10/15 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
高效课堂教学反思
2016/02/24 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL