Chrome中CSS Grid更新文本引发滚动卡顿的问题求解

这个问题确实是Chrome 67版本特定的渲染行为导致的——当你每秒更新ticker的内容时，DOM重排会干扰滚动条的拖动状态，而Edge的渲染引擎对这类场景的处理逻辑更友好。下面是几个经过验证的解决方案：

方案1：优化DOM更新逻辑，减少性能开销 #

频繁的DOM查询和innerHTML操作会触发不必要的HTML解析和重排，这是导致滚动被打断的核心原因之一。我们可以通过两个小优化来缓解：

• 提前缓存ticker元素的引用，避免每次计时器触发都重新查询DOM
• 使用textContent替代innerHTML更新文本，因为textContent仅处理纯文本，性能开销更低

修改后的代码如下：

<html>
<body style="margin:0pt;">
  <div style="height:100vh;overflow:hidden;display:grid;grid-template-areas:'topbar' 'body'">
    <div style="grid-area:topbar;background-color:lightblue">
      This is a fixed top bar with ticker: 
      <span id="ticker">0</span>
    </div>
    <div style="grid-area:body;font-size:200pt;overflow:auto;">
      Try and scroll down! a a a a a a a a a a a a a a a a a
    </div>
  </div>
  <script type="text/javascript">
    // 缓存ticker元素，避免重复查询DOM
    const tickerElement = document.getElementById("ticker");
    let tickerCount = 0;
    
    setInterval(() => {
      tickerCount++;
      // 使用textContent更新纯文本，性能更优
      tickerElement.textContent = tickerCount;
    }, 1000);
  </script>
</body>
</html>

方案2：用will-change告诉浏览器优化滚动元素 #

给滚动容器添加will-change: scroll-position属性，让浏览器提前知道这个元素会频繁滚动，从而分配专门的渲染资源，减少DOM更新对滚动状态的干扰：

只需修改滚动容器的样式：

<div style="grid-area:body;font-size:200pt;overflow:auto;will-change: scroll-position;">

方案3：分离滚动容器与更新元素的渲染上下文 #

如果前两种方案效果不够理想，可以将顶部栏设置为固定定位，让它脱离滚动容器的渲染上下文——这样顶部栏的DOM更新就不会影响滚动容器的重排，彻底避免滚动被打断的问题：

调整后的完整代码：

<html>
<body style="margin:0pt;">
  <!-- 固定定位的顶部栏，脱离文档流 -->
  <div style="position:fixed;top:0;left:0;right:0;background-color:lightblue;padding:8px;">
    This is a fixed top bar with ticker: 
    <span id="ticker">0</span>
  </div>
  <!-- 滚动容器设置margin-top避开顶部栏，确保内容不被遮挡 -->
  <div style="margin-top:40px;font-size:200pt;overflow:auto;height:calc(100vh - 40px);">
    Try and scroll down! a a a a a a a a a a a a a a a a a
  </div>
  <script type="text/javascript">
    const tickerElement = document.getElementById("ticker");
    let tickerCount = 0;
    
    setInterval(() => {
      tickerCount++;
      tickerElement.textContent = tickerCount;
    }, 1000);
  </script>
</body>
</html>

这些方案都是从减少DOM重排影响、优化浏览器渲染逻辑的角度出发，你可以根据自己的实际布局需求选择最合适的一种。

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