浏览器渲染时隐藏html标记

Question

如何在浏览器呈现页面时隐藏不必要的HTML标记？我正在开发一个响应式主题，现在我只是使用display: none;隐藏所有标记（<div>/<img>/<span>）。但据我所知，浏览器将读取所有DOM，然后应用包括CSS和JavaScript在内的所有规则。

CSS

.desktop {
    display:none;
}

HTML

<div class="desktop">
    <img src= " ..
    <div id="container" ...
    <span class="font ...
</div>

那么当我使用具有响应模式的相同CSS文件的相同HTML页面时，隐藏浏览器呈现的不必要标签的正确方法是什么？

注意：如果您使用的是firebug，即使您使用display:none浏览器进行设置，仍会加载所有div，包括图片，但不会向您展示。

Answer 1

您可以将display:none样式设置为您想要显示的元素（它甚至不会在UI中翻转），然后使用javascript删除它：

HTML：

<div style="display: none;" id="hideme">Hide me</div>

JS：

window.onload = function() {
   document.getElementById("hideme").style.display = "block";
}

Answer 2

这应该没问题。 display: none;应该做的工作。如果您使用JavaScript操作DOM，则可以应用内联样式。

Answer 3

如果要隐藏某些特定元素，最好在元素上设置style。因为这会减少查找CSS引擎的数量，以查找哪些元素与外部样式表上的CSS选择器匹配。所以这样的事情会起到作用：

<div id="container" style="display:none"></div>