庖丁解牛之浏览器事件环

时间  2019-11-29
标签 庖丁解牛 浏览器 事件 栏目 浏览器 繁體版
原文   原文链接

浏览器事件环

用实例和知识点描述带您清晰的了解浏览器事件环的每一步;javascript

栈和队列

在计算机内存中存取数据, 基本的数据结构分为栈和队列php

  • 栈(Stack)是一种后进先出的数据结构; 栈的特色是 操做只在一端进行, 通常来讲, 栈的操做只有两种: 进栈和出栈; 第一个进栈的数据老是最后一个才出来html

  • 队列(Queue)和栈相似, 可是它是先进先出的数据结构,它的特色是 操做在队列两端进行, 从一端进入再从另外一端出来; 先进入(从A端)的老是先出来(从B端)前端

名称 进出特色 端的数量
栈 后进先出 进出都在同一端
队列 先进先出 进出是在不一样端
  • 队列比如一条隧道, (车)从隧道的一端(入口)进入, 从隧道的另外一端(出口)出来
// 队列执行时按照放置的顺序依次执行
	setTimeout(function(){
	    console.log(1)
	});

	setTimeout(function(){
	    console.log(2)
	});

	setTimeout(function(){
	    console.log(3)
	});
	
	// => 1 2 3

复制代码
  • 栈比如楼梯, 上楼时第一个踩的楼梯也就是下楼时最后踩的一个楼梯
// 在JavaScript中函数的执行就是一个典型的入栈与出栈的过程

	function a(){
	    console.log('a')
	    function b(){
	        console.log('b');
	        function c(){
	            console.log('c');
	        }
	        c();
	    }
	    b();
	}

	a();
	// => a b c
	// 函数调用顺序是a b c, 而做用域销毁的过程依次是c b a
复制代码

单线程和异步

JavaScript是单线程的, 这里所谓的单线程指的是主线程是单线程;java

  • 为何不是多线程呢? JavaScript最初设计是运行在浏览器中的, 假定是多线程, 有多个线程同时操做DOM, 岂不很混乱! 那会以哪一个为准呢?面试

  • JavaScript为单线程, 在一个线程中代码会一行一行往下走,直到程序执行完毕; 若执行期间遇到较为费时的操做, 那只能等待了;promise

  • 单线程的设计使得语言的执行效率变差, 为了利用多核CPU的性能,javascript语言支持异步代码; 当有较为费时的操做时, 可将任务写为异步; 主线程在执行过程当中遇到异步代码, 会先将该异步任务挂起, 继续执行后面的同步代码, 待同步执行完毕再回过头来, 检查是否有异步任务, 若是有异步任务就执行它;浏览器

PS: Java君加班有点累, 他想烧水冲一杯咖啡, 若是采用同步执行方式,那他就傻傻地等待,等水开了再冲咖啡;bash

PS: Java君加班有点累, 他想烧水冲一杯咖啡, 若是采用异步执行方式,那么他在等待水烧开以前,他能够听听歌,刷刷抖音啥的,等水开了再冲咖啡;数据结构

(-很明显异步的方式效率会高一些);

JavaScript是怎么执行的

JavaScript代码是在栈里执行的, 不管是同步仍是异步; 代码分为同步代码和异步代码, 异步代码又分为: {宏任务} 和 [微任务]

JavaScript是解释型语言,它的执行过程是这样的:

  1. 从上到下依次解释每一条js语句
  2. 如果同步任务, 则将其压入一个栈(主线程); 若是是异步任务,就放到一个任务队列里面;
  3. 开始执行栈里面的同步任务,直到将栈里的全部任务都走完, 此时栈被清空;
  4. 回头检查异步队列,若是有异步任务完成了,就生成一个事件并注册回调(将异步的回调放到队列里面), 再将回调函数取出压入栈中执行;
  5. 栈中的异步回调执行完成后再去检查,直到异步队列都清空,程序运行结束

从以上步骤能够看出,不论同步仍是异步, 都是在栈里执行的, 栈里的任务执行完成后一遍又一遍地回头检查队列,这种方式就是所谓的"事件环"

事件队列

// 先看个demo吧
	console.log('start');
	
	setTimeout(()=>{
	    console.log('hello');
	}, 1000);
	
	console.log('end');
	// start end hello 上面代码执行后, 输出'start' 'end', 大约1s以后输出'hello'
	// ? 为何'hello'不在end以前输出呢
复制代码
  • 解析
    1. setTimeout是一个异步函数, 也就是说当咱们设置一个延迟函数的时候, setTimeout异步函数并不会阻塞代码执行, 程序仍是会往下执行; 与此同时,它会在浏览事件列表中进行标记;
    2. 当延迟时间结束以后(准确说应该是当异步完成后), 事件列表会将标记的异步函数【异步函数的回调函数】添加到事件队列(Task Queue)中
    3. 当主栈中的代码执行完毕, 栈为空时, JS引擎便检查事件队列, 若是不为空的话,事件队列便将第一个任务压入执行栈中运行;
console.log('start');
	setTimeout(() => {
	    console.log('hello');
	},0);
	
	console.log('end');
	// start end hello
	// 将上例微微调整,发现输出结果仍是同样的 
	// 由于setTimeout的回调函数只是会被添加到(事件)队列中,而不会当即执行。 再回头
复制代码
  • 解析:
    1. 由于setTimeout是异步函数, 首先它会被(事件列表)标记(即挂起);
    2. setTimeout的延迟时间0并不是真正是0, 在浏览器应该是4ms;
    3. 延迟时间到达(即异步任务完成),setTimeout的回调会被放入事件队列(静静地等待主栈中的同步代码执行);
    4. 当执行栈(即主栈)中的任务(同步任务)执行完毕, 执行栈为空; // 输出了 start end
    5. 执行栈为空后, 回头检查事件队列, (发现队列里面有任务[函数]待执行)将队列中注册的任务(即:异步函数完成后的回调函数)压入执行栈执行; // 输出 hello
let promise = new Promise(function(resolve, reject) {
	    console.log('Promise');
	    resolve('Sucess');
	});
	  
	promise.then((data)=>{
	    console.log(data);
	});
	  
	console.log('Hello World!');
	// 'Promise' 'Hello World!' 'Sucess'
复制代码
  • 解析:
    1. new Promise()实例时的函数参数(执行器excutor)会当即执行; // 输出 'Promise'
    2. promise.then是异步函数, 它会被先放入事件队列;
    3. 同步任务console.log('Hello World!');执行完毕后主栈被清空 // 输出'Hello World!'
    4. 回头检查事件队列,发现队列里面有任务, 将其压入主栈执行; // 输出'Sucess'

微任务与宏任务

以前说到,异步任务又分为: 宏任务和微任务, 那他们是怎样执行的呢?

  • 在浏览器的执行环境中,老是先执行小的,再执行大的; 也就是说先执行微任务再执行宏任务;
  • 宏任务有: setImmediate(IE) > setTimeout setInterval
  • 微任务有: promise.then > MutationObserver > MessageChannel
  • 任务队列中,在每一次事件循环中,宏任务只会提取一个执行, 而微任务会一直提取,直到微任务队列为空为止;
  • 若是某个微任务被推入到执行栈中,那么当主线程任务执行完成后,会循环调用该队列任务中的下一个任务来执行,直到该任务队列到最后一个任务为止;
  • 事件循环每次只会入栈一个宏任务,主线程执行完成该任务后又会检查微任务队列,并完成里面全部的任务后再执行宏任务

记忆

  • js代码执行顺序:同步代码会先于异步代码; 异步任务的微任务会比异步任务宏任务先执行
  • js代码默认先执行主栈中的代码,主栈中的任务执行完后, 开始执行清空微任务操做
  • 清空微任务执行完毕,取出第一个宏任务到主栈中执行
  • 第一个宏任务执行完后,若是有微任务会再次去执行清空微任务操做,以后再去取宏任务

上述步骤就造成事件环

// 查看setTimeout和Promise.then的不一样
	console.log(1);
	setTimeout(()=>{
	    console.log(2);
	    Promise.resolve().then(()=>{
	        console.log(6);
	    });
	}, 0);
	  
	Promise.resolve(3).then((data)=>{
	    console.log(data);  	// 3
	    return data + 1;
	}).then((data)=>{
	    console.log(data)		// 4
	    setTimeout(()=>{
	        console.log(data+1)	// 5
	        return data + 1;
	    }, 1000)
	}).then((data)=>{
	    console.log(data);		// 上一个then没有任何返回值, 因此为undefined
	});

	// 1  3  4 undefined 2 6 5
复制代码
  • 解析:
    1. 主栈开始执行, 遇到同步代码console.log(1);,将其执行, 输出 1
    2. 主栈继续往下执行, 遇到异步函数setTimeout(()=>{ console.log(2); }, 0), 将其放入宏任务队列,此时宏任务队列:[s1]
    3. 主栈继续往下执行, 遇到异步函数promise.then将其放入微任务队列, 此时微任务队列[p1(打印3,返回3+1)]
    4. 主栈继续往下执行, 遇到异步函数promise.then将其放入微任务队列, 此时微任务队列[p1, p2(打印4)]
    5. 主栈继续往下执行, 遇到异步函数promise.then将其放入微任务队列, 此时微任务队列[p1, p2, p3]
    6. 主栈的同步代码执行完毕后, 栈里面的任务已空, 回头检查发现有宏任务队列[s1]、微任务队列[p1, p2, p3]
    7. 清空微任务队列(即微任务队列中的任务挨个的执行,直到所有执行完毕为止) 清空微任务流程
    8. 把微任务队列里面的p1拿到主栈执行; // 输出 3, 将data + 1(4)做为下一个then的成功值返回
    9. 把微任务队列里面的p2拿到主栈执行; // 输出 4
    10. 在执行p2时遇到了setTimeout(()=>{ console.log(data+1); return data + 1; }),将其放入宏任务队列(先标记,1s后异步执行完成后再将异步函数的回调放入队列), 此时宏任务队列:[s1,s2]
    11. 主栈继续往下执行, 把微任务队列里面的p3拿到主栈执行, 由于上一个then未显示的返回任何值, 所以data为undefined, 执行完毕后输出 undefined
    12. 主栈继续往下执行, 发现微任务队列已被清空, 此时提取宏任务队列中的第一个s1放到主栈里面执行, 执行后输出 2
    13. s1在输出2以后, 遇到了异步函数promise.then, 将其放入微任务队列, 此时微任务队列[p4]
    14. 第一个宏任务执行完毕后, 发现微任务队列有任务p4, 再去执行清空微任务操做
    15. 把微任务队列里面的p4拿到主栈执行; // 输出 6
    16. 主栈继续往下执行, 发现微任务队列已被清空, 此时提取宏任务队列中的第一个s2放到主栈里面执行, 执行后输出 5

浏览器中的事件环

  1. 全部同步任务都在主线程上执行,造成一个执行栈;
  2. 主线程以外,还存在一个任务队列; 只要异步任务有了运行结果,就在任务队列中放置一个事件(任务);
  3. 一旦执行栈中的全部同步任务执行完毕, 系统就会读取任务队列,将队列中的事件放到执行栈中依次执行;
  4. 主线程从任务队列中读取事件,这个过程是循环不断的 整个这种运行机制又被称为Event Loop(事件循环)

面试题分析

setTimeout(()=>{
	    console.log(1);
	    Promise.resolve().then(data => {
	        console.log(2);
	    });
	}, 0);
	
	
	Promise.resolve().then(data=>{
	    console.log(3);
	    setTimeout(()=>{
	        console.log(4)
	    }, 0);
	});
	
	console.log('start');

	// start -> 3  1  2  4
	
	// 给方法分类: 宏任务  微任务
	// 宏任务: setTimeout
	// 微任务: then
/*
	// 执行顺序: 微任务会先执行
	// 默认先执行主栈中的代码,执行后完清空微任务;
	// 以后微任务执行完毕,取出第一个宏任务到主栈中执行
	// 第一个宏任务执行完后,若是有微任务会再次去清空微任务,以后再去取宏任务,这样就造成事件环;
*/
复制代码

  • 解析:

    1. 主栈中的代码从上往下执行, 遇到第一个定时器, 先将其挂起(s1) -> 继续往下
    2. 遇到了Promise.then, 它是一个微任务, 将其放在微任务队列 -> 继续往下
    3. 遇到同步代码console.log('start'), 执行后输出: start -> 继续往下
    4. 栈里面的(同步)任务执行完毕后, 查看异步队列, 发现微任务队列有then(p1), 会把这个微任务拿到栈里面执行,执行后输出: 3(微任务要先于宏任务执行)
    5. 接下来往下执行又遇到一个定时器(宏任务), 又将其挂起(s2)
    6. 微任务执行完成后,发现微任务队列已清空,而后执行宏任务; 由于s1先于s2放到异步的回调队列, 将s1拿到栈里面执行, 执行后输出: 1
    7. console.log(1)执行完毕后又遇到一个微任务then, 将其放到微任务队列(p2), 宏任务完成后再次清空微任务队列, 此时发现微任务p2, 将p2拿到主栈执行, 执行后输出: 2
    8. 微任务p2执行完成后,再取宏任务,发现宏任务队列有s2, 将其放到主栈里面执行, 执行后输出: 4
setTimeout(function () {
        console.log(1);
        Promise.resolve().then(function () {
            console.log(2);
        }); // p2
    }); // s1

    setTimeout(function () {
        console.log(3);
    }); // s2

    Promise.resolve().then(function () {
        console.log(4);
    }); // p1

    console.log(5);  // 5 4 1 2 3
复制代码

  • 解析

    1. 首先输出 5, 由于console.log(5)是同步代码
    2. 接下来将两个setTimeout和最后的Promise放入异步队列(将setTimeout放入宏任务队列[s1, s2],将Promise.then放入微任务队列[p1]);
    3. 执行完同步代码后,发现微任务队列和宏任务队列都有代码, 按浏览器事件环机制, 优先执行微任务
    4. 将微任务队列中的p1拿到栈里执行, 执行完成后输出 4
    5. 微任务p1执行完后发现微任务队列已清空, 接下来执行宏任务
    6. 将宏任务队列中的s1拿到栈里面执行, 执行完成后输出 1
    7. 宏任务s1执行过程当中发现promise.then, 将其加入微任务队列[p2]
    8. 宏任务s1执行完成后, 要再次清空微任务队列, 将微任务队列中的p2拿到主栈执行, 执行完成后输出2
    9. 微任务p2执行完成后, 发现微任务队列已清空, 此时宏任务队列有s2
    10. 将宏任务s2拿到栈里面执行, 执行完成后输出 3
setTimeout(()=>{
	    console.log('A');
	},0);
	var obj={
	    func:function () {
	        setTimeout(function () {
	            console.log('B')
	        },0);
	        return new Promise(function (resolve) {
	            console.log('C');
	            resolve();
	        })
	    }
	};
	obj.func().then(function () {
	    console.log('D')
	});
	console.log('E');
	
	// C E D A B

复制代码

  • 解析:

    1. 首先setTimeout(()=>{ console.log('A'); },0)被加入到宏任务事件队列中,此时宏任务中有[s1(输出A)];
    2. obj.func()执行时,setTimeout(()=>{console.log('B'); },0)被加入到宏任务事件队列中,此时宏任务中有[s1,s2(输出B)];
    3. 接着return一个Promise对象,new Promise实例时,Promise构造函数中的函数参数会当即执行, 执行console.log('C'); 此时打印了 'C'
    4. 接下来遇到then方法,将其回调函数加入到微队列,此时微任务队列中有[p1];
    5. 主栈中的代码继续执行, 遇到同步任务console.log('E'),执行后输出 'E'
    6. 此时全部同步任务执行完毕, 开始检查异步队列,先检查微任务队列, 发现了p1, 执行微任务p1,输出'D'
    7. p1执行完成后,发现微任务队列已清空, 发现宏任务队列依然有任务,取出第一个宏任务s1压到主栈执行, 执行完成后输出'A'
    8. s1执行完毕后,检查发现微任务列表已清空, 而宏任务列表还有一个任务,接着取出下一个宏任务s2
    9. s2执行完毕后输出 'B'

小结

磕磕绊绊终因而理解了这一块的知识点, 之前只是在不断的搬砖, 却从未停下来思考、认真学习, GET到以后感受解开了很多疑惑;

在写文档时候发现本身的语言描述能力竟然如此的不堪, 啰里啰嗦写了不少; 这大抵是成长的必经之路吧;

参考了一些朋友的文章, 从中学习到很多, 有知识点的学习也有大佬对知识点巧妙的描述技巧; 向大佬致敬！

参考文章:

  1. 笔试题——JavaScript事件循环机制（event loop、macrotask、microtask【做者：立志搬砖造福生活】
  2. Javascript事件环该如何理解？
  3. 谈谈Node中的常见概念【做者：凌晨夏沫】（做者是前端大佬一枚,可关注一下）
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程