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 弹出框 替代浏览器的弹出框
Oct 29 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
js tab栏切换代码实例解析
Sep 03 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
JS函数式编程实现XDM一
Jun 16 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微信开发之关注事件
2018/06/14 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
详解python开发环境搭建
2016/12/16 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
美国汽车交易网站:Edmunds
2016/08/17 全球购物
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
给女朋友的道歉信
2014/01/10 职场文书
寒假家长评语大全
2014/04/16 职场文书
临床护理求职信
2014/04/26 职场文书
服装设计师求职信
2014/06/04 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
付款证明格式范文
2015/06/19 职场文书