Minimizzare HTML, CSS e Javascript è una cattiva idea?

Question

Wikipedia defines minification come ...

[...] il processo di rimozione di tutti i caratteri non necessari dal codice sorgente senza cambiare la sua funzionalità. Questi caratteri non necessari di solito includono caratteri di spazio bianco, caratteri di nuova riga, commenti e talvolta delimitatori di blocchi, che vengono utilizzati per aggiungere leggibilità al codice ma non sono necessari per l'esecuzione.

Attualmente sto facendo questo per il mio HTML, CSS e Javascript al fine di risparmiare larghezza di banda, ma qualcuno mi ha detto che si ricorda di un comportamento anomalo del browser quando non c'è spazio bianco tra alcuni tag (cioè ul e li articoli) . È vero?

Esistono browser, proxy o altri agenti utente che si comportano male quando si gestiscono codici minificati?

Oltre a perdere la leggibilità durante la visualizzazione della fonte, c'è qualche altro svantaggio della minificazione?

Answer 1

Alcuni browser versioni di IE hanno problemi con minified font-face dichiarazioni, vedi:

• CSS fonts not loading in IE9
• How to minify CSS with font-face

Answer 2

qualcuno mi ha detto che si ricorda un comportamento anomalo del browser quando c'è nessuno spazio bianco tra alcuni tag (namel y ul e li articoli). È vero questo ?

Sì, in alcune circostanze, come se gli elementi sono impostati per visualizzare inline-block o inline.

Le due liste seguenti renderanno diversamente, a causa della spaziatura tra gli elementi <li>:

html

<ul> 
    <li>simple</li> 
    <li>list</li> 
</ul> 

<ul><li>minified</li><li>list</li></ul> 

css

li { 
    display: inline-block; 
    background: blue; 
    color: white; 
} 

output di rendering

http://jsfiddle.net/Uwv3e/

Answer 3

Is Minimizzando il tuo HTML, CSS e Javascript una cattiva idea? Sì, naturalmente!

Una buona idea è, tuttavia, di minify tua CSS e Javascript

Perché?

• Minification funziona (a) sostituendo i nomi delle variabili leggibili per i nomi compatti, come "mySuperTollesFunctionCall()" a "m()" e da (b) Rimuovere Spazi bianchi
• Javascript puoi beneficiare di entrambi (a) e (b)
• Il tuo CSS può beneficiare solo di (b)
• Il tuo codice HTML, in teoria, potrebbe beneficiare solo di (b) ma non vale la pena provare.

Qualsiasi semplice editor HTML di buona qualità è in grado di formattare il file HTML per te. Prenditi cura degli spazi bianchi all'interno dei blocchi "pre", fornisci suggerimenti sulla conformità al W3C, ecc. Ecc.

Se sei preoccupato delle dimensioni del tuo file HTML ... Dovresti abilitare la compressione GZIP dei file statici nel tuo server web, la maggior parte dei fossili viventi lo gestiranno, e i tuoi clienti lo apprezzeranno.

http://www.schroepl.net/projekte/mod_gzip/browser.htm

Answer 4

qualcuno mi ha detto che si ricorda un comportamento anomalo del browser quando non c'è senza spazi bianchi tra alcuni tag (ovvero ul e gli elementi LI). È vero questo ?

Nessuna affermazione è falsa. Ecco come i browser dovrebbero funzionare secondo lo HTML specification regarding whitespace. Qualsiasi sequenza di spazi bianchi (tabulazioni, newline, spazi) indica la stessa cosa.

Prendiamo il seguente markup:

<ul> 
    <li>A</li> 
    <li>B</li> 
</ul> 

la correttezza minimizzazione di questo dopo aver preso in considerazione anche SGML line break rules affermando che gli spazi dopo il tag di apertura e prima del tag di chiusura può essere ignorato, allora la minifcation corretta sarebbe :

<ul><li>A</li> <li>B</li></ul> 

Se uno strumento minification ha dato i seguenti sarebbe opportuno dire che la minifier era rotto.

<ul><li>A</li><li>B</li></ul> 

L'eccezione a questa regola è tag PRE, che specificano contenuti preformattato e browser si suppone di rendere tutti i caratteri di spaziatura, e l'immagine che ti avrei anche bisogno di lasciare CDATA come è dal momento che è tecnicamente non fa parte del Contenuto HTML.

Answer 5

Minification rimuove la manutenibilità per il ... di solito circa 4-8kb di risparmio su una dimensione del sito. Puoi ottenere più risparmi comprimendo un singolo jpg sul sito e rimuovendo i meta-dati dell'immagine.

A meno che non si stia costruendo un sito Web che ha una MOLTA quantità di pagine e sottopagine e modelli e oltre 5.000 linee di CSS e JS, si troverà che la minimizzazione è uno spreco di energie, specialmente quando la manutenzione arriva a giocare e devi mantenere versioni non terminate dei file che girano solo per fare correzioni, minimizzare, sovrascrivere i file minificati con la nuova versione, pregare il prossimo che mantiene il sito usa lo stesso flusso di lavoro e non apporta modifiche al file CSS minifisso , poi quando torni e cancelli le sue modifiche ...

Lo porto perché l'ho visto accadere. Ho fatto i punteggi GTmetrics e Pingdom sui siti pre e post minification e il punteggio e la velocità di caricamento cambiano a malapena abbastanza da renderlo valevole.

Ho sempre chiamato minification "Spendere dollari per risparmiare centesimi". I tuoi sforzi possono essere meglio spesi altrove in un progetto di sviluppo.