nicht angemeldet
Performance
Servus,
es gibt Seiten bei den mehr oder weniger der CPU ausgelastet wird.
Diese Seiten sind sehr oft mit vielen JS versehen.
Gibt es ein Programm welches Speicherbedarf und CPU-Last beim öffnen
oder beim betrachten einer Seite anzeigt?
Dabei denke ich mehr oder weniger an die iPhones die nicht die Leistungsstärke eines PC haben
und würde gerne wissen ob das untere Beispiel als HTML oder JS mehr Leistung kostet
bzw. würde ich überhaupt gerne wissen wollen wie das mit der Performance aussieht.
Kann mir da jemand etwas empfehlen?
Gruß
Tolonath
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Das Göttliche Auge</title>
<style type="text/css">
html, body { margin:0; padding:0; background-color:black; }
#hauptfeld { position:absolute; top:50%; left:50%;}
#aussenrahmen { top:-105px; left:-105px; position:absolute; width:200px; height:200px; border: 5px solid orange;}
#abdeckkreis { top:-50px; left:-50px; position:absolute; width:90px; height:90px; border: 5px solid orange;}
#div1 { top:-100px; position:absolute; width:50px; height:50px; background-color:grey;}
#div2 { left:50px; position:absolute; width:50px; height:50px; background-color:grey;}
#div3 { top:50px; position:absolute; width:50px; height:50px; background-color:grey;}
#div4 { top:50px; position:absolute; width:50px; height:50px; background-color:grey;}
#div5 { top:50px; position:absolute; width:50px; height:50px; background-color:grey;}
#div6 { left:-50px; position:absolute; width:50px; height:50px; background-color:grey;}
#div7 { left:-50px; position:absolute; width:50px; height:50px; background-color:grey;}
#div8 { left:-50px; position:absolute; width:50px; height:50px; background-color:grey;}
#div9 { top:-50px; position:absolute; width:50px; height:50px; background-color:grey;}
#div10 { top:-50px; position:absolute; width:50px; height:50px; background-color:grey;}
#div11 { top:-50px; position:absolute; width:50px; height:50px; background-color:grey;}
#div12 { left:50px; position:absolute; width:50px; height:50px; background-color:grey;}
#div1:hover #ball { top:75px; left:55px; }
#div2:hover #ball { top:75px; left:65px; }
#div3:hover #ball { top:85px; left:65px; }
#div4:hover #ball { top:105px; left:65px; }
#div5:hover #ball { top:115px; left:65px; }
#div6:hover #ball { top:115px; left:55px; }
#div7:hover #ball { top:115px; left:35px; }
#div8:hover #ball { top:115px; left:25px; }
#div9:hover #ball { top:105px; left:25px; }
#div10:hover #ball { top:85px; left:25px; }
#div11:hover #ball { top:75px; left:25px; }
#div12:hover #ball { top:75px; left:35px; }
#auge { top:-40px; left:-40px; position:absolute; width:80px; height:80px; background-color:#efefef;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
#ball { top:95px; left:45px; position:absolute; width:10px; height:10px; background-color:black;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
</style>
</head>
<body>
<div id="hauptfeld">
<div id="aussenrahmen" ></div>
<div id="auge"></div>
<div id="div1" >
<div id="div2">
<div id="div3">
<div id="div4">
<div id="div5">
<div id="div6">
<div id="div7">
<div id="div8">
<div id="div9">
<div id="div10">
<div id="div11">
<div id="div12">
<div id="ball"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="abdeckkreis"></div>
</div>
</body>
</html>
-
und würde gerne wissen ob das untere Beispiel als HTML oder JS mehr Leistung kostet
Browser-interne Lösungen sind sicher performanter als deren Nachbildungen durch JS.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische