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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
JS简单获取日期相差天数的方法
Apr 24 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
layui table 参数设置方法
Aug 14 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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 二维数组排序保持键名不变
2019/03/06 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
js实现随机点名小功能
2017/08/17 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
vue 递归组件的简单使用示例
2021/01/14 Vue.js
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python中的itertools的使用详解
2020/01/13 Python
django修改models重建数据库的操作
2020/03/31 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
实习生工作证明范本
2014/09/14 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
全新239军机修复记
2022/04/05 无线电
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL