浏览器中必须掌握的奇怪知识~
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