event loop 小记
水平不够,只能整理一下知乎大神的回答,勉强度日这样子
在一个事件循环里,会有两个主要的队列: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()
}
事件循环的过程如下:
- 浏览器先执行第一个 task ,在其执行过程中产生的 task 将被push入 task queue、在其执行过程中产生的 micro-task 将被push入 micro-task queue;
- 第一个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);
- 重复上面的过程,浏览器执行 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 小记的更多相关文章
- Atitit 解决Unhandled event loop exception错误的办法
Atitit 解决Unhandled event loop exception错误的办法 查看workspace/.metadata/.log org.eclipse.swt.SWTError: No ...
- javascript运行模式:并发模型 与Event Loop
看了阮一峰老师的JavaScript 运行机制详解:再谈Event Loop和[朴灵评注]的文章,查阅网上相关资料,把自己对javascript运行模式和EVENT loop的理解整理下,不一定对,日 ...
- [译]Node.js - Event Loop
介绍 在读这篇博客之前,我强列建议先阅读我的前两篇文章: Getting Started With Node.js Node.js - Modules 在这篇文章中,我们将学习 Node.js 中的事 ...
- Eclipse经常报Unhandled event loop exception的原因
在公司的电脑上,Eclipse经常报Unhandled event loop exception 错误,非常频繁,通过搜索发现是因为电脑上安装了百度杀毒导致的.... 无语 另外 teamviewer ...
- Node.js 事件循环(Event Loop)介绍
Node.js 事件循环(Event Loop)介绍 JavaScript是一种单线程运行但又绝不会阻塞的语言,其实现非阻塞的关键是“事件循环”和“回调机制”.Node.js在JavaScript的基 ...
- JavaScript 运行机制详解:再谈Event Loop
原文地址:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 一年前,我写了一篇<什么是 Event Loop?>,谈了我对Eve ...
- 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 ...
- 数据密集型 和 cpu密集型 event loop
Node.js在官网上是这样定义的:“一个搭建在Chrome JavaScript运行时上的平台,用于构建高速.可伸缩的网络程序.Node.js采用的事件驱动.非阻塞I/O模型使它既轻量又高效,是构建 ...
- 【Node.js】Event Loop执行顺序详解
本文基于node 0.10.22版本 关于EventLoop是什么,请看阮老师写的什么是EventLoop 本文讲述的是EventLoop中的执行顺序(着重讲setImmediate, setTime ...
随机推荐
- 4-oracle11g安装
1.导入安装包,解压 [root@ocp Desktop]# unzip p10404530_112030_Linux-x86-64_1of7.zip [root@ocp Desktop]# unzi ...
- Java:Random函数及其种子的作用
伪随机(preundorandom):通过算法产生的随机数都是伪随机!! 只有通过真实的随机事件产生的随机数才是真随机!!比如,通过机器的硬件噪声产生随机数.通过大气噪声产生随机数 Random生成的 ...
- php简易实现计划任务
index.php <?php function ceshi(){ $wan = file_get_contents('./wangt_index.txt',true); $jifen = $w ...
- CCS实例,网页栏目
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 「日常训练」「小专题·图论」Domino Effect(1-5)
题意 分析 这题几乎就是一条dijkstra的问题.但是,如何考虑倒在中间? 要意识到这题求什么:单源最短路的最大值.那么有没有更大的?倒在中间有可能会使它更大. 但是要注意一个问题:不要把不存在的边 ...
- 解决Unbuntu终端菱形乱码问题
原因:安装时为了学习方便选择中文安装,其字符编码相关配置如下(在/etc/default/locale中) LANG="Zh_CN.UTF-8 "LANGUAGE="zh ...
- tp5 项目实战 初级 文字步骤
项目实战 环境搭建 新建模块 admin 新建文件夹 controller model view View 中新建 user index 相关样式 js 图片 放入publ ...
- tensorflow的几种优化器
最近自己用CNN跑了下MINIST,准确率很低(迭代过程中),跑了几个epoch,我就直接stop了,感觉哪有问题,随即排查了下,同时查阅了网上其他人的blog,并没有发现什么问题 之后copy了一篇 ...
- 容器基础(十): 使用kubernetes部署应用
概述 使用之前的脚本(env/server.py 得到 env/server:v0.1 镜像, env/worker.py 得到 env/worker:v0.1)得到的镜像,在部署好kubernete ...
- chrome提示Adobe Flash Player过期解决
安装插件:install_flash_player_ppapi.exe