JavaScript脚本执行顺序疑问：DOM更新延迟问题求解

Hey there! Let's break down exactly what's going on here and get your DOM updates showing up right away like you want.

Why Your Current Code Isn't Working #

The core problem boils down to how browsers handle JavaScript execution and page rendering:

1. Single-threaded Event Loop: Browsers use a single main thread for both running JavaScript and rendering the page. These two tasks can't happen at the same time—when JS is executing, the rendering thread is paused completely.
2. Synchronous Blocking Sleep: If your sleep function is a synchronous one (like a while loop that waits for time to pass), it locks up the main thread entirely. Even if one.js updates the DOM, the browser can't draw that change until the JS thread is free again—so everything waits until your 8-second sleep finishes.
3. Script Execution Timing: When you load scripts with async, defer, or dynamically, their execution is tied to the event loop. If a blocking sleep runs before one.js gets to execute, or immediately after one.js updates the DOM, the browser never gets a chance to render the DOM change first.

That's why you see "SLEEP start" before "ONE start" sometimes: the sleep is blocking the thread, delaying one.js's execution. And even when one.js runs first, the sleep immediately takes over the thread, so the DOM update stays invisible until the sleep ends.

Fixes to Get Immediate DOM Updates #

To make one.js's DOM change show up right away, we need to give the browser's rendering thread a chance to run before we start any blocking operations. Here are two reliable approaches:

1. Delay Blocking Code/Script Loading with setTimeout #

Wrap your sleep or subsequent script loading in a setTimeout with a 0ms delay. This pushes the code into the next event loop cycle, letting the rendering thread finish drawing the DOM update first.

Example one.js:

console.log("ONE start");
// Update the DOM
document.getElementById('div1').textContent = "ONE done";

// Push two.js loading to the next event loop cycle
setTimeout(() => {
  loadScript('two.js');
}, 0);

2. Replace Synchronous Sleep with Asynchronous Sleep #

Instead of a blocking synchronous sleep, use an async/await-based sleep that lets the main thread free up for rendering.

First, rewrite your sleep function to return a Promise:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

Then in two.js, use await to pause without blocking:

console.log("TWO start");
async function runTwo() {
  console.log("SLEEP start");
  // This waits without blocking the main thread
  await sleep(5000);
  console.log("SLEEP end");
  
  // Now load three.js or do other work
  loadScript('three.js');
}
runTwo();

With this, after one.js updates the DOM, the browser will render that change before the sleep starts, because await yields control back to the event loop.

Key Takeaways #

• Never run long synchronous blocking code on the main thread—it kills both performance and user experience.
• DOM updates don't render immediately; they wait until the JS thread is idle.
• Use setTimeout (0ms) or async/await to defer heavy/blocking code, giving the rendering thread time to do its job.

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