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

Question

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

我正在写一个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>

Run Code Online (Sandbox Code Playgroud)

我的问题是,每当我想显示<div>的viewport和隐藏所有其他<div>的,我必须让前者div's float:left非常久远的明显的调整left(css) .如果我把float:left所有<div>的逻辑不工作,我无法显示具体<div>哪些我想表现出来viewport.我也不确定visibility:hidden性能优化有多大帮助.我的猜测是,浏览器不会重新绘制设置为的DOM元素.这是更好表现的原因吗？visibility(css)hidden

Answer 1

CBr*_*roe 1

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

\n\n

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

\n\n

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

\n

归档时间：	13 年，1 月前
查看次数：	215 次
最近记录：	13 年，1 月前