Newsgroup: it.comp.lang.javascript
Titolo: [CSS] Lentezza nel rendering

Stavo sbuzzicando un po' con i css quando mi sono imbattuto in un problema
serissimo: con IE ho una lentezza inaccettabile, in particolare quando
passo col mouse sui link (ci mette un buon mezzo secondo a renderizzare lo
stile dell'hover). Ho visto nel task manager: passando velocemente su
alcuni link "semplici" (l'hover non fa altro che cambiare i colori di testo
e sfondo, l'elemento a è inline, semplice semplice) il processo impegna la
cpu fino al 35-40%, mentre con firefox non supera il 10%. Sapete se ci sono
situazioni particolari, delle quali magari non mi sono reso conto, che
creino tali problemi a IE?
Ah, un'altra cosa... mi pare che un bug noto di IE riguardi i link inseriti
in elementi fluttuanti... vorrei fare una ricerca per recuperare qualche
informazione ma non riesco a trovare la giusta chiave di ricerca: mi
aiutate, please? :)
-- 
Nando [?]
Apostolo della Prova

 aiutate, please? :)
IE, bug, float e hover magari? Poi dipende a quale ti riferisci,
ovviamente.
-- 
"Non è una guerra.. è uno sterminio.. loro stanno a noi come 
uomini contro i  vermi.. draghi contro i lupi.. 
O uomini che cavalcano draghi e lanciano lupi addosso ai vermi!"

 elementi, piuttosto che l'hover.
Dunque, riassumendo, posso tentare di risolvere il problema:
1) semplificando markup e css
2) eventualmente demandando a js alcuni "compiti" di layout
Ok, ci provo. Grazie assai.


 Ok, ci provo. Grazie assai.
Fammi sapere se ci sono novità.


 Fammi sapere se ci sono novità.
Per ora ho appena appena snellito il markup e il foglio di stile. Un grosso
miglioramento lo ho ottenuto evitando il cambio di background per gli
a:hover. Ancora non va bene, però, nonostante sia meglio di prima.
La cosa che mi turba è che, nella colonna centrale, ho 3 divisioni
(l'header, il contenuto, il footer); se elimino l'header, il tutto funziona
assai meglio. Non ho ancora capito perché.


 assai meglio. Non ho ancora capito perché.
Beh, lo puoi scoprire solo da solo, temo.


 viene allocata.
Meraviglioso comportamento, davvero :)
Grazie per la spiegazione.


 Grazie per la spiegazione.
Ma la si figuri. :)


 allora saremmo tutti agli inizi. Cosa, magari, filosoficamente vera.
Ok, va bene, hai ragione: non sono più un principiante.
Sono solo una mezza sega :)


 Fammi sapere se ci sono novità.
Senti questa cosa e dimmi se ti pare possibile.
Ho fatto innumerevoli prove ottenendo qualche miglioria senza, però, che il
problema si risolvesse del tutto. Poi ho cambiato lo stile di alcuni
elementi per i quali, al fine di ottenere un colore di sfondo chiarissimo,
avevo impostato come background un'immagine semitrasparente: mettendoci
semplicemente un colore invece dell'immagine, il rendering è tornato ad
essere normale, senza rallentamenti apprezzabili. E' possibile mai che il
problema principale fosse questo?


 problema principale fosse questo?
Come ti ho già detto, dipende molto dal contesto e quindi da come le varie
cose interagiscono tra di loro. Inoltre, come avevi già potuto appurare, IE
non è un fulmine per i background.
Ma grossi problemi di velocità di gestione di quest'ultimi, presi a sè, non ce
ne sono. Per questo bisogna ragionare sul contesto (CSS/Markup).
E poi, bisogna capire cosa intendi dire con "semitrasparente".
-- 
"E' un vero peccato che tutte le persone che sanno come far funzionare 
il Paese siano troppo occupate a guidare taxi o a tagliare capelli."
(George Burns)

 problema principale fosse questo?
Come ti ho già detto, dipende molto dal contesto e quindi da come le varie


 ne sono. Per questo bisogna ragionare sul contesto (CSS/Markup).
Dovrei fare ulteriori test... comunque, tolta quella immagine di
background, con lo stesso markup va enormemente meglio.


 background, con lo stesso markup va enormemente meglio.
Non ne dubito, ma ciò che intendevo dire io è che non è detto che sia
l'immagine in sé a dare da sola tutti i problemi; bensì in congiunzione col
tipo di codice CSS/Markup che hai.
Sinceramente non ho mai messo come background dell'intera pagina un'immagine
del genere, mi sono sempre limitato in passato ad aree relativamente piccole
(generalmente per dei box: come ombreggiature, o sfondi dello stesso).


 tipo di codice CSS/Markup che hai.
Sì sì, giusto... in effetti per questo volevo fare altri test. Prenderò
spunto dal tuo suggerimento per partire; il "problema" l'ho aggirato ma
vorrei anche capirlo :)


 vorrei anche capirlo :)
Fammi sapere se ci sono novità.
Rimane comunque tutto ciò che ti ho detto in precedenza per quanto riguarda IE
e i link; Ma mi stupiva in effetti che tu avessi avuto problemi del genere su
un sito web piuttosto che su una web application. :)


 un sito web piuttosto che su una web application. :)
Il problema non riguarda i link (semplicemente si "manifestava" su di essi)
ma il rendering in generale. Guarda un po' questa paginetta di prova:
http://www.nare.it/prove/iebg/
Il problema sembra presentarsi quando il background è costituito da
un'immagine ripetuta *solo se* l'immagine ha qualche pixel trasparente. Non
sembra esserci problema nel caso di immagini completamente opache ripetute
né nel caso di un'unica immagine non ripetuta, anche se essa ha alcuni
pixel trasparenti. Insomma, il problema è dato da ripetizione+trasparenza.
Ho scoperto l'acqua calda, vero? :)


 Ho scoperto l'acqua calda, vero? :)
Era intuibile; ma a me non è mai capitata una casistica del genere, quindi
adesso lo sappiamo con matematica certezza. :) 


 adesso lo sappiamo con matematica certezza. :)
Grazie, mi sento meno inutile :)
