Sulle performance dei selettori CSS
Lunedì 16 Marzo 2009 - 08:39
di Cesare Lamanna
Ho finalmente avuto il tempo di leggere e studiare con calma il post Performance Impact of CSS Selectors di Steve Sounders.
Prendendo spunto da un’osservazione di David Hyatt (da noi già ripresa) sulle migliori prestazioni garantite dall’uso di classi e id rispetto all’adozione massiccia di selettori alternativi (discendenti, sibling e child) e riprendendo analoghe prove svolte da Jon Sykes, Sounders ha messo su una batteria di test per verificare l’impatto sui tempi di resa della pagina delle varie opzioni offerte dai CSS in fatto di selettori.
Come potete verificare, si va da una pagina senza stili applicati agli elementi ad una in cui gli stessi sono stati formattati ricorrendo a selettori discendenti (DIV DIV DIV P A.class0001 { background: #CFD; }, etc), passando per esempi in sui sono stati adottati selettori di tag, di classe e di tipo child.
Il grafico prodotto da Sounders che sintetizza i risultati offerti sui maggiori browser non va letto come un confronto tra le prestazioni dei programmi. Il dato che interessa è vedere quanto e come i tempi di caricamento aumentano passando dalla prima all’ultima pagina di test.
Bene, se è indubbio che si verifichi quasi sempre un rallentamento negli esempi con selettori discendenti e child, conclude Sounders, è altrettanto vero che il guadagno è in media davvero minimo. Ecco la frase con cui conclude:
Based on these tests I have the following hypothesis: For most web sites, the possible performance gains from optimizing CSS selectors will be small, and are not worth the costs.
Il post può essere uno spunto per riflettere sulla reale efficacia di queste tecniche di over-ottimizzazione. Vale davvero la pena sprecare del tempo o rivedere le proprie abitudini di lavoro sui CSS per un guadagno così misero nella stragrande maggioranza degli scenari d’uso reali?
Per dire, se si fosse zelanti all’estremo nel seguire certi consigli per cui, ad esempio, i selettori discendenti sono IL male per le prestazioni, non rimarrebbe che appesantire oltremodo il markup, magari arrivando al punto di assegnare un id a tutti gli elementi :).
Vi siete mai fatti influenzare dalla questione performance nella scrittura dei vostri CSS?
Commenti
1
Di solito scrivo i CSS come sono più comodi a me, preferendo utilizzare meno classi e id possibili.
2
Questione di punti di vista.
Secondo me con i selettori discendenti si perde in leggibilità del codice. Passi un livello ma due o tre sono francamente troppi.
Per quanto riguarda i tempi credo che, in ordine di importanza, ci siamo almeno cento cose da ottimizzare prima di questa…
3
Io sono della stessa idea espressa da Mattia: quando è possibile e vantaggioso mi affido ai selettori discendenti per usare meno classi e id possibili.
# - postato da Sky - 16 Marzo 2009 - 11:38
4
sempre mi faccio influenzare dalle performance
se non è ottimizzato il css, probabilmente non lo è nemmeno il codice javascript, html, flash, lato server, …
sommando il tutto, la differenza si nota eccome, fra un sito che scorre fluido e nomigliorare le perfomance significa migliorare l’usabilità e pure l’ambiente
quindi uso le classi, qualche sparuto id, e uso selettori discendenti solo quando mi fanno risparmiare molti bytes di codice html o css
# - postato da Mik - 17 Marzo 2009 - 07:07