3

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

考虑到这个 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 请求，并显示我必须显示或隐藏的“小部件 + 锚”。

例如，如果我必须隐藏“widget-two”，我还必须隐藏“widget-two-anchor”。这适用于每个小部件 + 关联锚点或任何其他关联 DOM 元素。

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

  1. 使用 JavaScript：对于每个“小部件”：隐藏或显示它并隐藏或显示 associates-widget DOM 元素（在本例中为锚点）。

  2. 使用 JavaScript 和 CSS： 在元素上添加一个类<body>，例如“hide-widget-two”，它通过 CSS 依赖隐藏小部件和所有 associates-widget DOM 元素（在本例中为锚点）。

例如 ：

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

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

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

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

4

2 回答 2

3

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

另请注意，您的 class-name-on-the-body 示例使用的后代选择器的匹配速度非常慢，因此这是另一个混​​淆因素。创建一个小测试，您可以每秒交替运行每个效果 5-10 次，并查看绘制、布局等的时间。注意这在不同的浏览器上也会有所不同。看看这个和这个，尤其是这个，用于解决工具的性能问题。这是关于如何解决这些问题的很好的入门书，不要只是寻求性能建议，而是为您的特定场景发现最佳代码. 浏览器改变了，性能建议也改变了，所以不要对自己使用不成熟的建议来限制您的网站的性能造成伤害。

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

于 2013-11-20T20:18:14.830 回答
1

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

于 2013-11-16T11:28:06.437 回答