初识JavaScript EventLoop

ZHAO_ 发布于2019-08-22 13:55 / 1036人阅读

摘要：指的是计算机系统的一种运行机制。环境中的执行顺序是随机的这一次，彻底弄懂执行机制的规范和实现

Event Loop指的是计算机系统的一种运行机制。JavaScript采用此机制解决单线程引发相关问题

在浏览器中的web应用会涉及到.JavaScript引擎、WebAPI、Event Loop、Task Queue (Macro Task, Micro Task).因此如果想弄清Event Queue.我们必须都以上都有所了解.

JavaScript引擎:

目前市面上解析JavaScript文件效率最高的就是Google的V8引擎.它主要由两个部分组成:

内存堆: 负责内存分配发生的地方.

调用堆栈: 代码执行时堆栈帧的位置.(是一种数据结构,记录了程序的基本位置.先进后出)

function multiply(x, y) {
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);

当引擎开始执行此代码时，调用堆栈将为空。之后，步骤如下

并发和事件循环

JavaScript是一门单线程语言.因此只有一个单一的调用堆栈,并且一次只能做一件事,当我们进行一些复杂的耗时操作(图形转换)时.浏览器就无法进行其他事情,无法渲染任何内容.也不能运行其它代码.

为了解决浏览器被阻塞的问题,JavaScript提供了一种解决方案异步回调函数（asynchronous callback functions）.异步函数在解析过程中不会被立即执行,会被浏览器放入Task Queue

Task Queue 分为 Macrotask, Microtask

Event Loop 每执行一次先从Macrotask队列中拉出一个.然后检查microtask队列是否为空.依次执行直至清空队列.

Macrotask主要包含：setTimeout、setInterval、setImmediate、I/O、UI交互事件

microtask主要包含：Promise、process.nextTick、MutaionObserver

process.nextTick 永远大于 promise.then.

Node中，_tickCallback在每一次执行完TaskQueue中的一个任务后被调用，而这个_tickCallback中实质上干了两件事：

nextTickQueue中所有任务执行掉(长度最大1e4，Node版本v6.9.1)

第一步执行完后执行_runMicrotasks函数，执行microtask中的部分(promise.then注册的回调)

自测

console.log("1");

process.nextTick(function() {
    console.log("4");
});

setTimeout(function() {
    console.log("6");
    process.nextTick(function() {
        console.log("7");
    });
}, 0);

new Promise(function(resolve, reject) {
    console.log("2");
    resolve();
}).then(function() {
    console.log("5");
});

console.log("3");

setImmediate和setTimeout的延迟设为0，或1的时候，他们的执行顺序是随机的。

setTimeout(() => {
    console.log(2)
}, 2)

setTimeout(() => {
    console.log(1)
}, 1)

setTimeout(() => {
    console.log(0)
}, 0)
// 谷歌浏览器环境中的执行顺序是1 0 2。
// Node环境中的执行顺序是随机的

What is the JavaScript event loop?

How JavaScript works: an overview of the engine, the runtime, and the call stack

这一次，彻底弄懂 JavaScript 执行机制

Event Loop的规范和实现

云服务器 GPU云服务器 eventloop docker初识初识关系数据库 javascript

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

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

JS核心知识点梳理——异步，单线程，运行机制

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

TANKING 2019-08-26 13:55 评论0 收藏0
js运行机制-事件循环EventLoop

js运行机制-事件循环EventLoop 先来看看一段js代码： console.log(script begin) setTimeout(() => { console.log(setTimeout) },0) new Promise((resolve) => { console.log(promise begin) for(let i = 0; i < 1000; i...

jayce 2019-08-26 13:33 评论0 收藏0
浅析 JS 中的 EventLoop 事件循环（新手向）

摘要：同时，如果执行的过程中发现其他函数，继续入栈然后执行。上面我们讨论的其实都是同步代码，代码在运行的时候只用调用栈解释就可以了。序 Event Loop 这个概念相信大家或多或少都了解过，但是有一次被一个小伙伴问到它具体的原理的时候，感觉自己只知道个大概印象，于是计划着写一篇文章，用输出倒逼输入，让自己重新学习这个概念，同时也能帮助更多的人理解它~ 概念 JavaScript 是一门 ...

chadLi 2019-08-26 13:58 评论0 收藏0
JavaScript同步、异步及事件循环

摘要：同步异步是单线程的，每次只能做一件事情。像以下这种情况，代码会按顺序执行，这个就叫同步。虽然是单线程，但是浏览器是多线程的，在遇到像事件等这种任务时，会转交给浏览器的其他工作线程上面提到的几个线程执行，执行完之后将回调函数放入到任务队列。同步、异步 JS是单线程的，每次只能做一件事情。像以下这种情况，代码会按顺序执行，这个就叫同步。 console.log(1); console.l...

zr_hebo 2019-08-23 14:17 评论0 收藏0