切换隐藏小部件上回流性能的最佳选择

我有一个关于回流焊性能的问题。

考虑这个 HTML ：

<html>
<head>
    ...
</head>
<body>
    all HTML soup here
    ...
    <div class="widget-one" id="widget-one">
        ...
    </div>
    <div class="widget-two" id="widget-two">
        ...
    </div>
    <div class="widget-three" id="widget-three">
        ...
    </div>
    <nav>
        <a class="widget-one-anchor" href="#widget-one">widget one</a>
        <a class="widget-two-anchor" href="#widget-two">widget two</a>
        <a class="widget-three-anchor" href="#widget-three">widget three</a>
    </nav>
</body>
</html>

每

5 分钟发出一次 XHR 请求，并向我显示我必须显示或隐藏的"小部件 + 锚点"。

例如，如果我必须隐藏"小

部件-二"，我也必须隐藏"小部件-二锚"。这适用于每个小部件 + 关联锚点或任何其他关联的 DOM 元素。

我目前有两种选择来实现这一点（如果您有更好的解决方案，我将不胜感激）。

使用 JavaScript：对于每个"widget"：隐藏或显示它，隐藏或显示关联小部件 DOM 元素（在这种情况下，锚点）。
使用 JavaScript 和 CSS：在元素上添加一个类<body>例如"hide-widget-two"，它隐藏了小部件和所有通过CSS关联小部件DOM元素（在本例中为锚点）依存。

例如：

.hide-widget-two .widget-two,
.hide-widget-two .widget-two-anchor {
    display:none;
}

我选择第二个，因为可维护性：使用 CSS 而不是 JavaScript 更容易隐藏或显示许多元素。如果明天我必须添加另一个关联小部件 DOM 元素，我只需要更新我的 CSS 文件。

因为我在这篇文章中看到了最小化浏览器重排，在 DOM 树中更改一个级别可能会导致树的每个级别都发生变化，那么哪个选择更好？

在正文上切换类，可能会导致整个页面重排？或者在每个项目上切换样式显示并导致该项目的每个 DOM 树子项重排？

测试一下。这是对任何实际性能问题的唯一有效回答。您的答案取决于许多事情，真正知道什么对您更好的唯一方法是在实际页面中运行这些命令中的每一个，并检查开发工具时间线中发生的情况。这实际上取决于页面的结构以及您显示和隐藏的各个元素。

另请注意，您的类名在主体示例上使用的后代选择器匹配起来非常慢，因此这是另一个混淆因素。创建一个小型测试，每秒交替运行每个效果 5-10 次，并查看绘制、布局等时间。请注意，这在不同的浏览器上也会有所不同。查看这个和这个，尤其是这个，以解决工具的性能问题。这是关于如何处理这些问题的良好入门，不要只是寻求性能建议，而是发现适合您的特定方案的最佳代码。浏览器在变化，性能建议也会改变，所以不要使用半生不熟的建议来限制网站的性能。

似乎你对性能要领有足够的了解，知道要改变什么，所以去改变东西，测试它，并获得你的问题的答案，除了你之外没有人能给出。

据我所知，回流逻辑完全依赖于浏览器，尽管我认为应用 1 个类（甚至应用于正文）必须比应用 2 个类（对小部件和锚点）更快。但是您可以测试这两种方法，并使用浏览器的开发工具（例如：safari 时间轴）或某些插件（例如：chrome 速度跟踪器）测量回流时间。

相关内容

最新更新

热门标签：