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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
firefo xml 读写实现js代码
Jun 11 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
js 作用域和变量详解
Feb 16 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
微信小程序获取当前位置和城市名
Nov 13 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
linux下 C语言对 php 扩展
2008/12/14 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
php 过滤器实现代码
2010/08/09 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
python 正则式使用心得
2009/05/07 Python
在Python下尝试多线程编程
2015/04/28 Python
Python fileinput模块使用实例
2015/06/03 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
Python猴子补丁知识点总结
2020/01/05 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
python Zmail模块简介与使用示例
2020/12/19 Python
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
学校安全工作制度
2014/01/19 职场文书
优秀企业获奖感言
2014/02/01 职场文书
文员岗位职责范本
2014/03/08 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
Python re.sub 反向引用的实现
2021/07/07 Python