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 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
javascript实现移动端轮播图
Dec 09 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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聊天室技术
2006/10/09 PHP
php中$this->含义分析
2009/11/29 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
经验几则 推荐
2006/09/05 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
javascript的BOM汇总
2015/07/16 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
详解Javascript中的Object对象
2016/02/28 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
理解python多线程(python多线程简明教程)
2014/06/09 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
高中军训的心得体会
2014/09/01 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
武夷山导游词
2015/02/03 职场文书
成本会计岗位职责
2015/02/03 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
JS高级程序设计之class继承重点详解
2022/07/07 Javascript