浏览器最多能渲染多少像素？

问题背景

在开发长页面或虚拟滚动组件时，我们可能会好奇：浏览器对元素高度的渲染是否存在上限？如果存在，这个上限是多少？

测试结论

经过实际测试发现，浏览器对元素最大高度的限制公式为：

最大高度 = 2 ^ (26 - window.devicePixelRatio)

不同设备像素比下的最大高度

devicePixelRatio = 1（普通显示器）：2^25 = 33,554,432 像素
devicePixelRatio = 2（高清屏/Retina）：2^24 = 16,777,216 像素
devicePixelRatio = 3：2^23 = 8,388,608 像素

测试 Demo

下面是一个简单的测试页面，可以验证浏览器的渲染限制：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浏览器渲染像素测试</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div style="height: 100vh; overflow: auto;">
      <!-- 2^24 = 16,777,216 像素（适用于 devicePixelRatio = 2 的设备） -->
      <div style="height: 16777216px; background: greenyellow;"></div>
      <h1>底部，看不到</h1>
    </div>
  </body>
</html>

实际应用建议

在实际开发中需要注意：

虚拟滚动：对于超长列表，必须使用虚拟滚动技术，避免创建超高元素
无限滚动：在实现无限滚动时，要注意累积高度不要超过浏览器限制