使用:first选择器插入目录时如何避免布局偏移？

1. 预占位容器法（最直接有效） #

提前在目标位置（.post-body p:first之前）静态插入一个空的占位容器，给它设置和目录收起状态一致的固定高度，初始设为不可见但保留空间。之后将目录容器插入到这个占位容器内部，通过控制占位容器的高度来适配目录的收展状态：

• 静态占位容器代码：

  <div class="toc-placeholder" style="height: 120px; visibility: hidden;"></div>
  

• JS插入目录的代码修改为：

  $('.toc-placeholder').append(tocContainer);
  

• 收展切换时的逻辑：

  function toggleToc() {
    const placeholder = $('.toc-placeholder');
    if (tocIsExpanded) {
      // 展开时让占位容器高度自适应，同时显示内容
      placeholder.css({ height: 'auto', visibility: 'visible' });
    } else {
      // 收起时恢复固定高度，保持占位
      placeholder.css({ height: '120px', visibility: 'visible' });
    }
  }
  

这样不管目录是收是展，占位容器始终占据对应空间，不会触发页面布局偏移。

2. 减少动态DOM操作的影响 #

如果必须用JS生成目录，不要等到页面加载完成后再插入元素：

• 先在内存中构建好tocContainer，并设置好收起状态的样式（固定高度、内容隐藏）；
• 再一次性将其插入到预占位容器中，避免多次DOM操作引发的重排。

3. CSS属性优化布局稳定性 #

给目录容器和占位容器添加以下CSS属性，帮助浏览器限制布局变化的影响范围：

.toc-placeholder, .toc-container {
  contain: layout paint size;
  overflow: hidden;
}

contain属性会告诉浏览器，这个容器的布局、绘制和尺寸变化只会影响自身内部，不会触发整个页面的重排重绘，进一步降低布局偏移的概率。

4. 服务器端预渲染（最优解） #

如果条件允许，直接在服务器端渲染页面时就把目录容器放到目标位置，初始设置为收起状态（固定高度）。这样页面初始布局就包含了目录的占位空间，完全避免了JS动态插入元素导致的布局偏移问题。

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