浏览器会解析/预渲染/绘制display:none的HTML吗？

Question

浏览器会解析/预渲染/绘制display:none的HTML吗？

12

我希望防止浏览器在未准备好显示“隐藏”的HTML之前进行解析、预渲染或绘制，以便快速显示最小的内容集合，让浏览器只做渲染可见部分的工作。

我正在寻求初始页面加载的最大渲染/绘制速度。

我的当前HTML：

<div id="stuff">
    <div class="item">
        <div class="visible">
            <h1>Item 1</h1>
            <a class="details" href="javascript:void(0)">Show more</a>
        </div>
        <div class="invisible">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit mi, bibendum a imperdiet sed, imperdiet id leo. Mauris vulputate tellus id metus euismod, eget gravida libero ultricies.</p>
            <img src="/img/1.jpg" alt="" />
        </div>
    </div>
    <div class="item">
        <div class="visible">
            <h1>Item 2</h1>
            <a class="details" href="javascript:void(0)">Show more</a>
        </div>
        <div class="invisible">
            <p>Vestibulum tristique fermentum dui, et pretium elit. Ut purus lacus, mattis vitae leo vel, congue mollis mi. Aliquam erat volutpat. Vestibulum luctus, purus ut mattis ullamcorper, justo odio ultrices dolor, nec porta purus turpis sed orci. Aliquam orci sapien, dictum sed facilisis molestie, tempus in orci.</p>
            <img src="/img/2.jpg" alt="" />
        </div>
    </div>

    ... and so on...
</div>

实际的“隐形”内容比这个例子中的内容重要得多，每页有50个“项目”。

我的外部CSS：

.invisible {
    display: none;
}

在外部样式表中使用 display: none 是否可以防止浏览器预渲染隐藏的内容？

有没有更好的方法来实现我的目标？我应该在 div 上使用内联样式 style="display:none" 吗？

谢谢！

- Steven Moseley

你有没有测量在HTML包含不可见内容时的渲染速度，然后去掉HTML中的不可见内容后再进行测量？差别很大吗？要注意过早优化等问题。 - Paul D. Waite

您可以使用Web服务来实现隐形部分，这样在单击“显示更多”时才会呈现，否则不会呈现。 - Bip

5

无论在何处/如何使用，“display none”都不会减少加载时间。 - David Nguyen

@DavidNguyen - 请看下面的答案，我发现你是错的。display:none会阻止CSS应用于包含隐藏div内部的元素。这实际上可以显著增加感知加载时间。 - Steven Moseley

@StevenMoseley 加载时间和渲染时间是两个不同的概念。 - David Nguyen

显示剩余2条评论

2个回答

1

你能避免一开始就建立不可见的HTML吗？你会在某个时候设置 .invisible { display: block } 吗？

我发现 display:none 并不像你期望的那样对性能有很大帮助。最好只在用户需要时通过无限滚动或分页将额外的元素添加到屏幕上。

如果不需要查看，尽量避免将HTML放入页面中，并仅在1次添加所需内容以最小化DOM操作。

用户是否可能查看每页的所有50项？

- Pete

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ennui · Accepted Answer

display: none 无法阻止浏览器解析/加载相关标记和资源（史蒂文·莫斯利的编辑：经过测试，发现实际上display:none将阻止浏览器对HTML进行绘制，即不会将CSS应用于隐藏div内部的元素，并且只会执行解析HTML以构建DOM，这实际上会提高性能）。它只是在其display值改变之前不作为页面流的一部分呈现。通常情况下，display: none和visibility: hidden对页面加载时间几乎没有影响。使用display: none进行优化/性能的主要途径是有选择地选择何时显示它，因为那会触发页面内容的重新布局/重新渲染，即使在非常复杂的应用程序中也通常是微不足道的差异。

如果你想等到需要时再加载内容，根本就不要包含它（或包含空的

占位符），然后使用AJAX在页面加载后从服务器获取所需内容并使用JS将其添加到页面上。jQuery通过其内置的AJAX函数使这变得非常简单。