Toon posts:

[css] class zorgt voor gigantische hoge overhead

Pagina: 1
Acties:

vrijdag 8 februari 2002 10:11

Acties:

Verwijderd

Topicstarter
Onderstaande source bevat stukje ColdFusion code, maar om de syntax hiervan te snappen hoef je geen professor te zijn :P

Via een simpel mouseover en mouseout scriptje ging ik dynamisch de className van de <span> wijzigen. Als ik bijvoorbeeld onmouseover="this.style.border='4px solid black';" doe gaat het supersnel, zelfs bij 500+ tables in je pagina.

Zodra je echter this.className = 'klasje' gaat gebruiken merk je meteen een gigantische overhead. Het duurt circa 1,5 seconde voordat de className wijziging inderdaad wordt toegebracht.

Nu was ik nieuwschierig en heb ik this.style.border = 'blabla' ook eens gedaan op de <span> waarbij de style in eerste instantie via class="" werd toegekend. Ook hierbij wederom een overhead.

Wijzigen van class="" naar style="" (Dus hard coderen in de span) zorgt voor het meteen verdwijnen van de overhead.

Hieronder de sources:

Dit resulteerd in 0,0 overhead:
(de dubbele pound signs zijn normaal bij de kleuren, omdat deze tussen CF output tags staan)
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<!--- DETERMINE TYPE OF VIEW --->
<cfif NOT IsDefined('url.view')>
    <cfif IsDefined('client.up_view')>
        <cfset MyView = client.up_view>
    <cfelse>
        <cfset MyView = "icon">
        <cfset client.up_view = "icon">
    </cfif>
<cfelse>
    <cfif IsDefined('client.up_view')>
        <cfset MyView = client.up_view>
    <cfelse>
        <cfset MyView = url.view>
        <cfset client.up_view = url.view>
    </cfif>
</cfif>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <cfset skinpath = "../../skins/skin1/">
    <cfinclude template="../../act_getskin.cfm">
    
<style type="text/css">
<cfoutput>
.container{background:#ffffff; margin:10; padding:0; border:4px solid #ffffff; text-align:center; vertical-align:middle; float:left; cursor:hand;}}
.container_active{background:#ffffff; margin:10; padding:0; border:4px solid #3764B5; text-align:center; vertical-align:middle; float:left; cursor:hand;}
.left{background:##ffffff;}
.center{background:##ffffff;}
.right{background:##ffffff;}
</cfoutput>
</style>    
</head>

<body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" style="overflow:auto;">
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td bgcolor="#ffffff" width="250" valign="top">
        <!--- LINKERKANT NESTEN --->
        
            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    <td class="header" height="42">&nbsp;</td>
                </tr>
            </table>
        
        </td>
        <td valign="top" align="left">
        <!--- RECHTERKANT NESTEN --->

            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    <td class="header" height="32" colspan="2">&nbsp;</td>
                </tr>
                <tr>
                    <td class="header" height="10" width="10">[img]"../../images/headermask.gif"></td>
                    <td[/img][img]"../../images/spacer.gif"[/img]</td>
                </tr>
            </table>
            
<cfif MyView EQ "icon">
<cfloop from="1" to="500" index="x">
<cfoutput>

<span id="user#x#" onmouseover="this.style.border = '4px solid ##3764B5';" onmouseout="this.style.border = '4px solid white';" style="background:##ffffff; margin:10; padding:0; border:4px solid white; text-align:center; vertical-align:middle; float:left; cursor:hand;">
<table border="0" cellspacing="0" cellpadding="0" height="60">
    <tr>
        <td class="left" width="5" height="60"></td>
        <td class="center" height="60">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="50">[img]"#skinpath#userimages/lightblue.gif"[/img]</td>
                    <td style="font-family:Tahoma; font-size:12px;" width="20"><nobr><b>Gebruikersnaam</b><br>Gebruikersgroep</nobr></td>
                    <td>&nbsp;</td>
                </tr>
            </table>    
        </td>
        <td class="right" width="5" height="60"></td>
    </tr>
</table>
</span>
</cfoutput>
</cfloop>
</cfif>
</td>
</tr>
</table>
</body>
</html>

Dit resulteerd in een gigantische overhead:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<!--- DETERMINE TYPE OF VIEW --->
<cfif NOT IsDefined('url.view')>
    <cfif IsDefined('client.up_view')>
        <cfset MyView = client.up_view>
    <cfelse>
        <cfset MyView = "icon">
        <cfset client.up_view = "icon">
    </cfif>
<cfelse>
    <cfif IsDefined('client.up_view')>
        <cfset MyView = client.up_view>
    <cfelse>
        <cfset MyView = url.view>
        <cfset client.up_view = url.view>
    </cfif>
</cfif>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <cfset skinpath = "../../skins/skin1/">
    <cfinclude template="../../act_getskin.cfm">
    
<style type="text/css">
<cfoutput>
.container{background:#ffffff; margin:10; padding:0; border:4px solid #ffffff; text-align:center; vertical-align:middle; float:left; cursor:hand;}}
.container_active{background:#ffffff; margin:10; padding:0; border:4px solid #3764B5; text-align:center; vertical-align:middle; float:left; cursor:hand;}
.left{background:##ffffff;}
.center{background:##ffffff;}
.right{background:##ffffff;}
</cfoutput>
</style>    
</head>

<body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" style="overflow:auto;">
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td bgcolor="#ffffff" width="250" valign="top">
        <!--- LINKERKANT NESTEN --->
        
            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    <td class="header" height="42">&nbsp;</td>
                </tr>
            </table>
        
        </td>
        <td valign="top" align="left">
        <!--- RECHTERKANT NESTEN --->

            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    <td class="header" height="32" colspan="2">&nbsp;</td>
                </tr>
                <tr>
                    <td class="header" height="10" width="10">[img]"../../images/headermask.gif"></td>
                    <td[/img][img]"../../images/spacer.gif"[/img]</td>
                </tr>
            </table>
            
<cfif MyView EQ "icon">
<cfloop from="1" to="500" index="x">
<cfoutput>

<span id="user#x#" onmouseover="this.className = 'container_active';" onmouseout="this.className = 'container';" class="container">
<table border="0" cellspacing="0" cellpadding="0" height="60">
    <tr>
        <td class="left" width="5" height="60"></td>
        <td class="center" height="60">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="50">[img]"#skinpath#userimages/lightblue.gif"[/img]</td>
                    <td style="font-family:Tahoma; font-size:12px;" width="20"><nobr><b>Gebruikersnaam</b><br>Gebruikersgroep</nobr></td>
                    <td>&nbsp;</td>
                </tr>
            </table>    
        </td>
        <td class="right" width="5" height="60"></td>
    </tr>
</table>
</span>
</cfoutput>
</cfloop>
</cfif>
</td>
</tr>
</table>
</body>
</html>

Het blijkt dus dat MSIE (in dit geval MSIE6) beter overweg kan met hard gecodeerde styles dan met stylesheets en classes. :)

Het is dus heel grappig om te zien dat 2 verschillende methoden, waarvan je verwacht dat ze niet of nauwelijks in performance verschillen omdat ze hetzelfde doen in net zoveel regels, toch 100den% in performance schelen. :)

vrijdag 8 februari 2002 10:16

Acties:
  • Tom
  • Registratie: Juni 1999
  • Niet online

Tom

"class zorgt voor gigantische hoge overhead"

Ja als je 500 tables gebruikt :P

[sorry maar ik moet even ergens op zeiken OK >:)]

vrijdag 8 februari 2002 10:17

Acties:

Verwijderd

Topicstarter
Op vrijdag 08 februari 2002 10:16 schreef Tom het volgende:
"class zorgt voor gigantische hoge overhead"

Ja als je 500 tables gebruikt :P

[sorry maar ik moet even ergens op zeiken OK >:)]
Database performance testen doe je ook niet op 1 of 2 records >:) :P

vrijdag 8 februari 2002 10:17

Acties:
  • Tom
  • Registratie: Juni 1999
  • Niet online

Tom

Op vrijdag 08 februari 2002 10:17 schreef Gordijnstok het volgende:

[..]

Database performance testen doe je ook niet op 1 of 2 records >:) :P
ok jij wint :( :+

vrijdag 8 februari 2002 10:59

Acties:
  • Pelle
  • Registratie: Januari 2001
  • Laatst online: 00:12

Pelle

🚴‍♂️

Op vrijdag 08 februari 2002 10:17 schreef Gordijnstok het volgende:
Database performance testen doe je ook niet op 1 of 2 records >:) :P
Database performance en ColdFusion? Dat gaat toch niet samen? :+ ;)

vrijdag 8 februari 2002 11:02

Acties:

Verwijderd

Topicstarter
Op vrijdag 08 februari 2002 10:59 schreef Pelle het volgende:

[..]

Database performance en ColdFusion? Dat gaat toch niet samen? :+ ;)
Niet zo offtopic gaan anders ben ik genoodzaakt je te spanken voor topicverkrachting >:)

zondag 21 april 2002 14:53

Acties:

Verwijderd

Topicstarter
Ik kick dit topic eventjes omhoog. Ik heb vanwege de schoonheid van de code toch gekozen om

onmouseover="this.className='mijnclass';" ipv onmouseover="this.style.border='1px solid black';" te gebruiken.

Nu heb ik bij webfx het office XP menu gezien, waarin ook className wijzigingen worden aangebracht, ik merk alleen bij hun totaal geen performance achteruitgang.

Is er iemand hier die licht kan schijnen op performance tweaking van de className functies :?

Het probleem treed pas op wanneer de ingeladen pagina redelijk veel code/tables/div en span's bevat. Ik heb al geprobeerd om de performance te scheiden en het gedeelte in een i-frame geladen, maar zonder resultaat. Het enige wat ik nu nog kan doen is hem als een include via scriptlets aan te roepen om zo performance te scheiden.

<object type="text/x-scriptlet" data="tragezooi.html"></object>
Pagina: 1
Reageer