为什么 Alert 函数的执行速度比 javascript 中的任何其他函数都快？

Question

据我所知，代码执行是从上到下开始的。在以下情况下，为什么 alert() 函数执行得比它之前的代码行快。

情况 1：Alert() 比 console.log()

快

console.log('Why was I executed last???')

alert('Alert 1')
alert('Alert 2')
alert('Alert...')

情况 2： Alert() 比 DOM 函数快。

document.getElementById('btn').addEventListener('click', e => {
  e.target.previousElementSibling.style.color = 'red';
  alert('Alert is faster');
})

<div>Red Text</div>
<button id='btn'>Click me</button>

Answer 1

并不是说它更快，虽然我可以看到你是如何到达那里的，但它是同步。

alert、confirm 和 prompt 是 1990 年代的遗物，在现代 Web 编程中几乎没有立足之地。它们使主 UI 和 JavaScript 线程戛然而止，显示对话框，并等待用户做某事。

您在 JavaScript 中做不到的其他任何事情都做不到。您为显示内容所做的其他操作会修改 DOM，这些更改会在下次浏览器重新绘制页面时异步绘制。

在您的事件处理程序中，您已经更改了元素的颜色，但浏览器还没有机会呈现更改，因为 alert 具有这种不合时宜的同步停止世界行为。

请注意，不同的浏览器处理这些事情的方式不同。即使 alert 正在显示，某些浏览器也可能会将元素显示为红色。其他人没有。有些人可能会在您的第一个示例中显示控制台输出；其他人没有。

一般来说，避免使用 alert、confirm 和 prompt 以支持使用现代替代品——出于这个原因，因为它们与 [=18= 的奇怪互动]/blur 事件，因为无法设置样式，...

这样做（避免 alert、confirm 和 prompt）在 ES2018 中通过添加 async 函数。使用转译器，即使您需要针对 IE11 等较旧的浏览器，您也可以使用 async 函数。

¹ 并且现代浏览器正在逐渐减少对它们的支持，例如 Chrome 的 not 行为使 alert 在选项卡未激活。

Why does Alert function execute faster than any other functions in javascript?