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 13 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
Vue中keep-alive的两种应用方式
Jul 15 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中的Session和Cookie
2013/06/21 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
vue的mixins属性详解
2018/03/14 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Python自定义线程池实现方法分析
2018/02/07 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
党员证明模板
2015/06/19 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS