5

我正在HTML5为iOS. 看完这篇文章后，我想通过保留一些 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)为hidden. 这是性能更好的原因吗？

4

2 回答 2

2

在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>
于 2013-04-03T10:10:33.957 回答
1

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

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

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

于 2013-04-03T09:48:55.793 回答