Chrome中alert弹窗显示时页面加载异常问题求助

Hey there! Let me walk you through what's going on with your code in Chrome, and how to fix it.

I'm currently working through Robin Nixon's Learning PHP, MySQL & JavaScript With jQuery, CSS & HTML5 4th edition and built a small JavaScript demo: after confirming an alert, it adds an element to the DOM; confirm a second alert, and the element gets removed.

It works perfectly in Edge and Firefox, but Chrome has weird behavior: when the alert pops up, the page stays in a loading state. The static text that should be visible right away only shows up after I close the second alert, and the added element never appears at all. Is this just how Chrome is designed, or do I need to tweak some settings?

My Code #

Here's the HTML file:

<!DOCTYPE html>
<html>
    <head>
        <title>Adding Elements</title>
        <script src='OSC.js'></script>
    </head>
    <body>
        This is a document with only this text in it.<br><br>

        <script type="text/javascript">
            alert('Click OK to add an element')

            newdiv = document.createElement('div')
            newdiv.id = 'NewDiv'
            document.body.appendChild(newdiv)

            S(newdiv).border = 'solid 1px red'
            S(newdiv).width = '100px'
            S(newdiv).height = '100px'
            newdiv.innerHTML = "I'm a new object inserted in the DOM"
            tmp = newdiv.offsetTop

            alert('Click OK to remove the element')
            pnode = newdiv.parentNode
            pnode.removeChild(newdiv)
            tmp = pnode.offsetTop

            function O(i) { return typeof i == 'object' ? i : 
           document.getElementById(i) }

           function S(i) { return O(i).style }
           function C(i) { return document.getElementsByClassName(i) }
        </script> 
    </body>
</html>

And the OSC.js file contains these helper functions:

function O(i) { return typeof i == 'object' ? i : 
document.getElementById(i) }

function S(i) { return O(i).style }
function C(i) { return document.getElementsByClassName(i) }

What's Causing the Issue #

This is actually a Chrome rendering engine quirk/feature, not a setting you need to change. Here's why:

• Browsers like Chrome use a single thread for both JavaScript execution and page rendering (they're mutually exclusive—when one runs, the other pauses).
• alert() is a blocking call: when it pops up, it halts all JavaScript execution and queues up any pending rendering tasks.
• In your code, the first alert() fires before the browser has a chance to render the initial page text or the new div you create. Then, immediately after creating the div, you fire a second alert() which blocks again. By the time you close the second alert, you've already removed the div—so the browser renders the initial text, but the div is gone before it can show up.

How to Fix It #

You need to let the browser finish rendering the page before triggering the second alert. The easiest way is to wrap your post-first-alert code in a setTimeout with a 0ms delay. This pushes the code into the browser's asynchronous task queue, giving the rendering engine time to catch up:

alert('Click OK to add an element');

// Let the browser render the page first before proceeding
setTimeout(() => {
    newdiv = document.createElement('div')
    newdiv.id = 'NewDiv'
    document.body.appendChild(newdiv)

    S(newdiv).border = 'solid 1px red'
    S(newdiv).width = '100px'
    S(newdiv).height = '100px'
    newdiv.innerHTML = "I'm a new object inserted in the DOM"

    alert('Click OK to remove the element')
    pnode = newdiv.parentNode
    pnode.removeChild(newdiv)
}, 0);

A quick note: relying on offsetTop to force a re-render isn't reliable across browsers. Using setTimeout is a cleaner, more consistent way to let the rendering engine do its job.

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