Question

我想阻止浏览器预先渲染一些“隐藏的”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上放置内联样式=“display：none”吗？

谢谢！

Answer 1

display: none不会阻止浏览器解析/加载该标记和相关资源（由Steven Moseley编辑：但它会阻止浏览器将CSS应用于隐藏div中的元素）。在display值更改之前，它不会呈现为页面流的一部分。一般来说，display: none和visibility: hidden对页面加载时间影响很小或没有影响。使用display: none进行优化/性能的主要场所包括有选择地选择何时显示它，因为它会触发页面内容的重排/重新呈现，甚至在所有但非常复杂的应用程序中通常都是微不足道的差异。

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

Answer 2

您是否可以避免首先构建隐形HTML？您是否会在某个时间点设置.invisible { display: block }？。

我发现display: none并不像你期望的那样出色。您最好只在用户需要时将额外元素添加到屏幕上，并进行无限滚动或分页。

如果不想查看HTML，请尽量避免将HTML放入页面，只需在1中添加您需要的内容以最小化DOM操作。

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

防止浏览器渲染显示：无HTML？

2 个答案: