如何不阻塞主线程提前渲染content-visibility: auto元素避免滚动延迟

• 核心需求：实现页面快速加载的同时，用户向下滚动时不会遇到内容渲染前的可见延迟
• 场景说明：页面为包含大量<dl>元素的大型单页HTML，属于数学笔记类内容，内部包含大量KaTeX渲染的复杂公式，布局渲染开销极高

现有基础实现 #

为加快首屏加载速度，已经给<dl>元素设置了content-visibility: auto，对应CSS代码如下：

dl {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

遇到的问题：由于<dl>内部内容复杂度很高，当用户滚动时，<dl>进入视口才触发渲染会产生明显卡顿。

优化目标 #

• 页面加载完成后、用户滚动到对应位置前，提前渲染所有屏幕外的<dl>
• 渲染过程不阻塞主线程，滚动操作始终保持响应
• 从顶部的<dl>开始依次将其content-visibility属性设置为visible，每渲染完一个<dl>就让出主线程响应用户交互，保证单次阻塞主线程的时长不超过50ms

待优化原始JS代码 #

document.querySelectorAll('dl').forEach(function(dlElement, currentIndex, listObj) { dlElement.style['content-visibility'] = 'visible' });

优化实现方案 #

通过时间切片+浏览器空闲调度的方式实现需求，利用requestIdleCallback在浏览器空闲时段执行渲染任务，同时做超时控制保证单次执行不超过50ms：

const dlElements = Array.from(document.querySelectorAll('dl'));
let currentIndex = 0;

function renderNextDl(deadline) {
  // 只要还有未处理的dl，且当前空闲时段剩余时间大于1ms，就继续处理
  while (currentIndex < dlElements.length && deadline.timeRemaining() > 1) {
    const dl = dlElements[currentIndex];
    dl.style.contentVisibility = 'visible';
    currentIndex++;
  }
  
  // 还有未处理的元素，等待下一个空闲时段继续执行
  if (currentIndex < dlElements.length) {
    requestIdleCallback(renderNextDl, { timeout: 50 });
  }
}

// 页面完全加载后再启动预渲染逻辑，避免影响首屏加载速度
window.addEventListener('load', () => {
  requestIdleCallback(renderNextDl, { timeout: 50 });
});

方案说明 #

• 利用requestIdleCallback的deadline.timeRemaining()获取当前空闲时段的剩余可用时间，避免占用超过浏览器分配的空闲时间，不会阻塞主线程的交互响应
• 配置timeout: 50保证就算浏览器长期处于繁忙状态，最多每50ms也会执行一次渲染任务，避免预渲染长时间停滞
• 等待页面load事件触发后再启动预渲染逻辑，不会占用首屏加载的主线程资源，不影响初始加载速度
• 按从上到下的顺序依次处理<dl>元素，符合用户正常滚动的浏览顺序，优先保证用户可能先浏览到的内容提前渲染完成

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