javascript - 未显示警报之前的 HTML

标签 javascript html google-chrome dom alert

在 Chrome 中,以下代码不显示 <h1>Hello</h1>直到 之后 alert显示并且用户单击确定。然而,在 Firefox 中发生了预期的顺序,<h1>Hello</h1>显示,然后出现警报。

<h1>Hello</h1>
<script>
  alert('Hello is displayed after this alert')
</script>

我很好奇为什么Hello在 Chrome 中关闭警报后显示。这是应该发生的事情吗?是不是 HTML/JavaScript 规范不清楚,而 Chrome 只是从不费心让它变得直观?这是 Chrome 中的错误吗?

最佳答案

浏览器有一个线程用于渲染 HTML + CSS 和 JavaScript 执行。只要 alert 是一个同步调用,它就会阻塞这个线程。

看起来 Firefox 将警报调用解释为在初始渲染后发生(实际上它不执行此脚本,而是将其推送到事件循环),而 Chrome 在渲染过程中执行 JavaScript。如果您在脚本中使用 document.write,这可能是有意义的,这有点顺利地将新项目添加到 DOM,然后再将其作为一个整体呈现。

因此我会说这是一个改进,因为在您决定要显示什么之前会跳过渲染;加上它并不重要——通常你不应该在加载页面时使用阻塞线程运算符。

关于javascript - 未显示警报之前的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49645914/

相关文章:

javascript - Bootstrap 选项卡可通过按钮上一个/下一个在选项卡之间移动

html - 格式化 HTML 表格的标准做法

css - 我的阴影过滤器语法不正确吗?

jquery - 使用百分比和媒体查询的宽度时,设置 div 高度以匹配 div 宽度

javascript - 如何删除特定标签 innerHTML 之前的所有内容

css - chrome 开发者模式下的屏幕单位

html - 仅限 Chrome 加载 6 个 HTML5 音频标签

Javascript,重组数组

javascript - append 动态创建的表 javascript

javascript - 为数组中的每个对象添加属性