浏览器中需要掌握的奇怪知识~

1. console.log同步还是异步？

并没有什么规范或一组需求指定console.* 方法族如何工作——它们并不是JavaScript 正式的一部分，而是由宿主环境（请参考本书的“类型和语法”部分）添加到JavaScript 中的。因此，不同的浏览器和JavaScript 环境可以按照自己的意愿来实现，有时候这会引起混淆。

尤其要提出的是，在某些条件下，某些浏览器的console.log(…) 并不会把传入的内容立即输出。出现这种情况的主要原因是，在许多程序（不只是JavaScript）中，I/O 是非常低速的阻塞部分。所以，（从页面/UI 的角度来说）浏览器在后台异步处理控制台I/O 能够提高性能，这时用户甚至可能根本意识不到其发生。 -《你不知道的javascript中卷》第二卷

• 基本类型：输出没问题；
• 引用类型：不展开对象显示的是输出时对象的快照信息，展开后显示的最新的值（当对象属性很多时，有时就需要展开对象来查看属性的值，这时就可能引起混淆）。

建议：

1. 将对象序列化后输出console.llog(JSON.stringify( obj ))，复制控制台输出放到JSON解析网站重构。
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是一点点扔代码给浏览器的原因。

4. Chrome性能监测performance

Chrome性能分析工具的使用

参考文章

事件循环、requestAnimationFrame和渲染的执行顺序@1
事件循环、requestAnimationFrame和渲染的执行顺序@2
debugger会调用渲染引擎进行ui渲染
console.log