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

问题背景

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

测试结论

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

最大高度 = 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

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

实际应用建议

在实际开发中需要注意：

虚拟滚动：对于超长列表，必须使用虚拟滚动技术，避免创建超高元素

无限滚动：在实现无限滚动时，要注意累积高度不要超过浏览器限制