分享一篇 写的很好的 宏任务 微任务  同步异步的文章 文章原地址: https://juejin.im/post/59e85eebf265da430d571f89 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序.因为javascript是一门单线程语言,…

前言:Event Loop即时间循环,是指浏览器或Node的一种解决javascript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理 Js运行机制      1.不同运行环境,js运行效果不一致      2.nodeJs基于libuv实现,参考http://docs.libuv.org/en/v1.x/design.html     3.chorme基于 宏任务微任务     宏任务,macrotask也叫tasks.一些异步任务的回调会一次进入macro task queue…

1.nextTick调用方法 首先看nextTick的调用方法: https://cn.vuejs.org/v2/api/#Vue-nextTick // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.nextTick(function () { // DOM 更新了 }) // 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示) Vue.nextTick() .then(function () { // DOM 更新了 }) 即:既可以支持…

在 JavaScript 中,任务被分为两种,一种宏任务(MacroTask),一种叫微任务(MicroTask). MacroTask(宏任务) script全部代码.setTimeout.setInterval.I/O.UI Rendering. MicroTask(微任务) Process.nextTick(Node独有).Promise.Object.observe(废弃).MutationObserver 具体步骤: 执行栈在执行完同步任务后,查看执行栈是否为空,如果执行栈为空,就会去…

在介绍宏任务和微任务之前,先抛出一个问题.相信大家在面试的时候,会遇到这样的相似的问题: setTimeout(function(){undefined console.log('1') }); new Promise(function(resolve){undefined console.log('2'); resolve(); }).then(function(){undefined console.log('3') }); console.log('4'); 请说出控制台打印的数据,很多小…

1.javascript是单线程的 javascript是单线程的,意思是javascript在同一时间内只能做一件事情. 为什么是单线程的? 因为js的主要用途是用于用户交互和操作DOM,如果是多线程的,会引起复杂的同步问题, 比如一个线程操作某个节点的内容,另一个线程同一时间却在删除这个节点,这时候到底该执行那一条命令呢?到底以哪一个线程为准呢. 2.同步和异步 同步是阻塞模式,后一个任务必须等待前一个任务执行完后才能继续执行. 异步是非阻塞模式,当遇到异步任务无需等待其执行完,继续向下执行…

说到宏任务和微任务,我们就不得不提 Event Loop 了 JS的本质是单线: 1. 一般来说,非阻塞性的任务采取同步的方式,直接在主线程的执行栈完成. 2. 一般来说,阻塞性的任务都会采用异步来执行,异步的工作一般会交给其他线程完成,然后回调函数会放到事件队列中. 当主线程的任务执行完了(执行栈空了),JS会去询问事件队列 执行一个宏任务(先执行同步代码)-->执行所有微任务-->UI render-->执行下一个宏任务-->执行所有微任务-->UI render--&g…

前言 在写代码的时候经常思考一个问题,到底是那个函数先执行,本身JavaScript是一门单线程的语言,意思就是按照顺序执行.但是加入一些setTimeout和promise的函数来又实现了异步操作,常常我会写一个setTimeout(fn,0),他会立即执行吗? 宏任务和微任务 首先我们先来看一段代码: <script> console.log("Start"); setTimeout(function(){ console.log("SetTimeout&qu…

为什么要EventLoop? JS 作为浏览器脚本语言,为了避免复杂的同步问题(例如用户操作事件以及操作DOM),这就决定了被设计成单线程语言,而且也将会一直保持是单线程的.而在单线程中若是遇到了耗时的操作(IO,定时器,网络请求)将会一直等待,CPU利用率将会大打折扣,时间大量浪费.所以需要设计一种方案让一些耗时的操作放在一边等待,让后面的函数先执行,于是有了EventLoop的设计. 将任务分为两种: 同步任务 异步任务 定时器都是异步操作 事件绑定都是异步操作 AJAX中一般采取的异步操作…

js事件轮询执行顺序总结: 1)所有的同步任务都在主线程上执行,行成一个执行栈. 2)除了主线程之外,还存在一个任务列队,只要异步任务有了运行结果,就在任务列队中植入一个时间标记. 3)主线程完成所有任务(执行栈清空),就会读取任务列队,先执行微任务队列在进行DOM渲染,最后执行宏任务队列. 4)重复执行上面步骤 为什么微任务比宏任务先触发? 宏任务:Dom渲染后触发,如settimeout 微任务:Dom渲染前触发,如promise 1 <div id="container"&…