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 delete 使用示例代码
Mar 29 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
javascript实现拖放效果
Dec 16 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
深入理解vue中的$set
Jun 01 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 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
php xfocus防注入资料
2008/04/27 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
php检测文本的编码
2015/07/26 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
js全屏显示显示代码的三种方法
2013/11/11 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
Python元组常见操作示例
2019/02/19 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
pandas针对excel处理的实现
2021/01/15 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
求职意向书范文
2014/04/01 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
2014年学生会工作总结
2014/11/07 职场文书
董事长开业致辞
2015/07/29 职场文书
护理工作心得体会
2016/01/22 职场文书