不要使用 JS 加载在 dom 中不显示的 div

Question

我有两个div，一个用于Internet explorer，另一个用于其他浏览器。在其他浏览器中使用display:none隐藏IE浏览器，在Internet explorer中使用media query显示IE浏览器。目前一切都很好。但这似乎不是理想的解决方案，因为display:nonediv确实出现在DOM中，这对性能不利。我如何初始化仅是可见的元素或我如何不初始化元素使用JS有display:none

<div style="display:none"id="explorer">Internet explorer</div>
<div id="rest">Chrome,Firefox,etc</div>
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
#explorer{
display: block !important;
}
#rest{
display: none;
}
}

所以如果你在Chrome中加载这个，<div style="display:none"id="explorer">Internet explorer</div>不会显示在视图中，但你将能够通过开发工具看到它。我希望这不是在chrome, firefox等使用JS初始化，而不是为IE初始化<div id="rest">Chrome,Firefox,etc</div>。

Answer 1

不幸的是，如果你以正常的方式在HTML文档中编写它，有些事情会在CSS或JS参与之前发生。因此，您不需要在文档中使用div，而是使用JS插入一个或另一个。

if (isInternetExplorer) {
var ieContent = document.createElement(‘div’)
...
document.body.appendChild(ieContent)
} else {
var modernContent = document.createElement(‘div’)
...
document.body.appendChild(modernContent)
}

如何将页面内容转换成JS是令人讨厌的部分。让所有内容都保留在。html文件中的一种方法是:

<script type='text/html' id='ieContent'>
<div>hello internet explorer</div>
</script>
ieContent.innerHTML = document.getElementById('ieContent').innerText

如果可能的话，最好让你的服务器检测IE并重定向到一个完全不同的。html文件;然后你就有了2个简单且分离良好的文件，没有巫术。甚至在此之前，我就会质疑你不可见的div的影响，以及你把事情弄得更复杂会得到什么。