HCLonely Blog - 记一次hexo-bilibili-bangumi分时函数渲染优化

在前端页面里，长列表渲染是一个很常见的性能问题。数据量不大时，直接map生成 HTML 再一次性插入 DOM 通常没有明显问题；但当列表变长、模板渲染逻辑变复杂、图片和元信息较多时，这种同步渲染方式就容易占满主线程，导致页面切换、滚动和点击出现明显卡顿。

本文记录一次对hexo-bilibili-bangumi追番页面分页渲染的优化：把原本一次性同步完成的模板渲染，改成在浏览器空闲帧中分批执行，从而降低单帧压力，让页面先保持可交互。

背景

追番页面会先渲染每个分类前 10 条数据，剩余数据通过bangumis.json异步加载。旧实现大致是这样的：

const html = {
  wantWatch: data.wantWatch.slice(10).map((item) => renderItem(item)).join('\n'),
  watching: data.watching.slice(10).map((item) => renderItem(item)).join('\n'),
  watched: data.watched.slice(10).map((item) => renderItem(item)).join('\n')
};

document.querySelectorAll('#bangumi-item1>.bangumi-pagination')[0].insertAdjacentHTML('beforeBegin', html.wantWatch);
document.querySelectorAll('#bangumi-item2>.bangumi-pagination')[0].insertAdjacentHTML('beforeBegin', html.watching);
document.querySelectorAll('#bangumi-item3>.bangumi-pagination')[0].insertAdjacentHTML('beforeBegin', html.watched);

这段代码的问题不在于写法复杂，而在于它把三类数据的模板渲染集中在一个任务里完成。浏览器主线程在执行这段 JavaScript 时，不能同时处理用户输入、样式计算、布局和绘制。如果数据量增加，单次任务耗时变长，就会出现掉帧和交互延迟。

对于博客页面来说，用户最直接的感受不是“渲染总耗时是多少”，而是“页面是不是能立刻响应”。因此优化目标不是把所有 HTML 更快地一次性生成出来，而是把大任务拆小，让浏览器有机会在任务之间处理渲染和输入。

原理

浏览器页面的 JavaScript、样式计算、布局、绘制和用户输入处理大多运行在主线程上。如果一个 JavaScript 任务长时间不结束，浏览器就没有机会进入下一帧，也就无法及时响应滚动、点击和视觉更新。

分时函数的核心思想是：

把一个大任务拆成多个小任务。
每次只执行一部分工作。
当前帧还有空闲时间时多做一点，没有空闲时间时让出主线程。
下一次空闲时继续处理剩余任务。

浏览器提供了requestIdleCallback，它会在主线程空闲时执行回调。回调参数里的deadline.timeRemaining()可以告诉我们当前空闲周期大概还剩多少时间。利用这个信息，可以把长列表渲染拆成多批。

不过requestIdleCallback并不是所有环境都支持，因此实现时还需要准备一个降级方案：如果浏览器不支持，就使用setTimeout延后执行。这样虽然不能精确感知空闲时间，但仍然可以避免在一个同步任务中渲染全部内容。

方法实现

这次优化拆成三步。

1. 封装空闲调度函数

先封装一个runWhenIdle，优先使用requestIdleCallback，否则退化到setTimeout：

function runWhenIdle(callback) {
  if (typeof requestIdleCallback === 'function') {
    requestIdleCallback(callback);
    return;
  }
  setTimeout(() => {
    callback({
      timeRemaining: () => 0
    });
  }, 16);
}

这里的降级实现给了一个timeRemaining()为 0 的 deadline。后面的批处理逻辑会保证即使没有剩余时间，每一轮也至少处理一条数据，避免任务永远无法推进。

2. 复用编译后的模板函数

原来每条数据都直接调用pug.render。如果运行时支持pug.compile，可以先把模板编译成渲染函数，然后每条数据复用这个函数：

function createBangumiPageRenderer() {
  if (hexoBilibiliBangumiOptions.pug && typeof hexoBilibiliBangumiOptions.pug.compile === 'function') {
    const render = hexoBilibiliBangumiOptions.pug.compile(hexoBilibiliBangumiOptions.pugTemplate);
    return function hexoBilibiliBangumiRenderPage(item) {
      return render({
        item,
        ...hexoBilibiliBangumiOptions.pugOptions
      });
    };
  }
  return function hexoBilibiliBangumiRenderPage(item) {
    return hexoBilibiliBangumiOptions.pug.render(hexoBilibiliBangumiOptions.pugTemplate, {
      item,
      ...hexoBilibiliBangumiOptions.pugOptions
    });
  };
}

这一步不是分时渲染的必要条件，但它能减少每条数据的重复开销。长列表优化通常要同时关注两个方向：减少总计算量，以及避免单次计算阻塞太久。

3. 在空闲帧中分批渲染

核心批处理逻辑如下：

function renderItemsInIdle(items, renderPage, onComplete) {
  const html = [];
  let index = 0;

  function renderBatch(deadline) {
    let renderedInFrame = false;
    while (index < items.length && (!renderedInFrame || deadline.timeRemaining() > 0)) {
      html.push(renderPage(items[index]));
      index++;
      renderedInFrame = true;
    }

    if (index < items.length) {
      runWhenIdle(renderBatch);
      return;
    }

    onComplete(html.join('\n'));
  }

  runWhenIdle(renderBatch);
}

这里有一个细节：循环条件不是简单的deadline.timeRemaining() > 0，而是：

!renderedInFrame || deadline.timeRemaining() > 0

这样可以保证每个空闲回调至少渲染一条数据。否则在降级方案里timeRemaining()一直是 0，任务就会被不断重新调度，却不会真正处理任何条目。

最后，把三个分类组织成任务队列，按顺序分批渲染并插入到对应分页按钮之前：

function renderTasksInIdle(tasks) {
  const renderPage = createBangumiPageRenderer();
  let taskIndex = 0;

  function runNextTask() {
    if (taskIndex >= tasks.length) return;

    const task = tasks[taskIndex];
    taskIndex++;

    renderItemsInIdle(task.items, renderPage, (html) => {
      document.querySelectorAll(task.selector)[0].insertAdjacentHTML('beforeBegin', html);
      runNextTask();
    });
  }

  runNextTask();
}

调用时只需要传入数据和目标选择器：

renderTasksInIdle([
  {
    items: data.wantWatch.slice(10),
    selector: '#bangumi-item1>.bangumi-pagination'
  },
  {
    items: data.watching.slice(10),
    selector: '#bangumi-item2>.bangumi-pagination'
  },
  {
    items: data.watched.slice(10),
    selector: '#bangumi-item3>.bangumi-pagination'
  }
]);