我正在写一个 HTML5适用于 iOS 的应用程序.
经过this文章，我想到了做一些性能优化
通过在 DOM 中保留一些 HTML 节点但不要将它们保留在 viewport 中.
出于演示目的，我一直使用以下代码(我的实际工作场景将有更多 <div> )
<!DOCTYPE HTML>
<html>
<head>
<script>
function func(){
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.style.cssFloat = "";
div1.style.visibility = "hidden";
div1.style.left = "-100%";
div2.style.left = "100%";
div2.style.visibility = "";
div2.style.cssFloat = "left";
}
function func1(){
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div2.style.cssFloat = "";
div2.style.visibility = "hidden";
div2.style.left = "-100%";
div1.style.left = "100%";
div1.style.visibility = "";
div1.style.cssFloat = "left";
}
</script>
</head>
<body style="position:absolute;height: 100%;width:100%;margin:0px;padding:0px;">
<div onclick="func();" id="div1" style="background-color:blue;height:100%;width:100%;top:0;left:100%;display: inline;float:left;margin: 0px;padding: 0px">
</div>
<div onclick="func1();" id="div2" style="background-color:green;height:100%;width:100%;top:0;left:-100%;visibility:hidden;display: inline;margin: 0px;padding: 0px;">
</div>
</body>
</html>
我的问题是，每当我想显示 <div>在viewport并隐藏所有其他 <div> , 我必须制作前者 div's float:left以及left(css)中的明显调整
如果我把 float:left在所有<div> ，逻辑不起作用，我无法显示具体的 <div>我想在 viewport 中展示.
我也不确定如何visibility:hidden有助于性能优化。我的猜测是，浏览器不会重新绘制 DOM visibility(css) 的元素设置为 hidden .这是性能更好的原因吗？
最佳答案
在 css 中，如果你给 visiblity:hidden 意味着它只隐藏内容而不是被占用的地方。如果您使用 disply:none 意味着它隐藏内容和位置。
并在您的代码中重写它..
<script type="text/javascript">
function pageBodyLoad(){ // this function is called at the body load..
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.style.display = "block"; // its shows div1
div2.style.display = "none"; // its hide div2
}
function func(){
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.style.display = "none"; // its hide div1
div2.style.display = "block"; // its shows div2
}
function func1(){
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.style.display = "block"; // its shows div1
div2.style.display = "none"; // its hide div2
}
</script>
<body style="position:absolute;height: 100%;width:100%;margin:0px;padding:0px;" onload="pageBodyLoad()">`
<div onclick="func();" id="div1" style="background-color:blue;height:100%;width:100%;top:0;float:left;margin: 0px;padding: 0px">
</div>
<div onclick="func1();" id="div2" style="background-color:green;height:100%;width:100%;top:0;margin: 0px;padding: 0px;">
</div>
</body>
关于ios - 在浏览器的视口(viewport)中有选择地切换 <DIV>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15783912/