[html/css/javascript] IE traag in mouseover bij veel tr's ?

[Verwijderd]

Bij mij doet IE 7 erg vervelend als het gaat om CPU gebruik bij onmouseovers.
Ik heb binnen een normale tabel de volgende code :

code:

<tr tag="table-row" oid="62"  onmouseout="className=''" onmouseover="className='tablerow-mouseover'" onclick="if(isEnabled(this))invokeAction('65');"><td ><div class="stdd" id="45c1" name="45c1" style="width:22px;">
<span id="o63"><input type="checkbox" style="position:static;visibility:visible;" class="checkbox"  name="63" onClick="setParm('63',checked);" /></span></div></td><td ><div class="stdd" id="45c2" name="45c2" style="width:70px;">
<span id="o64"><div  class="col" style="text-align:right;" align="right">990105&nbsp;</div></span></div></td><td ><div class="stdd" id="45c3" name="45c3" style="width:100px;">
<span id="o66"><div  class="col">6-09-2007&nbsp;</div></span></div></td><td ><div class="stdd" id="45c4" name="45c4" style="width:100px;">
<span id="o67"><div  class="col">6-09-2007&nbsp;</div></span></div></td><td ><div class="stdd" id="45c5" name="45c5" style="width:300px;">
<span id="o68"><div  class="col">crediteurtje&nbsp;</div></span></div></td><td ><div class="stdd" id="45c6" name="45c6" style="width:120px;">
<span id="o69"><div  class="col">100,00&nbsp;</div></span></div></td><td ><div class="stdd" id="45c7" name="45c7" style="width:90px;">
<span id="o70"><div  class="col">NLG&nbsp;</div></span></div></td><td ><div class="stdd" id="45c8" name="45c8" style="width:150px;">
<span id="o71"><div  class="col">&nbsp;</div></span></div></td></tr>

      <tr tag="table-row" oid="72"  class="tablerow"  onmouseout="className='tablerow'" onmouseover="className='tablerow-mouseover'" onclick="if(isEnabled(this))invokeAction('75');"><td ><div class="stdd" id="45c1" name="45c1" style="width:22px;">
<span id="o63"><input type="checkbox" style="position:static;visibility:visible;" class="checkbox"  name="63" onClick="setParm('63',checked);" /></span></div></td><td ><div class="stdd" id="45c2" name="45c2" style="width:70px;">
<span id="o64"><div  class="col" style="text-align:right;" align="right">990105&nbsp;</div></span></div></td><td ><div class="stdd" id="45c3" name="45c3" style="width:100px;">
<span id="o66"><div  class="col">6-09-2007&nbsp;</div></span></div></td><td ><div class="stdd" id="45c4" name="45c4" style="width:100px;">
<span id="o67"><div  class="col">6-09-2007&nbsp;</div></span></div></td><td ><div class="stdd" id="45c5" name="45c5" style="width:300px;">
<span id="o68"><div  class="col">crediteurtje&nbsp;</div></span></div></td><td ><div class="stdd" id="45c6" name="45c6" style="width:120px;">
<span id="o69"><div  class="col">100,00&nbsp;</div></span></div></td><td ><div class="stdd" id="45c7" name="45c7" style="width:90px;">
<span id="o70"><div  class="col">NLG&nbsp;</div></span></div></td><td ><div class="stdd" id="45c8" name="45c8" style="width:150px;">
<span id="o71"><div  class="col">&nbsp;</div></span></div></td></tr>

Als ik met deze code 100 rows tegelijk laat zien in een table (bovenstaande code dus 50 keer), en ik ga tijdens het tonen van de pagina alleen maar met de muis over de rows heen, krijg ik gewoon 99% CPU verbruik voor mijn kiezen. (P4, 2.0Ghz, 1GB RAM).
Met vergelijkbare pc's geprobeerd, idem dito.

Met Opera geprobeerd --> niet acceptabel (70%).
Met Safari geprobeerd --> redelijk (50%).
Met FF geprobeerd --> beste, maar nog verre van optimaal (30%)

Nu is mijn vraag : is er iets wat ik hier aan kan doen zodat IE niet over zijn nek gaat ? Wat kan ik doen om deze technieken in code te gieten waarmee IE wel normaal omgaat ??

Ik ga verder natuurlijk nog even kijken of de CSS ook roet in het eten gooit... kan dit uberhaupt ?

Alvast dank

[Blaise]

Moet het niet "this.className" zijn?

[BasieP]

met ^^
verder zou je je code wat leesbaarder kunnen maken (af en toe een return) en code highlight gebruiken (zie: Overzicht van UBB-codes #tag_code)

[Niemand_Anders]

Jij gebruikt TD DIV en SPAN voor elke tabel cell en je bent verbaasd dat de browser traag is? De DOM tree is bij 100 regels dermate groot dat waarschijnlijk gewoon je geheugen op is en je systeem aan het swappen is.

Op de DIV of SPAN staan geen stylen welke niet direct op de betreffende TD gezet kunnen worden. Ook helpt het als je classes ipv inline styles gebruikt (browser kan wel een class cachen, maar niet een inline style)

Een ander groot voordeel als je de DIV's en SPAN's weg laat, is dat je html output code direct een stuk leesbaarder is. Aangezien er minder output code is, is de webpagina ook nog eens sneller bij de bezoeker en kan sneller worden gerenderd.

[crisp]

Blaise schreef op woensdag 12 september 2007 @ 11:35:
Moet het niet "this.className" zijn?

Nee hoor, className is binnen de scope van het event bekend - het element zelf is namelijk 'in scope'

Maar ik herken het euvel van traagheid bij veel eventhandlers wel, een :hover style in CSS is niet veel sneller in IE7 bij een redelijk groot document (maar wel te prefereren boven losse eventhandlers en een className-swap). Enige alternatief is een distributed event gebruiken, maar of dat ook lekker werkt op een grote tabel durf ik niet te zeggen.

Ik zou om te beginnen proberen je markup te verkleinen en inline styles allemaal verplaatsen naar CSS, en vervolgens ook het hover-effect opnemen in CSS ipv javascript en kijken of dat al voldoende verbetering geeft.

[Verwijderd]

De div's en de span's zitten er niet voor niets; dit kan niemand hier echter weten aangezien ik niet alle code heb gepost natuurlijk (ook niet voor niets, wordt de probleemstelling niet perse duidelijker door... )

Dus dat weglaten is geen optie.

Markup verkleinen is iets waar we al wel mee bezig zijn maar tot nu toe geeft dit, naast een kleiner html-bestand, geen performance winst helaas.

Hover-effect in CSS opnemen ga ik nu even naar kijken.... thx

[Blaise]

Nee hoor, className is binnen de scope van het event bekend - het element zelf is namelijk 'in scope'

Ah, dat wist ik niet

Overigens beweert PPK dat className in de meeste browsers sneller is dan style: http://www.quirksmode.org/dom/classchange.html. Vreemd, want het tegenovergestelde wordt ook vaak beweerd. Ligt het aan de testmethode?

Deze reactie op de test m.b.t. Safari is ook interessant: http://webkit.org/blog/?p=13

[ Voor 3% gewijzigd door Blaise op 12-09-2007 13:54 ]

[crisp]

Blaise schreef op woensdag 12 september 2007 @ 13:50:
[...]
Ah, dat wist ik niet

Overigens beweert PPK dat className in de meeste browsers sneller is dan style: http://www.quirksmode.org/dom/classchange.html. Vreemd, want het tegenovergestelde wordt ook vaak beweerd. Ligt het aan de testmethode?

Deze reactie op de test m.b.t. Safari is ook interessant: http://webkit.org/blog/?p=13

Dat ligt gedeeltelijk aan de testmethode (getuige ook het artikel op webkit.org) en gedeeltelijk ook aan het document en de bijbehorende CSS. Er is uiteindelijk geen eenduidige antwoord. Als je maar 1 style-property wilt aanpassen dan zal het direct manipuleren van .style waarschijnlijk sneller zijn dan een className swap, bij meerdere style-properties zal het eerder andersom zijn.

Als het aanpassen van de style een reflow van het document tot gevolg heeft dan zullen er zich nog meer verschillen gaan openbaren tussen browsers (en zijn er ook weer verschillende manieren om dat te versnellen).

[Verwijderd]

crisp schreef op woensdag 12 september 2007 @ 14:01:
[...]

Dat ligt gedeeltelijk aan de testmethode (getuige ook het artikel op webkit.org) en gedeeltelijk ook aan het document en de bijbehorende CSS. Er is uiteindelijk geen eenduidige antwoord. Als je maar 1 style-property wilt aanpassen dan zal het direct manipuleren van .style waarschijnlijk sneller zijn dan een className swap, bij meerdere style-properties zal het eerder andersom zijn.

In ons geval is er dus inderdaad maar één property wat aangepast moet worden bij een mouseover, nl. de backgroundcolor... Ik heb dan ook de oplossing gevonden hiermee. CPU verbruik wordt (in IE) gewoon meer dan gehalveerd hierdoor ! (het is nog teveel naar mijn zin maar ok)

Ik gebruik dan ook de volgende code nu :

code:

<tr tag="table-row" oid="62" onMouseOver="this.style.backgroundColor='#E1EAFE'"; onMouseOut="this.style.backgroundColor='transparent'" onclick="if(isEnabled(this))invokeAction('75');"><td ><div class="stdd" id="45c1" name="45c1" style="width:22px;">
<span id="o63"><input type="checkbox" style="position:static;visibility:visible;" class="checkbox"  name="63" onClick="setParm('63',checked);" /></span></div></td><td ><div class="stdd" id="45c2" name="45c2" style="width:70px;">
<span id="o64"><div  class="col" style="text-align:right;" align="right">990105&nbsp;</div></span></div></td><td ><div class="stdd" id="45c3" name="45c3" style="width:100px;">
<span id="o66"><div  class="col">6-09-2007&nbsp;</div></span></div></td><td ><div class="stdd" id="45c4" name="45c4" style="width:100px;">
<span id="o67"><div  class="col">6-09-2007&nbsp;</div></span></div></td><td ><div class="stdd" id="45c5" name="45c5" style="width:300px;">
<span id="o68"><div  class="col">crediteurtje&nbsp;</div></span></div></td><td ><div class="stdd" id="45c6" name="45c6" style="width:120px;">
<span id="o69"><div  class="col">100,00&nbsp;</div></span></div></td><td ><div class="stdd" id="45c7" name="45c7" style="width:90px;">
<span id="o70"><div  class="col">NLG&nbsp;</div></span></div></td><td ><div class="stdd" id="45c8" name="45c8" style="width:150px;">
<span id="o71"><div  class="col">&nbsp;</div></span></div></td></tr>

      <tr tag="table-row" oid="72"  class="tablerow" onMouseOver="this.style.backgroundColor='#E1EAFE'"; onMouseOut="this.style.backgroundColor=''" onclick="if(isEnabled(this))invokeAction('75');"><td ><div class="stdd" id="45c1" name="45c1" style="width:22px;">
<span id="o63"><input type="checkbox" style="position:static;visibility:visible;" class="checkbox"  name="63" onClick="setParm('63',checked);" /></span></div></td><td ><div class="stdd" id="45c2" name="45c2" style="width:70px;">
<span id="o64"><div  class="col" style="text-align:right;" align="right">990105&nbsp;</div></span></div></td><td ><div class="stdd" id="45c3" name="45c3" style="width:100px;">
<span id="o66"><div  class="col">6-09-2007&nbsp;</div></span></div></td><td ><div class="stdd" id="45c4" name="45c4" style="width:100px;">
<span id="o67"><div  class="col">6-09-2007&nbsp;</div></span></div></td><td ><div class="stdd" id="45c5" name="45c5" style="width:300px;">
<span id="o68"><div  class="col">crediteurtje&nbsp;</div></span></div></td><td ><div class="stdd" id="45c6" name="45c6" style="width:120px;">
<span id="o69"><div  class="col">100,00&nbsp;</div></span></div></td><td ><div class="stdd" id="45c7" name="45c7" style="width:90px;">
<span id="o70"><div  class="col">NLG&nbsp;</div></span></div></td><td ><div class="stdd" id="45c8" name="45c8" style="width:150px;">
<span id="o71"><div  class="col">&nbsp;</div></span></div></td></tr>

Dank voor iedereen die meedacht...

_{ff de renderer aanpassen nu}