浏览器中必须掌握的奇怪知识~
1. console.log同步还是异步？
并没有什么规范或一组需求指定console.* 方法族如何工作——它们并不是JavaScript 正式的一部分，而是由宿主环境（请参考本书的“类型和语法”部分）添加到JavaScript 中的。因此，不同的浏览器和JavaScript 环境可以按照自己的意愿来实现，有时候这会引起混淆。
尤其要提出的是，在某些条件下，某些浏览器的console.log(..) 并不会把传入的内容立即输出。出现这种情况的主要原因是，在许多程序（不只是JavaScript）中，I/O 是非常低速的阻塞部分。所以，（从页面/UI 的角度来说）浏览器在后台异步处理控制台I/O 能够提高性能，这时用户甚至可能根本意识不到其发生。 -《你不知道的javascript中卷》第二卷
基本类型：输出没问题；
引用类型：不展开对象显示的是输出时对象的快照信息，展开后显示的最新的值（当对象属性很多时，有时就需要展开对象来查看属性的值，这时就可能引起混淆）。
建议：1. 将对象序列化后输出
console.llog(JSON.stringify( obj ))，复制控制台输出放到
重构。2. 使用打断点（debugger;）的形式查看对象信息。
2. 执行栈、宏任务、微任务、渲染任务、requestAnimationFrame以及requestIdleCallback执行顺序？
整体执行顺序：
执行栈 -> 执行所有的微任务 -> check render检查是否需要渲染（达到浏览器的该渲染的帧率） -> 需要渲染：执行requestAnimationFrame -> 需要渲染：阻塞js引擎线程，切到渲染线程执行 -> check worker检查是否有worker任务 -> 离渲染还有时间，或timeout时间到了执行requestIdleCallback
JavaScript引擎线程和渲染引擎线程同一时刻只能有一个被执行。
UI Rendering：浏览器会根据当前设备的刷新率等因素设置一个帧率（比如：1s 60帧）来决定何时运行【JavaScript不阻塞的情况下】，包括：js执行的dom操作、css3的动画效果。（暂时认为在每次Event Loop的微任务队列清空完之后统一分析后执行渲染。）
执行栈：一种栈的数据结构，代表当前正在执行的代码。
宏任务macrotask：
setTimeout/setInterval
postMessage、MessageChannel
I/O：点击一次button的回调事件、上传文件等
setImmediate（Node.js）
requestAnimationFrame（浏览器）：在绘制前执行
let now = new Date(); let num = 0; function raf() { console.log(new Date() - now + ":" + ++num); requestAnimationFrame(raf); } requestAnimationFrame(raf) // js不阻塞的情况下，跟随浏览器的帧率自动输出 复制代码
微任务microtask：
Promise.then catch finally
MutaionObserver
process.nextTick（Node.js）
requestIdleCallback：会在每次 check worker结束发现距离下一帧的刷新还有时间，就执行一下这个。如果时间不够，就下一帧再说。
3. debugger会触发渲染引擎执行ui渲染？
加断点时：浏览器是一次扔给js执行线程一行代码，执行完这行代码后执行栈已经没有其他代码了，读取不到了，浏览器任务此时代码执行完毕了，所以就开始GUI render，此时可以看到界面发生变化.
不加断点时：浏览器执行完一行代码会继续读取另一行代码，直到没有可执行的代码为止包括也没有微任务队列了然后开始GUI render,由于是瞬间的给我们的感觉是同时的.
setTimeout(()=>{ Promise.resolve().then(()=>{ text.innerHTML="改变后的" console.log('123') }) console.log('没有改变呢') },1000) 复制代码
从图中可以看到GUI render的事件确实是晚于所有代码的执行时间，这也解释了我的另外一个疑惑：为什么断点调试时promsie微任务队列里面的回调的代码没有执行完时就看到了界面变化，这其实还是因为debugger是一点点扔代码给浏览器的原因。
作者：Going_
链接：https://juejin.cn/post/7020411694677491719