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

Question

I'm writing an HTML5 app for iOS . 我正在为iOS编写HTML5应用程序。 After going through this article, I thought of doing some performance optimisation by keeping some HTML nodes in DOM but not keeping them in viewport . 通过去后这个文章，我想通过保持一些HTML节点做了一些性能优化的DOM而不是让他们在viewport 。

For the demo purpose, I have been using following code (my actual work scenario is going to have a lot more <div> ) 为了演示目的，我一直在使用以下代码（我的实际工作场景将会有更多<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>

My problem is, whenever I want to show a <div> in viewport and hide all other <div> , I have to make the former div's float:left alongwith the obvious adjustments in left(css) If I put float:left in all the <div> , the logic does not work and I'm not able to show the specific <div> which I want to show in viewport . 我的问题是，每当我想在viewport显示一个<div>并隐藏所有其他<div> ，我必须让前一个div's float:left的明显调整left(css)如果我把float:left放在所有<div> ，逻辑不起作用，我无法显示我想在viewport显示的特定<div> 。 I m also unsure how visibility:hidden helps in performance optimisation. 我也不确定visibility:hidden有助于性能优化。 My guess is that, the browser doesn't repaint the DOM element whose visibility(css) is set to hidden . 我的猜测是，浏览器不会重新显示其visibility(css)设置为hidden的DOM元素。 Is it the reason for better performance ? 这是更好表现的原因吗？

Answer 1

In a css if u give the visiblity:hidden means its hide the content only not that place which is occupied . 在一个CSS中，如果你给出visiblity:hidden意味着它隐藏内容而不是被占用的地方。 if you use disply:none means its hide the content and place. 如果你使用disply:none意味着它隐藏内容和地点。

and repalce this in your code.. 并在您的代码中重新执行此操作..

 <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

I m also unsure how visibility:hidden helps in performance optimisation. 我也不确定可见性：隐藏有助于性能优化。 My guess is that, the browser doesn't repaint the DOM element whose visibility(css) is set to hidden. 我的猜测是，浏览器不会重新显示其可见性（css）设置为隐藏的DOM元素。

I doubt that – because the layout space for elements set to visibility:hidden still gets reserved, and for that, the element dimensions have to be known. 我怀疑 - 因为设置为visibility:hidden元素的布局空间 visibility:hidden仍然被保留，为此，必须知道元素维度。 And for that, the element and all of its descendants have to be rendered. 为此，必须渲染元素及其所有后代。

display:none however does cause an element and its descendants not to be rendered at all. display:none但是会导致元素及其后代根本不被渲染。 By definition an element with this style behaves as if it was not part of the DOM at that moment at all (from the rendering perspective). 根据定义，具有此样式的元素的行为就好像它当时不是DOM的一部分（从渲染角度来看）。

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

问题描述

2 个解决方案

解决方案1
2 2013-04-03 10:10:33

解决方案2
1 2013-04-03 09:48:55

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

问题描述

2 个解决方案

解决方案1 2 2013-04-03 10:10:33

解决方案2 1 2013-04-03 09:48:55

解决方案1
2 2013-04-03 10:10:33

解决方案2
1 2013-04-03 09:48:55