页面长列表滚动白屏本质是新进入视口的内容未及时渲染，解决关键在于“保可见”：采用虚拟列表（仅渲染可视区+缓冲项）、transform定位、预计算高度、requestAnimationFrame批处理及骨架屏兜底。

页面长列表滚动时出现白屏，本质不是“滚动卡了”，而是可视区域内容没及时渲染出来——用户快速滑动时，新进入视口的列表项还没生成、定位或绘制，就出现了短暂空白。解决它，关键不在“防卡顿”，而在“保可见”。核心思路是：用最少 DOM + 最快定位 + 零回流重排，让每一帧都稳稳画出内容。

只渲染当前可见区域，彻底砍掉无效 DOM

白屏常发生在滚动加速阶段，因为浏览器还在忙于创建、样式计算、布局大量不可见节点。虚拟列表就是为此而生：

• 不渲染全部 10000 条数据，只渲染当前视口内 + 上下各 3～5 条缓冲项（通常共 20～40 个 DOM）
• 用一个空 div 撑开总高度：style.height = `${data.length * itemHeight}px`，保证滚动条存在且比例准确
• 滚动时只更新 scrollTop 对应的起始索引，动态替换内容区域，不操作整个容器 innerHTML

用 transform 替代 top/padding 定位，避免强制同步布局

如果靠 padding-top 或 top 移动内容区，每次滚动都会触发浏览器检查布局（reflow），造成卡顿甚至丢帧。正确做法是：

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。 术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

• 把所有可见项包裹在一个
  中
• 用 transform: translateY(${startIndex * itemHeight}px) 整体偏移，GPU 加速，不触发布局
• 配合 will-change: transform 提前告知浏览器该元素将动画，提升合成效率

预计算 + 节流 + requestAnimationFrame，守住主线程

滚动事件高频触发，若每次都在回调里算索引、查数组、建 DOM，主线程立刻过载。必须分层控制：

• 在 scroll 事件中只做最轻量的事：读 scrollTop，存入变量，然后 requestAnimationFrame 批处理渲染
• 避免在滚动中调用 getBoundingClientRect() 或 offsetHeight —— 这些会强制同步布局
• 若列表项高度不固定，用 Pretext 等纯 JS 文本测量库预计算高度，不依赖临时 DOM 插入

加缓冲区 + 骨架占位，从感知上消灭白屏

即使逻辑极快，极端快速滑动仍可能漏帧。用户体验层面要兜底：

• 缓冲区不止上下各 3 条，可设为 8～10 条，确保滚动惯性期间总有内容待命
• 在内容区未就绪前，显示轻量骨架节点（如带 background-color 的 div），宽度/高度与真实项一致，不闪跳
• 首屏加载时，先渲染骨架 + 占位高度，再异步填充数据，避免“突然整块弹出”带来的视觉中断