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 相关文章推荐
js中if语句的几种优化代码写法
Mar 12 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
学习jQuey中的return false
Dec 18 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
vue文件运行的方法教学
Feb 12 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
学习php中的正则表达式
2014/08/17 PHP
php生成动态验证码gif图片
2015/10/19 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
最简单的js图片切换效果实现代码
2011/09/24 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
js表单登陆验证示例
2016/10/19 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
js实现自定义路由
2017/02/04 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
python函数的作用域及关键字详解
2019/08/20 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
汽车维修专业个人求职信范文
2014/01/01 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
球队口号
2014/06/18 职场文书
集体生日活动方案
2014/08/18 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android