为何jQuery在函数执行期间延迟更新DOM？技术求助

嘿，这个问题我太熟了！本质上是浏览器的事件循环机制在搞鬼，跟jQuery本身关系不大——这是JavaScript单线程执行的核心特性导致的。

问题根源 #

JavaScript是单线程语言，浏览器会把所有任务分成两类：

• 同步任务：立刻在主线程执行，会霸占线程直到完成
• 异步任务：放到任务队列里，等主线程空闲了才会被处理

当你调用SlowUpdate这种耗时的同步函数时，它会一直占用主线程。哪怕你在调用它之前写了jQuery更新h1的代码，浏览器也不会立刻渲染这个DOM变化——因为渲染操作属于异步任务，得等所有同步任务（也就是SlowUpdate的全部逻辑）执行完，主线程空出来后，才会去处理渲染队列。这就是为什么h1要等5秒以上才会更新。

而且你说Chrome和IE都有这个问题，很正常——所有主流浏览器都是遵循事件循环规范的，所以表现完全一致。

解决方案 #

根据你的场景，有几种靠谱的解决方式：

1. 把耗时函数转为异步执行

用setTimeout把慢函数放到下一个事件循环里，这样DOM更新能先抢占主线程完成：

// 先执行DOM更新，浏览器会优先处理这个渲染任务
$('h1').text('Updated');
// 把慢函数丢到异步队列，等DOM渲染完再执行
setTimeout(SlowUpdate, 0);

这里的0毫秒不是真的等0秒，而是告诉浏览器“主线程空闲后立刻执行这个任务”，刚好能让DOM更新先完成。

2. 拆分耗时任务为分块执行

如果SlowUpdate里的逻辑可以拆分，用requestAnimationFrame把大任务拆成小步骤，让浏览器有间隙去渲染DOM：

function chunkedSlowUpdate(step = 0) {
  // 每次只执行一小部分逻辑，比如循环1000次而非10000次
  if (step < 10000) {
    // 这里写你原来SlowUpdate里的部分逻辑
    for (let i = 0; i < 1000; i++) {
      // 执行耗时操作
    }
    step += 1000;
    // 让浏览器先渲染，再继续执行下一块
    requestAnimationFrame(() => chunkedSlowUpdate(step));
  }
}

// 先更新DOM
$('h1').text('Updated');
// 启动分块执行的慢任务
chunkedSlowUpdate();

3. 用Web Worker完全隔离耗时任务

如果慢任务是纯计算逻辑（不涉及DOM操作），可以把它放到Web Worker的后台线程里，完全不阻塞主线程：

// 1. 创建Worker线程，指向单独的脚本文件
const worker = new Worker('slow-task.js');

// 2. 先更新DOM，立刻生效
$('h1').text('Updated');

// 3. 给Worker发消息，启动耗时任务
worker.postMessage('start');

// 4. 监听Worker的完成通知
worker.onmessage = function(e) {
  console.log('耗时任务完成:', e.data);
};

然后在slow-task.js里写你的SlowUpdate逻辑：

self.onmessage = function(e) {
  if (e.data === 'start') {
    // 这里写原来的SlowUpdate耗时逻辑
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += i;
    }
    // 把结果发回主线程
    self.postMessage(result);
  }
};

这种方式最彻底，主线程完全不会被阻塞，DOM更新瞬间生效。

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