切换标签页时Chrome/Edge中alert弹窗未正确阻塞代码的问题

这种现象是Chrome、Edge这类Chromium内核浏览器的后台标签页优化策略导致的，属于有意设计，不是Bug。

具体原因： #

• 传统的alert()是同步阻塞API，原本应该完全暂停主线程，直到用户点击OK才继续执行后续代码。但Chromium为了减少后台标签页的资源占用，当标签被切换到后台时，会跳过阻塞式弹窗的用户等待逻辑，让主线程继续往下执行——以此避免后台标签因为无人处理弹窗而持续占用资源。
• 当切回原标签页时，弹窗会重新显示，但此时alert()之后的代码已经执行完毕，就出现了“弹窗仍存在但button2的值已变为123”的情况。
• Firefox和IE没有做这个优化，所以保持了传统的同步阻塞行为，必须等用户点击OK才会执行后续代码。
• 开启开发者工具时行为不同，是因为DevTools会禁用部分后台优化策略，让页面执行逻辑和前台保持一致。

测试示例代码： #

<html>
   <head>
      <script type = "text/javascript">
            function fun() {
               alert (" Hello World \n This is an alert dialog box ");
               document.getElementById("test").setAttribute("value", 123);
            }
            function fun2() {
               document.getElementById("test").setAttribute("value", "Test");
            }
      </script>
   </head>

   <body>
      <p> Click the following button to see the effect </p>
      <form>
         <input type = "button" name="button1" value = "Click me" onclick = "fun();" />
         <input type = "button" name="button2" id="test" value = "Test" onclick = "fun2()" />
      </form>
   </body>
</html>

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