JavaScript循环异步加载DOM元素未按预期工作问题求解

我正在尝试使用JavaScript实现类似资源管理器的交互效果，编写了Explorer类：

• 首先向父节点中挂载一个div（explorer，红色容器）
• 再在该div内部挂载第二个div（repertory，目录容器，蓝色）
• 之后需要在repertory容器内异步加载多个子条目div，避免阻塞页面其余交互操作

但当前实现并未达到预期效果：所有子div会一次性完成加载，阻塞其他操作响应。预期渲染顺序应为：先显示红色explorer容器，再显示蓝色repertory容器，最后子条目div逐个加载渲染。

我制作了简化版示例用于复现问题，示例中的按钮代表加载过程中需要正常响应的其他操作，将循环遍历的数组替换为数据量更大的数组即可直观感受到阻塞问题。

复现代码如下：

class Explorer {
  
  parent;
  rep1;
  rep2;
  
  constructor(){
    this.parent = document.getElementById("parent");

    this.rep1 = [/*some object data*/];
    this.rep2 = [/*same as rep1 except that he's bigger*/];

    this.loadExplorer();
  }
  
  
  loadExplorer() {
    
    // 挂载explorer容器到父节点
    let explorer = document.createElement("div");
    explorer.id = "explorer";
    explorer.classList.add("Explorer");
    this.parent.appendChild(explorer);
    
    // 挂载目录容器到explorer
    let repertory = document.createElement("div");
    repertory.id = "repertory";
    repertory.classList.add("Repertory");
    explorer.appendChild(repertory);
    
    this.loadRep().then(() => console.log("do some stuff after"));
  }
  
  
  async loadRep() {
    
    // 换成数据量更大的rep2就能明显看到阻塞：explorer和repertory会等所有子条目遍历完才渲染
    await this.rep1.map(async entry => {
      
      // 创建子条目div
      let div = document.createElement("div");
      div.id = entry.name;
      div.classList.add("Entry");
      div.innerText = entry.name;
      
      await document.getElementById("repertory").appendChild(div);
    });
  }
  
}

let explorer1 = new Explorer();

代码存在3个核心逻辑问题导致阻塞：

1. Array.map是同步遍历方法，哪怕传入async回调，也不会等待上一个条目处理完再执行下一个，所有DOM创建、插入操作会挤在同一个事件循环周期内全部执行，直接阻塞主线程。
2. appendChild是原生同步DOM操作，本身没有异步能力，给它加await没有任何实际效果，不会主动让出主线程给浏览器做渲染、响应交互。
3. 挂载完explorer和repertory容器后立刻同步执行批量DOM插入，浏览器没有获得重绘的空闲时机，所以两个容器也不会提前显示出来。

首先实现一个主动让出主线程的工具函数，给浏览器留出渲染、响应用户交互的时间，再修正遍历和加载逻辑：

// 工具函数：让出主线程，等待浏览器完成一次渲染/事件响应
const yieldToMain = () => new Promise(resolve => {
  // 优先使用现代浏览器支持的scheduler.yield，降级用setTimeout
  if ('scheduler' in window && 'yield' in window.scheduler) {
    return window.scheduler.yield().then(resolve);
  }
  setTimeout(resolve, 0);
});

基础修复（逐个加载条目） #

修改loadRep方法，用支持异步等待的for...of循环替代map，每插入一个条目就主动让出主线程：

async loadRep() {
  const repertory = document.getElementById("repertory");
  for (const entry of this.rep2) {
    const div = document.createElement("div");
    div.id = entry.name;
    div.classList.add("Entry");
    div.innerText = entry.name;
    repertory.appendChild(div);
    // 插入完成后让出主线程，让浏览器可以响应按钮点击、更新页面渲染
    await yieldToMain();
  }
}

性能优化（分片批量加载） #

如果条目数量极大，逐个加载会导致整体加载速度过慢，可以按固定数量分片，每加载完一批条目再让出一次主线程，平衡加载速度和交互流畅度：

async loadRep() {
  const repertory = document.getElementById("repertory");
  const BATCH_SIZE = 20; // 每批加载20个条目，可根据实际场景调整
  for (let i = 0; i < this.rep2.length; i += BATCH_SIZE) {
    // 用文档片段批量构建DOM，减少重排次数
    const fragment = document.createDocumentFragment();
    const batch = this.rep2.slice(i, i + BATCH_SIZE);
    batch.forEach(entry => {
      const div = document.createElement("div");
      div.id = entry.name;
      div.classList.add("Entry");
      div.innerText = entry.name;
      fragment.appendChild(div);
    });
    repertory.appendChild(fragment);
    // 一批条目加载完成后让出主线程
    await yieldToMain();
  }
}

保证容器优先渲染 #

如果需要确保红、蓝两个容器先显示，再开始加载子条目，可以在调用loadRep之前先让出一次主线程：

loadExplorer() {
  // 原有创建explorer、repertory容器的逻辑保持不变

  // 先让出主线程让容器完成渲染，再开始加载子条目
  yieldToMain()
    .then(() => this.loadRep())
    .then(() => console.log("do some stuff after"));
}

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