浏览器是否会解析/预渲染/绘制显示：无 HTML？答案

【问题标题】：Will the browser parse / pre-render / paint display:none HTML?浏览器是否会解析/预渲染/绘制显示：无 HTML？
【发布时间】：2013-10-10 07:27:06
【问题描述】：

我想阻止浏览器执行解析和预渲染或绘制一些“隐藏”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" 吗？

谢谢！

【问题讨论】：

你有没有测量过HTML包含你的不可见内容时的渲染速度，然后在将不可见内容从HTML中取出后进行测量？有很大的不同吗？当心过早的优化等等。
visibility:hidden 不会阻止元素渲染，还是我在编造东西？
不可见的部分可以使用web service，让这个部分在点击show more时渲染，否则不渲染
@tymeJV：浏览器仍然必须考虑元素的一切，就好像它是可见的一样，并确保它周围的一切都根据这些计算流动。它不能只是跳过渲染元素并收工。一个简单的实现甚至可能将元素预渲染为正常然后将其变为不可见，虽然这可能是一个允许的实现，但它显然也是一种资源浪费。
不显示，无论在哪里/如何都不会减少加载时间

标签： html css dom browser

【解决方案1】：

display: none 不会阻止浏览器解析/加载该标记和相关资源（Steven Moseley 编辑：对此进行了测试，发现 display:none 实际上会阻止浏览器绘制 HTML，即将 CSS 应用于元素在隐藏的 div 中，并且只会做解析 HTML 以构造 DOM 的工作，这实际上会带来性能优势）。在其display 值更改之前，它根本不会作为页面流的一部分呈现。一般来说display: none 和visibility: hidden 对页面加载时间几乎没有影响。使用display: none 进行优化/性能的主要场所涉及有选择地选择何时显示它，因为这会触发页面内容的重排/重新呈现，即使这在所有非常复杂的应用程序中通常都可以忽略不计。

如果您想等到需要时再加载内容，请不要包含它（或包含空的 div 占位符），然后在页面加载后使用 AJAX 从服务器获取内容并添加它到带有 JS 的页面。 jQuery 通过其内置的 AJAX 函数使这变得非常简单。

【讨论】：

谢谢，我就是这么想的，但不幸的是，AJAX 目前不是一个选项。
@StevenMoseley 啊，太糟糕了。在这种情况下，我会说您可能不走运，但如果可以选择每页显示少于 50 个，则对列表进行分页可能会有所帮助。
@StevenMoseley 还值得一提的是，除了延迟加载内容之外，您还可以做很多事情来优化页面加载速度——当然是缩小您的 JS/CSS，基本上您可以做任何其他事情来优化/compress 脚本、图像和其他资源。黄金法则最终是“GET 请求越少越好”。
我刚刚对此进行了测试以确认。 Display: none 绝对比 display: block 快得多（尽管比不渲染 HTML 慢得多）。看起来浏览器正在解析 HTML 以构建 DOM，但在显示之前并未将 CSS 应用于隐藏 div 内的元素。这正是我所希望的。我还验证了 display: none 既可以放在外部样式表中，也可以用于内联以获得相同的效果。
是的 - display: none div 中的图像等 GET 请求仍将在页面加载时执行，并且它们都将作为 DOM 的一部分进行解析/加载，但我认为不是实际呈现，直到您将其更改为可见的 display 值，然后触发页面上所有内容的重绘/重排。可能应该添加一个免责声明，我已经有一段时间没有真正研究过这种优化/渲染的东西了。

【解决方案2】：

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

我发现display: none 的性能不如您预期的那么出色。您最好只在用户需要时将额外元素添加到屏幕上，并无限滚动或分页。

尽量避免将 HTML 放入页面，如果它不会被查看，只需在 1 中添加您需要的内容，以最大程度地减少 DOM 操作。

用户是否可能会查看每页的全部 50 个项目？

【讨论】：