在TamperMonkey脚本中如何强制滚动加载页面完全加载以重排版？

一、强制触发所有滚动加载内容 #

因为页面是滚动触发列表内容加载，而非图片懒加载，核心思路是模拟逐步滚动，让页面把所有内容都拉取渲染出来：

• 逐步滚动+等待加载：别直接跳到底部，分多次小幅度滚动，每次滚动后给页面留加载时间。用异步函数实现的话，示例如下：

async function loadAllContent() {
  let lastScrollHeight = document.body.scrollHeight;
  while (true) {
    window.scrollTo(0, document.body.scrollHeight);
    // 等待500ms让内容加载，可根据页面实际加载速度调整时长
    await new Promise(resolve => setTimeout(resolve, 500));
    const newScrollHeight = document.body.scrollHeight;
    // 滚动高度不再变化，说明所有内容都加载完了
    if (newScrollHeight === lastScrollHeight) break;
    lastScrollHeight = newScrollHeight;
  }
}

• 用DOM变化监听替代固定等待：如果页面加载内容时会更新特定容器的子元素，用MutationObserver监听更可靠，不用猜等待时间：

function waitForAllContentLoaded(containerSelector) {
  return new Promise(resolve => {
    const container = document.querySelector(containerSelector);
    if (!container) return resolve();
    
    const observer = new MutationObserver((mutations) => {
      // 检查是否还有新节点被添加
      const hasNewNodes = mutations.some(m => m.addedNodes.length > 0);
      if (!hasNewNodes) {
        observer.disconnect();
        resolve();
      }
    });
    
    observer.observe(container, { childList: true, subtree: true });
    // 先触发一次滚动加载
    window.scrollTo(0, document.body.scrollHeight);
  });
}

二、等待DOM空闲后执行重排版 #

等所有内容加载完，还要确保浏览器处于空闲状态再做重排版，避免冲突：

• 用requestIdleCallback：这个API会在浏览器没紧急任务时执行回调，适合做重排版这类非紧急操作：

// 先加载完所有内容，再等空闲时重排版
loadAllContent().then(() => {
  requestIdleCallback(() => {
    // 这里写你的重排版逻辑，比如调整flexbox布局、修改样式等
    rearrangePage();
  });
});

• 结合页面加载事件：如果页面还有其他资源要加载，可以先等基础资源就绪再触发全量加载：

document.addEventListener('DOMContentLoaded', async () => {
  await loadAllContent();
  // 可选：等所有资源（比如样式、脚本）加载完成
  await new Promise(resolve => window.addEventListener('load', resolve));
  requestIdleCallback(rearrangePage);
});

三、避免跳底部导致中间内容未加载 #

直接跳底会跳过中间的滚动触发逻辑，导致内容漏加载，解决办法是先加载完全部内容，再定位到底部：

• 不要直接用window.scrollTo(0, document.body.scrollHeight)跳底，改成先执行全量加载：

async function scrollToBottomAfterLoad() {
  await loadAllContent();
  window.scrollTo(0, document.body.scrollHeight);
}

• 如果页面有锚点或按钮跳底，修改点击事件，先加载内容再跳转：

document.querySelector('#bottom-btn').addEventListener('click', async (e) => {
  e.preventDefault();
  await loadAllContent();
  window.scrollTo(0, document.body.scrollHeight);
});

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