Esistono compressori CSS davvero intelligenti?

Ho testato alcuni compressori CSS e, ad essere sincero, sono deluso. Forse ho appena provato quelli sbagliati?Esistono compressori CSS davvero intelligenti?

Punto di partenza è stato il seguente, intenzionalmente male css-code:

.a{ 
    font-size: 10px; 
    padding: 0 6px; 
    text-align: center; 
} 
.b{ 
    font-size: 11px; 
    padding: 0 6px; 
    text-align: center; 
}

che è, abbastanza evidente, senza senso nel dichiarare 2 di 3 oggetti di entrambe le classi e si traduce in 185 byte di codice. Se si scrive meglio manualmente sarebbe simile

.a, .b{ 
    padding: 0 6px; 
    text-align: center; 
} 
.a{ 
    font-size: 10px; 
} 
.b{ 
    font-size: 11px; 
}

, che è un po 'più piccole (149 byte) o addirittura

.a, .b{ 
    padding: 0 6px; 
    text-align: center; 
    font-size: 10px; 
} 
.b{ 
    font-size: 11px; 
}

che è 133 byte prima e

.a,.b{padding:0 6px;text-align:center;font-size:10px}.b{font-size:11px}

solo 71 byte dopo la compressione. Questo sarebbe 100/185 * 71 = 38,3% della dimensione originale.

Che tutti compressioni fatto però era:

.a{font-size:10px;padding:0 6px;text-align:center}.b{font-size:11px;padding:0 6px;text-align:center}

che è 100 byte.

Naturalmente, in un mondo ideale dovresti scrivere codice CSS migliore nella prima mano, ma non è facile se scrivi file più grandi e quasi impossibile se utilizzi qualsiasi framework.

Quindi, ci sono strumenti migliori là fuori che risultano in qualcosa come 71 byte per il codice di esempio sopra?

fonte

2013-02-13 Raphael Jeger

Tale strumento sarebbe terribilmente complicare di scrivere ed i suoi bug può potenzialmente rovinare la vostra CSS in modo difficile da individuare - immagino che qualcuno ne abbia scritto uno. –

Sono d'accordo. Mentre il tuo esempio è piuttosto semplice e diretto, immagina un file CSS con centinaia di classi definite in cui ogni proprietà è condivisa da due o più classi. Non credo che ciò porterebbe a un file CSS significativamente più piccolo. – Paul

Per aggiungere complessità, l'ordine delle regole è importante per le sostituzioni in CSS. Spostare elementi in un file CSS senza influire sul risultato non è un compito facile. –

Quando usare gzip dopo la compressione CSS (come il suo suggerito dalla maggior parte delle guide di prestazioni) allora si ha un diverso risultato, perché l'uscita dai compressori CSS è meglio zipable.

La versione compressa CSS è 85 byte dopo gzip e il tuo è 89 byte dopo gzip.

Quindi, quando si usa gzip dopo la compressione CSS, il codice degli strumenti vince. Inoltre il risultato è più simile al codice originale che lascia meno spazio per gli errori a causa dell'eccessiva ottimizzazione del tuo CSS.

Tuttavia, il codice CSS vince nella versione non compressa con 71 byte.

L'ottimizzazione che hai fatto ha un caso d'uso molto localizzato in cui i selettori sono uno accanto all'altro nel file CSS.

Qualche esempio violini che mostra il problema:

.a { 
    height:50px; 
    width:50px; 
    background-color: yellow; 
} 

.b { 
    background-color: red; 
} 

.c { 
    background-color: yellow; 
}

fonte

2013-02-13 09:12:53

"il mio codice" in questo esempio speciale vince in ogni caso in una versione non compresso contro ogni compressore + gZip, che è in qualche modo "non cool" ... –

Bene, come @DA. ha dichiarato nel suo commento che l'ottimizzazione funziona solo per i selettori che sono uno accanto all'altro nel file. Altrimenti puoi cambiare la semantica. Aggiungerò un esempio in cui ciò accade alla mia risposta. Quindi questa ottimizzazione ha un caso d'uso molto localizzato. –

sì, questo ha senso. Sarebbe complesso e anche a seconda di dove vengono utilizzate le classi, giusto? –

La compressione può sembrare insignificante, ma che altro ti aspetti che faccia? Qualsiasi tipo di compressore CSS che puoi immaginare ti porterà solo lontano prima di maneggiare il tuo codice.

CSS è dopotutto, non un linguaggio di programmazione.

fonte

2013-02-13 09:03:04

La definizione di CSS cambierà sicuramente con la sua versione 4. Arriva con formule, condizioni e così via :) – Dipak

CSS è [già completo di Turing] (http://stackoverflow.com/questions/2497146/is-css- turing-complete);) –

@Dipaks Ciò non significa che la logica del selettore cambierà, vero? Voglio dire, non puoi usare alias come potresti con una chiusura JS. Inoltre, non è in grado di ottimizzare i selettori, poiché è necessario conoscere il DOM. La tecnologia sperimentale come 'calc' non ha alcun impatto sull'opportunità o meno di comprimere i CSS in modo più efficace di quanto sia possibile oggi. –

Gzip i file

By gzipping il file css sul Bargaineering, la sua dimensione è sceso da 28.2K a 7.3k, un 74,1% di risparmio. Il tempo di risposta per quel file è passato da 53 ms a 39 ms, con un risparmio del 26,4%.

How to GZip CSS Files

fonte

2013-02-13 09:05:19 Dipak

Non potrei Gzip il mio esempio con 71 byte dall'alto e diventerebbe ancora più piccolo? –

@RaphaelJeger No, il codice di esempio diventa più grande. Il tuo codice di esempio è 89 byte dopo gzip. Quindi gzip aumenta le tue dimensioni del 24%. –

Esistono compressori CSS davvero intelligenti?

risposta

Problemi correlati