浏览器eventLoop

baukh789 发布于2019-08-23 17:06 / 474人阅读

摘要：浏览器中的与中的之前是不一样，之后，与浏览器一样单线程存在的问题是单线程的，处理任务是一件接着一件处理，所以如果一个任务需要处理很久的话，后面的任务就会被阻塞所以通过事件循环的方式解决了这个问题在了解事件循环前，我们需要了解一些关键词什么是

浏览器中的eventLoop 与node中的eventLoop

node11之前是不一样，node11之后，与浏览器一样

js单线程存在的问题

js是单线程的，处理任务是一件接着一件处理，所以如果一个任务需要处理很久的话，后面的任务就会被阻塞

所以js通过Event Loop事件循环的方式解决了这个问题,在了解事件循环前，我们需要了解一些关键词

什么是stack，queue，heap，event loop

stack（栈）:先进后出

queue（队列）先进先出

heap(堆):存储obj对象

Event Loop的具体流程

堆里面有同步和异步的方法

这些方法，放到栈里，栈是先进后出的执行

同步的话一个一个的执行，碰到异步的方法，也会执行，但是不会执行完，而是先交给webapis处理，多个异步，会形成一个队列，先进先出

等到同步的方法执行完后，把wepapi中的异步方法取出来，放到栈中执行

上面的代码最后输出1，5，2，4，3，执行过程：
只有console.log(2)执行完成，执行栈再次清空时，才会从回调队列取出console.log(3)

1，输出1，将2push进回调队列

2，将4push进回调队列

3，输出5

4，清空了执行栈，读取输出2，发现有3，将3push进回调队列

5，清空了执行栈，读取输出4

6，清空了执行栈，读取输出3

Macrotask(宏任务)、Microtask（微任务）

Microtask（微任务）虽然是队列，但并不是一个一个放入执行栈，而是当执行栈请空，会执行全部

Microtask（微任务）队列中的任务，最后才是取回调队列的第一个Macrotask(宏任务)

···

···
上面的执行过程是：
1，将setTimeout给push进宏任务
2，将then(2)push进微任务
3，将then(4)push进微任务
4，任务队列为空，取出微任务第一个then(2)压入执行栈
5，输出2，将then(3)push进微任务
6，任务队列为空，取出微任务第一个then(4)压入执行栈
7，输出4
8，任务队列为空，取出微任务第一个then(3)压入执行栈
9，输出3
10，任务队列为空，微任务也为空，取出宏任务中的setTimeout（1）
11，输出1

参考

https://juejin.im/post/5a6309...
https://github.com/Advanced-F...

云服务器海外云主机 eventloop 浏览器跨境浏览器浏览器评测

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103813.html

事件循环(EventLoop)的学习总结

摘要：事件循环当进程启动时，会创建一个循环，每个循环通过内部的观察者来查看是否有事件需要处理，如果有就取出事件和它相关的回调函数去执行，执行完以后就进入下一个循环，如果不再有就退出进程。前言在学习eventloop之前，我们需要复习一下js的单线程和异步。虽说js是单线程的，但是在浏览器和Node中都做了相应的处理。如浏览器中的web workers（工作线程），Node中的child_...

lentoo 2019-08-29 16:27 评论0 收藏0
事件循环(EventLoop)的学习总结

摘要：事件循环当进程启动时，会创建一个循环，每个循环通过内部的观察者来查看是否有事件需要处理，如果有就取出事件和它相关的回调函数去执行，执行完以后就进入下一个循环，如果不再有就退出进程。前言在学习eventloop之前，我们需要复习一下js的单线程和异步。虽说js是单线程的，但是在浏览器和Node中都做了相应的处理。如浏览器中的web workers（工作线程），Node中的child_...

hizengzeng 2019-08-26 12:16 评论0 收藏0
事件循环(EventLoop)的学习总结

摘要：事件循环当进程启动时，会创建一个循环，每个循环通过内部的观察者来查看是否有事件需要处理，如果有就取出事件和它相关的回调函数去执行，执行完以后就进入下一个循环，如果不再有就退出进程。前言在学习eventloop之前，我们需要复习一下js的单线程和异步。虽说js是单线程的，但是在浏览器和Node中都做了相应的处理。如浏览器中的web workers（工作线程），Node中的child_...

ninefive 2019-08-02 11:19 评论0 收藏0
JS核心知识点梳理——异步，单线程，运行机制

摘要：引言学习的时候，经常听人说，即是异步的，又是单线程的。所以我们说是异步单线程的。参考从浏览器多进程到单线程，运行机制最全面的一次梳理运行机制详解再谈异步机制详解运行原理解析并发模型与事件循环 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言学习javascipt的时候，经常听人说，javascipt即是异步...

TANKING 2019-08-26 13:55 评论0 收藏0
Netty 框架总结「ChannelHandler 及 EventLoop」

摘要：随着状态发生变化，相应的产生。这些被转发到中的来采取相应的操作。当收到数据或相关的状态改变时，这些方法被调用，这些方法和的生命周期密切相关。主要由一系列组成的。采用的线程模型，在同一个线程的中处理所有发生的事。「博客搬家」原地址: 简书原发表时间: 2017-05-05 学习了一段时间的 Netty，将重点与学习心得总结如下，本文主要总结ChannelHandler 及 E...

VioletJack 2019-08-15 13:41 评论0 收藏0