Question

我很好奇是否期望在隐藏绝对定位的元素时进行重排的行为？

考虑以下示例代码：

<html>
    <head>
        <style>
            .float {
                position: absolute;
                background-color: #E0E0E0;
                padding: 5;
                left: 100px;
                top: 100px;
            }
        </style>
        <script>
            function toggle() {
                var float = document.getElementById("float");
                var style = float.style;

                if (style.display == "none") {
                    style.display = "block";
                } else
                    style.display = "none";
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="toggle();">Click to toggle!</a>
        <div id="float" class="float" style="display:none">Floating div</div>
    </body>
</html>

当我在Chrome开发者工具中查看时间轴标签时，我看到以下内容：

Dev Chrome Tool Timeline

第23行对应style.display = "none";，我的期望是不需要回流。

我错了吗？还是我误解了Timeline的结果？有没有更好的方法呢？

谢谢！

Answer 1

有回流焊。当您更改元素的显示时，浏览器需要执行布局操作。也许你会混淆布局传递的想法，布局传递会影响整个文档。在您的情况下，我认为布局仅影响.float元素。您可以在布局栏中看到它单击。它会告诉你布局的范围。

与看起来相反，隐藏绝对定位元素可能导致整个页面重排。例如，如果定位元素比浏览器视口更高或更宽，则会发生这种情况。在这种情况下，隐藏它可能会导致滚动条消失，从而导致整个文档的重排。

每个浏览器都有自己的方法来确定需要或不需要整个文档重排，因此在浏览器中有效的方法可能不适用于另一个浏览器。你在这里有一篇好文章：Introducing layout boundaries

编辑：正如@ xotic750所说，你可以避免重排设置的可见性：隐藏。这会导致浏览器避免绘画，但对于布局引擎，它会在那里。这样，当您显示/隐藏它时，它不会是重排。不足之处？每次因其他原因而发生重排时，不可见div的内容都将成为布局过程的一部分。如果div的DOM树很简单，那么玩可见性就更好了。但是如果div包含很多对象，特别是表，我认为你应该使用display：none。当然，这也取决于div应该可见或隐藏的时间。

用绝对定位隐藏DIV会导致回流

1 个答案: