如何使用JavaScript实现网页初始化进度的实时显示

问题根因 #

JavaScript执行和浏览器UI渲染共享主线程，你代码中的ThreeSecondTask是同步阻塞型任务，在for循环内连续执行时，主线程全程被JS逻辑占用，浏览器没有空闲时间执行DOM更新、重绘操作，所以进度和文本修改要等所有任务完成后才会一次性渲染出来。Firefox在alert弹出前的额外渲染属于浏览器特有实现，不符合通用标准。

最简洁的优雅实现（无额外全局污染） #

我们只需要在每次更新DOM后，短暂让出主线程给浏览器完成渲染即可，用async/await配合简易延时工具函数就能实现，代码逻辑和你原本的同步写法几乎一致，可读性极高：

// 新增工具函数：让出主线程指定时间
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 修改原WaitForOkay为异步函数
async function WaitForOkay() {
  if(!okayPressed) {
    setTimeout(WaitForOkay, 1000);
    return;
  }
  document.getElementById('barline').style = 'display:block';
  const selected = SELECTIONS.filter(s => document.getElementById('check' + s).checked);
  for(let i = 0; i < selected.length; i++) {
    const s = selected[i];
    // 先更新DOM状态
    document.getElementById('row' + s).innerHTML = `<td>Doing ${s}</td>`;
    document.getElementById('progress').value = (i + 1) / selected.length;
    // 让出10ms主线程，让浏览器完成渲染
    await sleep(10);
    // 再执行耗时任务
    ThreeSecondTask(s);
  }
}

进阶优化（完全不卡UI） #

如果你的初始化任务不需要操作DOM，建议用Web Worker把耗时逻辑放到后台线程执行，主线程只负责更新UI，就算任务运行过程中用户也能正常操作页面：

1. 新建单独的worker文件task.worker.js：

// 后台线程逻辑，不占用主线程
self.onmessage = function(e) {
  const taskName = e.data;
  const targetTime = Date.now() + 3000;
  while(Date.now() < targetTime);
  // 任务完成后通知主线程
  self.postMessage({ done: taskName });
}

2. 主线程调用代码：

const taskWorker = new Worker('task.worker.js');

async function WaitForOkay() {
  if(!okayPressed) {
    setTimeout(WaitForOkay, 1000);
    return;
  }
  document.getElementById('barline').style = 'display:block';
  const selected = SELECTIONS.filter(s => document.getElementById('check' + s).checked);
  let finishCount = 0;

  // 监听 worker 返回的完成通知更新进度
  taskWorker.onmessage = function(e) {
    finishCount++;
    document.getElementById('progress').value = finishCount / selected.length;
    if(finishCount === selected.length) {
      // 所有任务完成的后续逻辑
      alert('全部初始化完成');
    }
  };

  // 串行提交任务（如果支持并行可以直接全部提交）
  for(const s of selected) {
    document.getElementById('row' + s).innerHTML = `<td>Doing ${s}</td>`;
    taskWorker.postMessage(s);
    // 如果需要串行执行，在这里加 await 等上一个任务完成再提交下一个
  }
}

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