微任务

1.1 什么是异步 异步(async) 是相对于 同步(sync) 而言的，很好理解。 同步 就是一件事一件事的执行。只有前一个任务执行完毕，才能执行后一个任务。而 异步是不用等待前一个任务执行完成也能够执行 比如： setTimeout(function(){ console.log(1); }, 1000); console.log(2);// 2 1 setTimeout就是一个 异步任务 1.2 为啥要在JS中使用异步 由于javascript是 单线程 的，只能在JS引擎的主线程上运行的，所以js代码只能一行一行的执行，不能在同一时间执行多个js代码任务，这就导致如果有一段耗时较长的计算，或者是一个ajax请求等IO操作，如果没有异步的存在，就会出现用户长时间等待，并且由于当前任务还未完成，所以这时候所有的其他操作都会无响应。 1.3 那为啥JS不设计成多线程的 这主要跟javascript的历史有关，js最开始只是为了处理一些表单验证和DOM操作而被创造出来的，所以主要为了语言的轻量和简单采用了 单线程 的模式。 多线程模型 相比 单线程 要复杂很多，比如多线程需要处理线程间资源的共享问题，还要解决状态同步等问题。 如果JS是多线程的话，当你要执行往div中插入一个DOM的操作的同时，另一个线程执行了删除这个div的操作，这个时候就会出现很多问题

既然今天要谈的是javascript的事件循环机制，要理解事件循环，首先要知道事件循环是什么。 我们先从一个例子来看一下javascript的执行顺序。 <script> setTimeout(function() { console.log('定时器开始了.'); },0) new Promise(function(resolve) { console.log('马上执行for循环了'); for (let i = 0; i < 10000; i++) { i == 99 && resolve(); } }).then(function() { console.log('执行then函数了'); }) console.log('代码执行结束'); //执行结果为: //马上执行for循环了 //代码执行结束 //执行then函数了 //定时器开始了. </script> 怎么样，是不是和自己在心里运行的结果差了一万八千里呢。如果是的话，请耐心看完后面的内容，让你彻底弄明白javascript的事件循环机制。 单线程的javascript 要想了解事件循环的我们就得从javascript的工作原理开始说起。 javascript语言的一大特点就是单线程，可是为什么javascript不做成多线程呢？ JavaScript的单线程，与它的用途有关。作为浏览器脚本语言

本文转载于: Գ2048 https://www.mk2048.com/blog/blog.php?id=ia1ja2c00j 每次我在写技术类文章的时候都喜欢用引用一个神话故事或者一位超级英雄。没错，因为我的中二病很严重，写代码的时候都幻想自己有一对机械手臂帮我在那啪啪啪的调试bug，别想歪了不是那种啪啪啪。 这次我要说的就是 蚁人 好吧，为什么要说蚁人那。如果你看过漫威（虽然我是DC粉）的超级英雄电影你应该知道蚁人的能力。 --- --- --- --- --- --- --- --- 牛叉吹完，开始正题 蚁人的变大我认为就是宏任务 蚁人的变小我认为就是微任务 我们来引入谷歌的一位大神 Jake 的文章作为说明，原文标题：《Tasks, microtasks, queues and schedules》原文地址： Tasks, microtasks, queues and schedules 首先看一段代码： console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0); Promise.resolve().then(function() { console.log('promise1'); }).then(function() { console.log(

怎么判断是浏览器还是node环境？ node中window是未定义；setImmediate是定义的，在浏览器中未定义 timer阶段：这个阶段会执行setTimeout和setInterval check阶段：执行setImmediate macro task [task] 宏任务 ：script（页面代码）、setTimeout、setInterval、I/O事件、UI交互事件（点击事件） micro task [job]　 微任务： Promise、process.nextTick、Promise().then() 宏任务可以有多个队列 微任务只有一个队列 setTimeout任务之间，推迟执行的毫秒数越小，排在队列里面越靠前 在node里面，timers（setTimeout、setInterval）会优先于setImmediate setTimeout(() => { console.log('setTimeout') },0); // 大于1000时，会先执行setImmediate setImmediate（（）=> { console.log('setImmediate')}） 　　 console.log('start'); setTimeout(function (){ console.log('timeout'); },10); new Promise(

javascript是一门单线程语言 事件循环(Event Loop)是js实现异步的一种方法，也是js的执行机制 同步任务和异步任务 同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。 当指定的事情完成时，Event Table会将这个函数移入Event Queue。 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。 上述过程会不断重复，也就是常说的Event Loop(事件循环)。 macro-task(宏任务)：包括整体代码script，setTimeout，setInterval micro-task(微任务)：Promise，process.nextTick 事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。 1 console.log('1'); 2 3 setTimeout(function() { 4 console.log('2'); 5 process.nextTick(function() { 6 console.log('3'); 7 }) 8 new Promise(function(resolve) { 9 console.log('4')

首先先看一下官方的解释： this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 我的理解：在this.$nextTick外面，获取的数据有可能已经改变了但是获取的时候还是之前的值，但是在this.$nextTick里面只要获取的数据发生改变，获取的时候就是改变了之后的数据 具体看代码吧 <template> <section> <div ref="hello"> <!-- 绑定了data里面的值并渲染到页面--> <h1 v-model="msg">{{msg}}</h1> </div> </section> </template> <script> export default { data(){ return { msg:'123123' } }, mounted() { this.msg='456456' console.log(333); console.log(this.$refs.hello.innerText); this.$nextTick(() => { console.log(444); console.log(this.$refs.hello.innerText); }); },

从一道题浅说 JavaScript 的事件循环 原文链接： https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7 注：本篇文章运行环境为当前最新版本的谷歌浏览器（72.0.3626.109） 任务队列 首先我们需要明白以下几件事情： JS分为同步任务和异步任务 同步任务都在主线程上执行，形成一个执行栈 主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。 一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。 根据规范，事件循环是通过 任务队列 的机制来进行协调的。一个 Event Loop 中，可以有一个或者多个任务队列(task queue)，一个任务队列便是一系列有序任务(task)的集合； 每个任务都有一个任务源(task source)，源自同一个任务源的 task 必须放到同一个任务队列，从不同源来的则被添加到不同队列。 setTimeout/Promise 等API便是任务源，而进入任务队列的是他们指定的具体执行任务。 宏任务 (macro)task（又称之为宏任务），可以理解是每次执行栈执行的代码就是一个宏任务

从一道题浅说 JavaScript 的事件循环 原文链接： https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7 注：本篇文章运行环境为当前最新版本的谷歌浏览器（72.0.3626.109） 任务队列 首先我们需要明白以下几件事情： JS分为同步任务和异步任务 同步任务都在主线程上执行，形成一个执行栈 主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。 一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。 根据规范，事件循环是通过 任务队列 的机制来进行协调的。一个 Event Loop 中，可以有一个或者多个任务队列(task queue)，一个任务队列便是一系列有序任务(task)的集合； 每个任务都有一个任务源(task source)，源自同一个任务源的 task 必须放到同一个任务队列，从不同源来的则被添加到不同队列。 setTimeout/Promise 等API便是任务源，而进入任务队列的是他们指定的具体执行任务。 宏任务 (macro)task（又称之为宏任务），可以理解是每次执行栈执行的代码就是一个宏任务

参考： 　　 https://www.cnblogs.com/chenwenhao/p/11253403.html 判断 js 类型的方式 1. typeof 可以判断出'string','number','boolean','undefined','symbol' 但判断 typeof(null) 时值为 'object'; 判断数组和对象时值均为 'object' 2. instanceof 原理是 构造函数的 prototype 属性是否出现在对象的原型链中的任何位置 function A() {} let a = new A(); a instanceof A //true,因为 Object.getPrototypeOf(a) === A.prototype; 3. Object.prototype.toString.call() 常用于判断浏览器内置对象,对于所有基本的数据类型都能进行判断，即使是 null 和 undefined 4. Array.isArray() 用于判断是否为数组 ES5 和 ES6 分别几种方式声明变量 ES5 有俩种： var 和 function ES6 有六种：增加四种， let 、 const 、 class 和 import 注意： let 、 const 、 class 声明的全局变量再也不会和全局对象的属性挂钩 闭包的概念？优缺点

JavaScript系列：8道有意思的JavaScript面试题！ 前言 注意本次用cdn形式引入js学习，有node.js的玩家可以用node.js。CDN下载地址：https://vuejs.org/js/vue.min.js以及Node.js： Vue系列: windows下npm安装vue 今天博主将为大家分享JavaScript系列：8道有意思的JavaScript面试题！不喜勿喷，如有异议欢迎讨论！ JavaScript 是一种有趣的语言，我们都喜欢它，因为它的性质。浏览器是JavaScript的主要运行的地方，两者在我们的服务中协同工作。JS有一些概念，人们往往会对它掉以轻心，有时可能会忽略不计。 原型、闭包和事件循环等概念仍然是大多数JS开发人员绕道而行的晦涩领域之一。正如我们所知，无知是一件危险的事情，它可能会导致错误。 1：浏览器控制台上会打印什么？ var a = 10; function foo() { console.log(a); // ?? var a = 20; } foo(); 答案： undefined 使用var关键字声明的变量在JavaScript中会被提升，并在内存中分配值undefined。 但初始化恰发生在你给变量赋值的地方。 另外，var声明的变量是函数作用域的，而let和const是块作用域的。 所以，这就是这个过程的样子： var