Question

我对回流表演有疑问。

考虑这个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元素。

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

使用JavaScript：为每个“窗口小部件”：隐藏或显示它并隐藏或显示关联窗口小部件DOM元素（在这种情况下，锚）。
使用JavaScript和CSS：在<body>元素上添加一个类，例如隐藏窗口小部件的'hide-widget-two'一切通过CSS关联widget小部件（在本例中为锚点）依赖性。

例如：

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

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

因为我在本文Minimizing browser reflow上看到，在DOM树中更改一个级别会导致树的每个级别发生更改，哪个选项更好？

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

Answer 1

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

另请注意，您的类名在体上示例使用的后代选择器匹配起来很慢，因此这是另一个混淆因素。创建一个小测试，您可以每秒5-10次交替运行每个效果，并查看绘画，布局等的时间。请注意，这在不同的浏览器上也会有所不同。查看this和this以及especially this以解决工具的性能问题。 And this是您应该如何解决这些问题的一个很好的入门读物，不仅仅是寻求性能建议，发现您的特定场景的最佳代码。浏览器发生变化，性能建议发生变化，所以不要自行使用半生不熟的建议来限制网站的性能。

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

Answer 2

据我所知，reflow逻辑完全取决于浏览器，虽然我认为应用1类（甚至是正文）必须比应用2类（to widget和anchor）更快。但您可以使用浏览器的开发工具（例如：safari时间轴）或某些插件（例如：chrome speed tracer）测试这两种方法并测量回流时间。

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

2 个答案: