0 一如既往的开场白
setTimeout(function() {
console.log('setTimeout');
})
new Promise(function(resolve) {
console.log('promise');
resolve()
}).then(function() {
console.log('then');
})
console.log('console');
1 EventLoop
js是单线程的，因为可以操作DOM，如果是多线程的话，容易导致冲突，比如一个线程删除一个dom节点，另一个线程又需要操作这个dom节点，就会导致冲突。
如果某些任务执行时间过长，又会造成阻塞现象，导致其他任务难以被执行。
js的任务分为同步任务、异步任务。
同步任务指的是在主线程上执行的任务，形成一个执行栈。异步任务不在主线程上，在任务队列（task queue）中，只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。一旦“执行栈”中的所有同步任务执行完毕，系统就会读取“任务队列”，如果任务队列有事件，则异步任务结束等待，进入执行栈，开始执行。
主线程从任务队列读取任务，这个过程是循环不断的，所以整个的这种运行机制又被称为事件循环。
异步任务分为：宏任务、微任务。
1.1 宏任务
- setTimeout、setInterval
- requestAnimationFrame
- 修改url
- 页面加载
- 用户交互
- 执行主线程js代码
1.2 微任务
- promise
- process.nextTick
不同类型的任务会进入对应的Event Queue，比如setTimeout和setInterval会进入相同的Event Queue。
事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。
// js
let promiseGlobal = new Promise(resolve=>{
console.log(1)
resolve('2')
})
console.log(3)
promiseGlobal.then(data=>{
console.log(data)
let setTimeoutInner = setTimeout(_=>{
console.log(4)
},1000)
let promiseInner =new Promise(resolve=>{
console.log(5)
resolve(6)
}).then(data=>{
console.log(data)
})
})
let setTimeoutGlobal = setTimeout(_=>{
console.log(7);
let promiseInGlobalTimeout = new Promise(resolve=>{
console.log(8);
resolve(9)
}).then(data=>{
console.log(data)
})
},1000)
1.3 执行流程
- js内核加载代码到
执行栈 -
执行栈依次执行主线程的同步任务，过程中若遇到调用了异步Api则会添加回调事件到回调队列。微任务添加事件到微任务队列中，宏任务添加事件到宏任务队列中，直到当前执行栈中代码执行完毕。 - 开始执行当前所有
微任务队列中微任务回调事件。相当于清空队列，如果在执行微任务的过程中，生成了新的微任务，则也会在最后执行此微任务。 - 取出宏任务队列中的第一个宏任务，放到执行栈中执行。
- 执行当前
执行栈的宏任务，若在此过程中又遇到微任务或者宏任务，则会继续添加进相应的队列，本轮宏任务执行完毕后，又把本轮新产生的微任务队列执行并清空。 - 以上操作往复循环
- EventLoop
2 requestAnimationFrame
定义：浏览器用于定时循环操作的一个接口，类似于setTimeout，主要==用途是按帧对网页进行绘制==，充分利用浏览器的刷新机制，每秒60帧，16ms刷新一次，利用这个频率对浏览器进行重绘。
==针对同步代码，浏览器会将同步代码捆绑一起执行，然后以执行结果为当前状态重新渲染，除非有计算样式的代码==
// 不会出现闪动情况
document.body.appendChild(el)
el.style.display = 'none'
//会闪现 存在异步队列
document.body.appendChild(el)
setTimeout(()=>{
el.style.display = 'none'
}, 0)
如果切换到别的标签，就会自动停止刷新。
requestAnimationFrame是在主线程上完成。这意味着，如果主线程非常繁忙，requestAnimationFrame的动画效果会大打折扣。
使用方式：
需要传入一个callback，==这个回调函数会在浏览器重新绘制之前触发。==
requestID = window.requestAnimationFrame(callback);
如果需要一直在浏览器重新绘制，需要再回调函数中再去调requestAnimationFrame
function repeat () {
requestAnimationFrame(repeat)
}
requestAnimationFrame(repeat)
2.1 cancelAnimationFrame 取消重绘
window.cancelAnimationFrame(requestID);
2.2 执行顺序
执行队列里的全部任务，但如果任务本身又新增 Animation callback就不会当场执行了，因为那是下一个循环。
// 浏览器合并优化，渲染最后结果值500px，如何实现想要的效果？
elem.style.transform = 'translateX(1000px)'
// elem.style.transition = 'transform 1s ease'
// elem.style.transform = 'translateX(500px)'
// 解决方案：下一帧开始前执行
requestAnimationFrame(() => {
// 下下一帧开始前执行
requestAnimationFrame(() => {
elem.style.transform = 'translateX(500px)',
elem.style.transition = 'transform 1s ease'
})
})
// 两次animation callback依次执行
requestAnimationFrame(() => {
elem.style.background = 'red'
})
