我希望防止浏览器在未准备好显示“隐藏”的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"
吗?
谢谢!