关于document.querySelectorAll（'div'）和document.querySelectorAll（'div'）[0]的Chrome浏览器控制台JavaScript

Question

var a = document.querySelectorAll('div');
console.log(a)
alert(11)

浏览器首先输出控制台的内容，然后发出警报 但是，请更改演示

var a = document.querySelectorAll('div')[0];
console.log(a)
alert(11)

浏览器首先发出警报，然后输出控制台的内容，同样适用于document.getElementsByClassName，检查了很长时间未成功，但也希望回答

Answer 1

在“您不知道JS：异步与性能”一章中：

  

关于console.*方法的工作方式没有规范或要求集-它们不是JavaScript的正式组成部分，而是由托管环境添加到JS中的（请参见此类型和语法标题）书系列）。

     

因此，不同的浏览器和JS环境会随心所欲，这有时会导致混乱的行为。

     

特别是，有些浏览器和某些条件console.log(..)并没有实际上不立即输出。发生这种情况的主要原因是因为I / O非常缓慢且阻塞了许多程序（不仅仅是JS）。因此，从浏览器角度（从页面/ UI角度来看），它可能会更好地使浏览器在后台异步处理控制台I / O，甚至您可能都不知道发生了这种情况。

从输出中可以看到，{a {1}}实际上是在console.log(a)之前执行的，除了a的值不会立即显示。

点击确定按钮后，

如您所见，alert(11)标记位于结果的第一行。而下一行中的div是undefined的结果。