Question

我正在为HTML5撰写iOS个应用。在浏览this文章后，我想到了一些性能优化将一些HTML节点保留在DOM中，但不将它们保留在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)的{{1}}元素。这是改善表现的原因吗？

Answer 1

在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>

Answer 2

我也不确定可见性：隐藏有助于性能优化。我的猜测是，浏览器不会重新绘制其可见性（css）设置为隐藏的DOM元素。

我对此表示怀疑 - 因为设置为visibility:hidden的元素的布局空间仍然会被保留，为此，必须知道元素维度。为此，必须渲染元素及其所有后代。

然而，

display:none确实导致一个元素及其后代根本不被渲染。根据定义，具有此样式的元素的行为就好像它当时不是DOM的一部分（从渲染角度来看）。

在浏览器的视口</div>中有选择地切换<div>

2 个答案: