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之更有效率的字符串替换
Aug 02 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
Java中Timer的用法详解
Oct 21 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 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 写文本日志实现代码
2010/05/18 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
React注册倒计时功能的实现
2018/09/06 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
Python中的默认参数详解
2015/06/24 Python
详解Python编程中包的概念与管理
2015/10/16 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
艺术设计专业个人求职信范文
2013/12/11 职场文书
消防先进事迹材料
2014/02/10 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
MYSQL常用函数介绍
2022/05/05 MySQL