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" 吗？

谢谢！

4

2 回答 2

15

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

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

于 2013-10-03T14:36:39.997 回答
1

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

我发现display: none它的性能并没有你想象的那么好。您最好只在用户需要时将额外的元素添加到屏幕上，并无限滚动或分页。

如果不打算查看，请尽量避免将 HTML 放入页面中，只需在 1 中添加您需要的内容即可最大限度地减少 DOM 操作。

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

于 2013-10-03T14:34:00.907 回答