我有一个页面需要大量垂直滚动和数千个DOM元素。为了提高性能，我考虑将视口上方和下方的div内容设置为display: none;，也就是那些不可见的div（同时保持它们的高度，显然）：
display: none;会触发回流并可能产生相反的效果:
然而，最近的答案（不幸的是，它似乎更像是一条评论甚至是一个问题）声称将显示设置为none会触发回流，这与您想要避免回流的目的完全相反。什么也不做不会触发回流。将可见性设置为hidden也不会触发回流。但是，什么也不做更容易。
display: none;是像Facebook这样的网站当前使用的策略，其中垂直滚动几乎是无限的。display: none;应用于视口上方/下方的div是否可以改善性能，还是会降低性能？或者它没有影响？"display: none"属性会将该元素从文档流中移除。"display: none"属性将是一项昂贵的操作，因此会降低性能！position: absolute等情况，已经从自然和自由文档流中移除的元素，其显示属性可以设置为none并返回，而不会在文档主体上触发重新流动。
display:none会使DOM保留在内存中。通常，渲染是昂贵的部分，但这取决于更改时必须渲染多少元素。如果重新绘制操作仍然需要检查每个元素，则可能看不到巨大的性能提升。以下是要考虑的其他选项。display:none，因为解析JavaScript通常比大型绘图更有效率。transform: translate3d(0,0,0);来强制启用GPU加速。will-change:scroll-position;。content-visibility:auto是一种非常有用的属性，专门设计用于解决这类问题。以下是更多背景信息。
编辑（2021年4月）现在可在Chrome 85+、Edge（Chromium）85+和Opera 71+中使用。我们仍在等待Firefox支持，但Can I Use显示它有65%的覆盖率。display: none;可以减少RAM使用量
- 不显示的元素不受布局变化的影响，因此在这方面没有（或非常少的）性能成本
- Firefox 在处理大量元素时效果更好（约x50）<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
.testEl {
width: 100%;
height: 10px;
}
</style>
</head>
<body>
<main id="main"></main>
</body>
<script>
// firefox Max
// const elementCount = 12200000;
// chrome Max
const elementCount = 231000;
const main = document.getElementById("main");
const onlyShowFirst1000 = true;
let _content = ""
for (let i = 0; i < elementCount; i++) {
_content += `<div class="testEl" style="background-color: hsl(${(Math.random() * 360)|0}, 100%, 50%); display: ${!onlyShowFirst1000 || i < 1000 ? "block" : "none"}"></div>`;
}
main.innerHTML = _content;
const addOneEnd = () => {
const newEl = document.createElement("div");
newEl.classList.add("testEl");
newEl.style.backgroundColor = `hsl(${(Math.random() * 360)|0}, 100%, 50%)`
requestAnimationFrame(() => {
main.appendChild(newEl);
})
};
const addOneBeginning = () => {
const newEl = document.createElement("div");
newEl.classList.add("testEl");
newEl.style.backgroundColor = `hsl(${(Math.random() * 360)|0}, 100%, 50%)`
requestAnimationFrame(() => {
main.insertBefore(newEl, main.firstChild);
})
};
const loop = (front = true) => {
front ? addOneBeginning() : addOneEnd();
setTimeout(() => loop(front), 100);
};
</script>
</html>
onlyShowFirst1000标志选项仅显示前1000个元素。当显示所有元素时，Firefox 允许最多 ~12200000 个元素（使用我10GB的RAM），而Chrome 允许最多 ~231000 个元素。 +----------+----------+-------------+
| false | true | reduction % |
+---------+----------+----------+-------------+
| Chrome | 415,764k | 243,096k | 42% |
+---------+----------+----------+-------------+
| Firefox | 169.9MB | 105.7MB | 38% |
+---------+----------+----------+-------------+
content-visibility 属性告诉浏览器哪些元素不必呈现。当您有成千上万个需要滚动、交互等的DOM元素时，以下两个技巧可以提高性能。
尝试手动管理前端框架提供的绑定。前端框架可能需要进行很多额外的处理才能实现您所需的简单数据绑定。它们对于一定数量的DOM元素是有效的。但如果您的情况特殊，超过了平均情况下的DOM元素数量，则最好手动绑定并考虑周围环境。这可以确保消除任何延迟。
在视口范围内和周围缓存DOM元素。如果您的DOM元素代表表格中的数据，则使用限制条件获取它们并仅呈现所获取的内容。用户滚动操作应使获取和呈现向上或向下进行。
仅仅隐藏元素肯定不能解决您由于具有数千个DOM元素而导致的性能问题。即使您无法看到它们，它们也会占用DOM树和内存。只有浏览器不必绘制它们。
以下是一些文章：
https://codeburst.io/taming-huge-collections-of-dom-nodes-bebafdba332 https://areknawo.com/dom-performance-case-study/
display: none;和性能关系的明确解释。 - user12273078display：none，当它确定容器的框超出了视口框时。 (IIIRC至少一些最近的浏览器是这样做的)。所以你可能看不到什么区别，或者可能更好，因为它不必计算框何时离开，或者可能更糟，因为你的实现将比他们的不太优化。这个答案中的建议是你应该关注的，将优化留给浏览器开发人员。 - Kaiidovisibility:hidden和display:none是两种完全不同的情况。前者可以完全忽略节点内部的所有内容，而对于后者，浏览器仍然必须检查每个内部元素是否可能为visibility:visible。 - Kaiidodisplay: none;和性能关系的清晰解释。 - user12273078display: none。 - Kaiido
display: none并不会保留元素的高度。display: none将元素完全从流中移除。visibility: hidden将使它们不显示，但在布局中保留其位置和尺寸。如果Facebook正在这样做，他们一定有一个不是display：none的元素来维护高度。但是他们很可能在这些元素内部使用display：none的包装器，这样当重新流动发生时，这些元素中可能存在的（可能复杂的）布局逻辑就不必再次发生了。 - T.J. Crowderreact-virtualized是一个不错的解决方案：https://bvaughn.github.io/react-virtualized/#/components/Collection - Lucas D