时间戳

首页 > 解决方案 > 为什么 Alert 函数的执行速度比 javascript 中的任何其他函数都快？

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

问题描述

据我所知，代码执行是从上到下开始的。在以下情况下，为什么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>

标签： javascriptalert

解决方案

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

alert、confirm和prompt是 1990 年代的遗物，在现代网络编程中几乎没有地位¹。它们使主 UI 和 JavaScript 线程急速停止，显示对话框，并等待用户做某事。

您可以从 JavaScript 中做的任何其他事情都无法做到这一点。您为显示内容所做的其他事情会修改 DOM，并且这些更改会在以后异步绘制，下次浏览器重新绘制页面时。

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

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

一般来说，避免alert, confirm，并prompt赞成使用现代替换 - 出于这个原因，因为它们与focus/blur事件有奇怪的交互，因为它们不能被样式化，......

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

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

推荐阅读