浏览器渲染时隐藏html标记

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

CSS

.desktop { 
    display:none; 
}

HTML

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

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

注意：如果您使用萤火虫，即使您使用display:none设定浏览器仍会载入所有包含图像的div，但只显示给您。

2013-07-04 rusly

您可以设置display:none风格元素你想显示（它甚至不会弗林克在UI），然后使用JavaScript将其删除：

HTML：

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

JS ：

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

2013-07-04 14:59:15 mishik

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

2013-07-04 15:00:01

如果要隐藏某些特定元素，最好在元素上设置style。因为这样可以减少查找CSS引擎以查找哪些元素与外部样式表中CSS选择器相匹配的数量。所以像这样的事情将做的伎俩：

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

2013-07-04 15:03:21 jycr753

回答