nicht angemeldet
Performance: className vs. setAttribute
Hallo Gemeinde,
ich habe hier ein Script mit dem ich dynamisch allerlei Attribute von Element-Objekten verändere...
Beispiel:
In einem css-Sheet habe ich für ein <span> ca. 5 Attribute festgelegt wie font-family, color, background etc.
Auf Mausklick soll sich das nun ändern - im worst case alle 5 (oder mehr) Elemente auf einmal.
Wäre es nun sinnvoller, einfach per className=... dem <span> eine andere css-definition zuzuweisen oder macht man das, in dem man jedes Attribut einzeln abarbeitet?
Ich würde für die className Variante plädieren, weiß aber nicht wie der Browser an sich auf einer einigermaßen angemessen schnell laufenden Maschine so reagiert.
Erfahrungswerte und Anregungen gerne gesehen.
Viele Grüße
Thorsten
-
Hallo,
Wäre es nun sinnvoller, einfach per className=... dem <span> eine andere css-definition zuzuweisen oder macht man das, in dem man jedes Attribut einzeln abarbeitet?
Ich würde für die className Variante plädieren, weiß aber nicht wie der Browser an sich auf einer einigermaßen angemessen schnell laufenden Maschine so reagiert.
Das kommt auf die Rechnerperformance und die Komplexitaet der DOM-Manipulationen an. Dieses einfache Beispiel zeigt bei mir keinen Unterschied (jeweils 0ms).
Lege ich noch eine Zaehlschleife vor das Ende der Zeitmessung
for(i=0;i<10000;i++)
erhalte ich rund 150ms fuer den Gesamtablauf.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 05/03</title>
<style type="text/css">
<!--.a
{
color: #FFF;
background-color: #F00;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}.b
{
color: #FF0;
background-color: #00C;
font-size: 14px;
font-family: "Courier New", Courier, monospace;
}-->
</style>
<script language="JavaScript" type="text/javascript">
<!--var start,ende,d;
function changeClass()
{
start=new Date().getTime();
d=document.getElementById("test");
d.className="b";
ende=new Date().getTime();
diff=ende-start;
alert("Zeitdifferenz: "+diff+"ms");
}function changeProperties()
{
start=new Date().getTime();
d=document.getElementById("test");
d.style.color="#FF0";
d.style.backgroundColor="#00C";
d.style.fontSize="14px";
d.style.fontFamily="'Courier New', Courier, monospace";
ende=new Date().getTime();
diff=ende-start;
alert("Zeitdifferenz: "+diff+"ms");
}//-->
</script>
</head>
<body>
<span class="a" id="test">Das ist ein Testtext ...</span>
<form action="">
<input type="button" value="changeClass()" onclick="changeClass()">
<input type="button" value="changeProperties()" onclick="changeProperties()">
</form>
</body>
</html>MfG, Thomas