我想阻止浏览器执行解析和预渲染或绘制一些“隐藏”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;
}
Will display: none
在外部样式表中阻止浏览器预渲染隐藏内容?
有更好的方法来做我想做的事吗?我应该在 div 上放置内联 style="display:none" 吗?
Thanks!