水平不够,只能整理一下知乎大神的回答,勉强度日这样子

在一个事件循环里,会有两个主要的队列:task queue micro-task quene

其中 task 包括: script(整体代码),setTimeout,setInterval,setImmediate,MessageChannel,I/O,UI rendering

(HTML5 中规定 setTimeout 的最小时间延迟是 4ms,也就是说理想环境下异步回调最快也是4ms才能触发。所以Vue 模拟 task 时,优先使用 setImmediate 和 MessageChannel,目的是让回调异步且尽早调用。)

micro-task包括:process.nextTick,Promise(浏览器原生的Promise),Object.observe,MutationObserver;

MutationObserver 实现 micro-task 的DEMO:

function nextTick (nextTickHandler) {
var counter = 1
var observer = new MutationObserver(nextTickHandler)
var textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
  timerFunc()
}

事件循环的过程如下:

  1. 浏览器先执行第一个 task ,在其执行过程中产生的 task 将被push入 task queue、在其执行过程中产生的 micro-task 将被push入 micro-task queue;
  2. 第一个task完成后,浏览器开始按顺序执行所有的 micro-task,在其执行过程中产生的 task 将被push入 task queue、在其执行过程中产生的 micro-task 将被push入 micro-task queue,直到 micro-task queue 里的所有任务执行完毕,这时浏览器会执行一次渲染来更新视图(由于有可能一直在产生micro-task,导致一直在执行micro-task,下一个task等待时间太长,各个环境设置了队列最大长度:长度最大1e4,Node版本v6.9.1);
  3. 重复上面的过程,浏览器执行 task queue 里的下一个任务......

所以:

setTimeout(function(){
console.log(1)
},0); new Promise(function(resolve){
console.log(2)
for( var i=0 ; i<10000 ; i++ ){
i==9999 && resolve()
}
console.log(3)
}).then(function(){
console.log(4)
}).then(function(){
Promise.resolve().then(function(){
console.log(5)
})
}); console.log(6);

结果是:

2, 3, 6, 4, 5, 1

event loop 小记的更多相关文章

  1. Atitit 解决Unhandled event loop exception错误的办法

    Atitit 解决Unhandled event loop exception错误的办法 查看workspace/.metadata/.log org.eclipse.swt.SWTError: No ...

  2. javascript运行模式:并发模型 与Event Loop

    看了阮一峰老师的JavaScript 运行机制详解:再谈Event Loop和[朴灵评注]的文章,查阅网上相关资料,把自己对javascript运行模式和EVENT loop的理解整理下,不一定对,日 ...

  3. [译]Node.js - Event Loop

    介绍 在读这篇博客之前,我强列建议先阅读我的前两篇文章: Getting Started With Node.js Node.js - Modules 在这篇文章中,我们将学习 Node.js 中的事 ...

  4. Eclipse经常报Unhandled event loop exception的原因

    在公司的电脑上,Eclipse经常报Unhandled event loop exception 错误,非常频繁,通过搜索发现是因为电脑上安装了百度杀毒导致的.... 无语 另外 teamviewer ...

  5. Node.js 事件循环(Event Loop)介绍

    Node.js 事件循环(Event Loop)介绍 JavaScript是一种单线程运行但又绝不会阻塞的语言,其实现非阻塞的关键是“事件循环”和“回调机制”.Node.js在JavaScript的基 ...

  6. JavaScript 运行机制详解:再谈Event Loop

    原文地址:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 一年前,我写了一篇<什么是 Event Loop?>,谈了我对Eve ...

  7. PYTHON ASYNCIO: FUTURE, TASK AND THE EVENT LOOP

    from :http://masnun.com/2015/11/20/python-asyncio-future-task-and-the-event-loop.html Event Loop On ...

  8. 数据密集型 和 cpu密集型 event loop

    Node.js在官网上是这样定义的:“一个搭建在Chrome JavaScript运行时上的平台,用于构建高速.可伸缩的网络程序.Node.js采用的事件驱动.非阻塞I/O模型使它既轻量又高效,是构建 ...

  9. 【Node.js】Event Loop执行顺序详解

    本文基于node 0.10.22版本 关于EventLoop是什么,请看阮老师写的什么是EventLoop 本文讲述的是EventLoop中的执行顺序(着重讲setImmediate, setTime ...

随机推荐

  1. 4-oracle11g安装

    1.导入安装包,解压 [root@ocp Desktop]# unzip p10404530_112030_Linux-x86-64_1of7.zip [root@ocp Desktop]# unzi ...

  2. Java:Random函数及其种子的作用

    伪随机(preundorandom):通过算法产生的随机数都是伪随机!! 只有通过真实的随机事件产生的随机数才是真随机!!比如,通过机器的硬件噪声产生随机数.通过大气噪声产生随机数 Random生成的 ...

  3. php简易实现计划任务

    index.php <?php function ceshi(){ $wan = file_get_contents('./wangt_index.txt',true); $jifen = $w ...

  4. CCS实例,网页栏目

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 「日常训练」「小专题·图论」Domino Effect(1-5)

    题意 分析 这题几乎就是一条dijkstra的问题.但是,如何考虑倒在中间? 要意识到这题求什么:单源最短路的最大值.那么有没有更大的?倒在中间有可能会使它更大. 但是要注意一个问题:不要把不存在的边 ...

  6. 解决Unbuntu终端菱形乱码问题

    原因:安装时为了学习方便选择中文安装,其字符编码相关配置如下(在/etc/default/locale中) LANG="Zh_CN.UTF-8 "LANGUAGE="zh ...

  7. tp5 项目实战 初级 文字步骤

    项目实战 环境搭建 新建模块  admin 新建文件夹 controller   model  view View   中新建 user  index 相关样式  js   图片     放入publ ...

  8. tensorflow的几种优化器

    最近自己用CNN跑了下MINIST,准确率很低(迭代过程中),跑了几个epoch,我就直接stop了,感觉哪有问题,随即排查了下,同时查阅了网上其他人的blog,并没有发现什么问题 之后copy了一篇 ...

  9. 容器基础(十): 使用kubernetes部署应用

    概述 使用之前的脚本(env/server.py 得到 env/server:v0.1 镜像, env/worker.py 得到 env/worker:v0.1)得到的镜像,在部署好kubernete ...

  10. chrome提示Adobe Flash Player过期解决

    安装插件:install_flash_player_ppapi.exe