如果你已经知道了js中存在宏任务和微任务,那么你一定已经了解过promise了.因为在js中promise是微任务的一个入口. 先来看一道题: setTimeout(function(){ console.log('setTimeout') }); new Promise(function(resolve, reject){ console.log('pormise body'); resolve(); }).then(function(){ console.log('promise then'…

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

一.宏任务和微任务有哪些 宏任务:setTimeout,setInterval,ajax,dom,宏任务是由浏览器提供的 微任务:promise,async/await,微任务是由es6提供的 二.微任务一定会比宏任务限制性 看看下面的代码 1 console.log(100) 2 //宏任务 3 setTimeOut(()=>{ 4 console.log(200) 5 }) 6 //微任务 7 Promise.resolve().then(()=>{ 8 console.log(300)…

在 ES6之前,在Javascript不存在类(Class)的概念,javascript中不是基于类的,而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏 览器也支持 ES6,不过只实现了 ES6 的部分特性和功能. 1.那么何为构造函数呢? 其实构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用.我 们可以把对象中一些公共的属性和方…

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

1. 原理图 2. 说明 JS 中用来存储待执行回调函数的队列包含 2 个不同特定的列队 宏列队:用来保存待执行的宏任务(回调),比如:定时器回调.DOM 事件回调.ajax 回调 微列队:用来保存待执行的微任务(回调),比如:promise的回调.MutationObserver 的回调 JS 执行时会区别这 2 个队列 JS 引擎首先必须先执行所有的初始化同步任务代码 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行,也就是优先级比宏任务高,且与微任务所处的代码位置无关…

    关于变量提升,以前在一些教程和书籍上都听到过,平时开发中也知道有这个规律,但是今天突然在一个公开课中听到时,第一反应时一脸懵逼,然后一百度,瞬间觉得好熟悉啊,差点被这个概念给唬住了,不信我给你看个栗子,你也会恍然大悟的: (function(){ console.log(v); var v = 'I love you'; console.log(v); })() // undefined I love you     这就是一个典型的变量提升的例子了,规则是怎样的呢,我的理解是在一个作用…

上篇文章中讲到变量提升和函数提升的先后顺序时蒙了,后来去查了一下资料,特别整理一下. 在<你不知道的JavaScript(上卷)>一书的第40页中写到:函数会首先被提升,然后才是变量. 书中的一个代码示例是: foo(); //1 var foo; function foo() { console.log(1); } foo = function() { console.log(2); } 这个例子相对比较好理解,就是foo这个函数会先被声明再作用域的开始部分,实际上这个代码片段会被引擎理解为…

1.some():返回一个Boolean,判断是否有元素符合func条件const arr = [1,2,3,4]; arr.some((item)=>{return item>1}) 打印结果: true 2.every():返回一个Boolean,判断每个元素是否符合func条件const arr1 = [1,2,3,4]; arr.every((item)=>{return item>3});打印结果:false 3.filter():返回一个符合func条件的元素数组(es…

首先JavaScript是单线程的语言,也就是说JS执行环境中,负责执行代码的线程只有一个.一次只能执行一个任务,如果有多个任务的话, 就要排队,然后依次执行,优点就是更安全,更简单.缺点就是遇到耗时的任务就必须要去排队,如下图所示: 所以为了解决耗时任务阻塞执行的情况,JavaScript将任务的执行模式分为两种:同步模式和异步模式 同步模式: 下面以一段同步代码为例来分析下它的执行过程: 上图中Call stack为Js执行调用栈,Console为控制台信息,首先上述代码会在调用栈中压入一个…