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年代的遗物，在现代网络编程中几乎没有地位。¹他们使主要的UI和JavaScript线程停顿下来，显示对话框，并等待用户执行某些操作。

您无法使用JavaScript做到这一点。用于显示内容的其他操作会修改DOM，并且稍后在下次浏览器重新绘制页面时异步地绘制这些更改。

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

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

通常，避免使用alert，confirm和prompt来支持使用现代替代品-出于这个原因，因为它们与focus / blur个事件，因为它们无法设置样式，...

在ES2018中，通过添加alert函数，可以轻松地做到这一点（避免使用confirm，prompt和async）。借助编译器，即使您需要定位到IE11等较旧的浏览器，也可以使用async函数。

¹并且现代浏览器正在逐渐减少对它们的支持，例如Chrome的行为 not 使得alert在选项卡不活动时停止代码。

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

1 个答案: