[JavaScript知识库] 浏览器中必须掌握的奇怪知识~

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 浏览器中必须掌握的奇怪知识~ -> 正文阅读

[JavaScript知识库]浏览器中必须掌握的奇怪知识~

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)
```