为何修改innerText后'Waiting'文本未渲染？JS同步阻塞问题解析

核心原因是JavaScript的单线程特性，以及浏览器主线程中JS执行与页面渲染的互斥关系，具体拆解如下：

• JS是单线程语言，所有同步任务都会在主线程的执行栈中按顺序执行，页面的渲染操作（比如更新DOM内容到屏幕）同样运行在主线程，两者不能同时进行。
• 你写的syncWaitSeconds函数是同步阻塞的：它用while循环霸占了主线程整整3秒，这段时间里浏览器完全没有机会执行渲染任务。虽然你同步修改了pTag.innerText = 'Waiting'，但DOM的实际渲染更新被阻塞延迟了。
• 整个点击事件的代码是同步执行的：先把innerText设为"Waiting"，然后进入3秒的同步阻塞，阻塞结束后立刻把innerText改成"Done"。等主线程终于空闲下来，浏览器才会执行渲染操作，此时只会显示最后一次修改的"Done"，中间的"Waiting"根本没机会被渲染出来。

正确的实现方式（用setTimeout异步等待） #

把同步阻塞的等待换成异步的setTimeout，让主线程有机会在等待前完成渲染：

const pTag = document.getElementById('p');
const button = document.getElementById('button');

button.onclick = () => {
  pTag.innerText = 'Waiting';
  
  // 把后续操作放到异步宏任务中，让主线程先完成渲染
  setTimeout(() => {
    pTag.innerText = 'Done';
  }, 3000);
};

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