事件循环(EventLoop)的学习总结
前言
在学习eventloop之前,我们需要复习一下js的单线程和异步。
虽说js是单线程的,但是在浏览器和Node中都做了相应的处理。如浏览器中的web workers(工作线程),Node中的child_process(子进程)。它们的出现对大量计算的分解起到了促进作用。
事件循环
当进程启动时,Node会创建一个tick循环,每个tick循环通过内部的观察者来查看是否有事件需要处理,如果有就取出事件和它相关的回调函数去执行,执行完以后就进入下一个循环,如果不再有就退出进程。
浏览器中的eventloop
在浏览器中把异步事件放到工作线程中,避免阻塞主线程UI的渲染
console.log('进程开始')
const ajax = new XMLHttpRequest()
ajax.addEventListener('load', () => {
console.log('load')
})
ajax.addEventListener('loadend', () => {
if (ajax.readyState == 4 && ajax.status == 200) {
console.log('ajax success')
} else {
console.log('ajax success')
}
})
ajax.open('get', 'http://localhost/study/html/vue.js')
ajax.send()
setTimeout(() => {
console.log('setTimeout')
}, 300)
fetch('http://localhost/study/html/demo.json',{
headers: {
'content-type': 'application/json'
}
}).then(res => {
console.log('fetch')
})
let i = 0
while(i < 10000) {
i++
}
console.log(i)
console.log('进程结束')
从结果可以看出三种异步处理不阻塞主线程代码的执行,而ajax、fetch、setTimeout根据代码处理结束的先后来执行回调函数。
Nodejs中的eventloop
Node中的事件循环根据观察者的优先级来执行,同一个循环内的process.nextTick -> setTimeout -> setImmediate
setTimeout(() => {
console.log('setTimeout')
}, 0)
setImmediate(() => {
console.log('setImmediate1')
process.nextTick(() => {
console.log('setImmediate1 插入nextTick')
})
})
setImmediate(() => {
console.log('setImmediate2')
})
process.nextTick(() => {
setTimeout(() => {
console.log('nextTick1 setTimeout')
}, 100)
console.log('nextTick1')
})
process.nextTick(() => {
console.log('nextTick2')
})
console.log('正常执行')
总结
事件循环的执行特点,源于利用单线程,远离多线程死锁、状态同步等问题;利用异步让单线程远离阻塞,以更好的使用CPU。
来源:https://segmentfault.com/a/1190000016067071
事件循环(EventLoop)的学习总结的更多相关文章
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
- 事件循环--eventloop
一.什么是事件循环? 事件循环是 JS 实现异步的具体解决方案,同步代码直接执行,异步函数或代码块先放在异步队列中,待同步函数执行完毕,轮询执行异步队列的函数. 事件循环 二.node.js中的事件循 ...
- 事件循环 EventLoop(Promise,setTimeOut,async/await执行顺序)
什么是事件循环?想要了解什么是事件循环就要从js的工作原理开始说起: JS主要的特点就是单线程,所谓单线程就是进程中只有一个线程在运行. 为什么JS是单线程的而不是多线程的呢? JS的主要用途就是与用 ...
- [浏览器事件循环] javaScript事件循环 EventLoop
前言 Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理. 先熟悉基本概念 [堆Heap] 堆是一种数据结构 ...
- 前端中的事件循环eventloop机制
我们知道 js 是单线程执行的,那么异步的代码 js 是怎么处理的呢?例如下面的代码是如何进行输出的: console.log(1); setTimeout(function() { console. ...
- javascript事件循环
js单线程 js是单线程的,这样更有利与用户交互以及DOM操作;有关进程与线程的详细解释可以点击传送门:尽管webworker可以实现多线程,但本质上他还属于单线程,由webworker创建的线程都由 ...
- selector.select(500); EventLoop及事件循环机制 netty 在半透明做代理网关下 对请求的批处理
Netty框架学习之路(五)—— EventLoop及事件循环机制 - 懋懋之为 - CSDN博客 https://blog.csdn.net/tjreal/article/details/79751 ...
- Qt 学习之路 2(72):线程和事件循环
Qt 学习之路 2(72):线程和事件循环 <理解不清晰,不透彻> -- 有需求的话还需要进行专题学习 豆子 2013年11月24日 Qt 学习之路 2 34条评论 前面一章我 ...
- Qt 学习之路:线程和事件循环
前面一章我们简单介绍了如何使用QThread实现线程.现在我们开始详细介绍如何“正确”编写多线程程序.我们这里的大部分内容来自于Qt的一篇Wiki文档,有兴趣的童鞋可以去看原文. 在介绍在以前,我们要 ...
随机推荐
- sh_06_元组基本使用
sh_06_元组基本使用 info_tuple = ("zhangsan", 18, 1.75, "zhangsan") # 1. 取值和取索引 print(i ...
- Android_(游戏)打飞机01:前言
(游戏)打飞机01:前言 传送门 (游戏)打飞机02:游戏背景滚动 传送门 (游戏)打飞机03:控制玩家飞机 传送门 (游戏)打飞机04:绘画敌机.添加子弹 传送门 (游戏)打飞机05:处理子弹, ...
- Confluence备份,数据迁移
一.Confluence的备份.恢复1)Confluence的备份 管理员账号登录Confluence,点击右上角的"一般配置"-"每日备份管理",如下图(默认 ...
- vue router 报错:NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}
https://blog.csdn.net/weixin_43202608/article/details/98884620
- auth 认证组件的补充
Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Djang ...
- 【学习】linux环境下nginx文件彻底删除
nginx卸载其实很简单,只需要两步即可完成!第一步:输入以下指令全局查找nginx相关的文件: sudo find / -name nginx* 第二步:删除查找出来的所有nginx相关文件 sud ...
- python3笔记十一:python数据类型-List列表
一:学习内容 列表概念 列表创建:创建空列表.创建带有元素的列表 列表访问:取值 列表修改:替换元素.追加元素.追加列表.插入元素 列表删除:移除列表中指定下标处的元素.移除匹配条件的第一个元素.移除 ...
- Linux高级调试与优化——Address Sanitizer
Address Sanitizer ASAN最早可以追溯到 LLVM 的 sanitizers项目(https://github.com/google/sanitizers),这个项目包含了Addre ...
- Iris Classification on Keras
Iris Classification on Keras Installation Python3 版本为 3.6.4 : : Anaconda conda install tensorflow==1 ...
- [MVC HtmlHelper简单了解]
HtmlHelper用来在视图中显示Html控件,简化代码,使用方便!,降低了View视图中的代码复杂度!可以更快速的完成工作! 以下是一些常用 的html标签 辅助方法 使用HTML辅助方法输出 ...