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 相关文章推荐
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
package.json配置文件构成详解
Aug 27 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
vue 中的 render 函数作用详解
Feb 28 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
JavaScript的Cookies
2008/01/16 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python中元组,列表,字典的区别
2017/05/21 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
文明餐桌活动方案
2014/02/11 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
承诺书样本
2014/08/30 职场文书
上班离岗检讨书
2014/09/10 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
技术股东合作协议书
2014/12/02 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
教师病假条范文
2015/08/17 职场文书
Python中itertools库的四个函数介绍
2022/04/06 Python