如何在页面加载内容前触发JavaScript Alert且不阻塞页面加载？

原生的alert()是同步阻塞式的API，只要触发它，浏览器会暂停所有页面加载、渲染和JavaScript执行流程，直到用户关闭弹窗——这就是你当前代码出现问题的核心原因。

如果想在页面内容显示前触发提示，同时不阻塞页面后续加载，有两种可行思路：

• 改用自定义模态弹窗：
  用HTML/CSS/JS实现一个非阻塞的自定义弹窗，把它放在页面最顶层并设置初始显示状态。这样页面可以继续加载渲染，弹窗不会阻塞流程。示例代码：

  <style>
    .custom-alert {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background: white;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      z-index: 9999;
    }
  </style>
  
  <div class="custom-alert">But wait, there's more...</div>
  
  <script>
    // 自定义弹窗关闭逻辑
    const alertBox = document.querySelector('.custom-alert');
    alertBox.addEventListener('click', () => {
      alertBox.style.display = 'none';
    });
  </script>
  

  这种自定义弹窗不会阻断页面加载，页面会在弹窗显示的同时继续加载后续内容。

• 延迟触发原生alert（仅适配部分场景）：
  如果一定要用原生alert()，可以把它放到异步任务队列中，让浏览器先完成页面的初始渲染准备，再触发弹窗。但注意，alert本身的阻塞特性无法消除，只是页面会先完成部分加载：

  <script>
    setTimeout(() => {
      alert('But wait, there\'s more...');
    }, 0);
  </script>
  

  setTimeout(fn, 0)会把alert排入宏任务队列，浏览器会先处理完当前的渲染任务，再执行这个alert。不过这种方式下，页面可能会瞬间闪显内容再弹出alert，无法完全保证在内容显示前触发。

总结：如果需要严格在内容显示前触发提示且不阻塞加载，自定义模态弹窗是更可靠的方案。

内容的提问来源于stack exchange，提问作者Mamadona