[HTML] onMouseover vreet cpu ?

[DeFeCt]

Ik heb, dacht ik, een heel simpel onMouseovertje op een td staan die een class veranderd, maar als ik in mijn taskmanager kijk dan schiet de CPU usage naar 60% tot 70%.

Bij mijn collega die mijn prototype in .NET heeft gehangen schiet de boel zelfs naar 80% tot 90% en wordt de boel retetraag..

Iemand enig idee wat hier aan de hand kan zijn?

de code:

code:

<!-- resultitem -->
<tr>
<td id="item" class="item" onMouseover="this.className='itemSelected'" onMouseout="this.className='item'">
<h1>Header</h1>
<p class="resultDescription">blabla</p>  
</td>
</tr>
<!-- horizontal row -->
<tr>
<td class="hrImageWhite"></td>
</tr>
<!-- resultitem -->     
<tr>
<td id="item" class="itemAlternate" onmouseover="this.className='itemSelected'" onmouseout="this.className='itemAlternate'">
<h1>Header</h1>
<p class="resultDescription">blieblie</p>  
</td>
</tr>      
<!-- horizontal row -->

[André]

Ik denk dat het veranderen van je styleclasses gewoon slecht geimplementeerd is in de brwosers. Heb je het alleen in IE of ook in Mozilla?

[crisp]

dynamisch een class wijzigen vreet idd performance, je kan beter gewoon direct de style-attributen wijzigen.

[DeFeCt]

crisp schreef op 03 October 2003 @ 17:19:
dynamisch een class wijzigen vreet idd performance, je kan beter gewoon direct de style-attributen wijzigen.

call me stupid, maar hoe gaat dat dan? Voor mijn gevoel doe ik dat namelijk nu ook?

[André]

JavaScript:

element.style.width = "100px";

Zo gaat dat, en dat kun je dan in een functie zetten die je aanroept vanuit je onmouse* events.

[crisp]

DeFeCt schreef op 03 October 2003 @ 17:22:
[...]


call me stupid, maar hoe gaat dat dan? Voor mijn gevoel doe ik dat namelijk nu ook?

Stel dat het enige verschil tussen die 2 classes de achtergrondkleur is, dan is dit vele malen efficienter:

HTML:

<td onmouseover="this.style.backgroundColor='red'"
    onmouseout="this.style.backgroundColor='green'">bla</td>

dan hoeft de browser niet eerst een lookup te doen in de stylesheet

[DeFeCt]

crisp schreef op 03 oktober 2003 @ 17:28:
[...]
dan hoeft de browser niet eerst een lookup te doen in de stylesheet

ok, tnx!

Zou het dan misschien nog helpen om de css inline te zetten?

...enniewee... weekend! bedankt heren.

[crisp]

DeFeCt schreef op 03 October 2003 @ 17:33:
[...]
ok, tnx!

Zou het dan misschien nog helpen om de css inline te zetten?

...enniewee... weekend! bedankt heren.

Of je de initiele style inline doet of via een class maakt volgens mij weinig uit, dit zal hooguit een klein effect hebben op de rendertijd, maar waarschijnlijk niet echt meetbaar.

Ik snap wel dat je dit liever via classes zou willen doen (style op 1 plek, ook dynamische stylen), maar in dit geval is het offer (performance) te groot. Mogelijk dat toekomstige browserversies hier beter mee om kunnen gaan.

In Mozilla kan je trouwens gewoon dit doen, heb je geen script nodig:

Cascading Stylesheet:

td {
  background-color: red;
}
td:hover {
  background-color: green;
}

[ Voor 35% gewijzigd door crisp op 03-10-2003 18:16 ]