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?