2011-01-04 11 views
8

So che ci sono diversi strumenti là fuori che sono in grado di offuscare file JavaScript come ad esempio girando un semplici funzioni come:minifying e Obsfucating CSS simile a JavaScript

function testing() 
{ 
    var testing; 
    var testing2; 
    alert(testing+testing2); 
} 

in

function a(var a,b;alert(a+b);) 

mio domanda è che qualcosa di simile esiste per l'uso con CSS/HTML (o c'è uno strumento che ha un effetto simile)? In particolare, uno strumento di minimizzazione/offuscamento che in realtà rinomina variabili e riferimenti ed elimina ulteriori spazi bianchi ecc.

E se sì - i vantaggi in termini di prestazioni superano la leggibilità in entrambi i CSS/HTML/JavaScript minification/offuscamento?

+0

Sicuramente quando si minimizza qualcosa, si sta gettando via la leggibilità fuori dalla finestra! –

+0

Sono d'accordo - Mi chiedo solo se i benefici dell'offuscamento valgono gli aumenti (se ce ne sono) nelle prestazioni. –

+0

Penso che l'unico vantaggio è che il file è più piccolo, quindi la larghezza di banda di risparmio se si spinge a migliaia di agenti utente al giorno. –

risposta

9

È molto difficile "minify" HTML o CSS perché tutto ciò che può essere salvato in modo sicuro è lo spazio bianco (che non equivale a un enorme risparmio). Per quanto riguarda la ridenominazione della classe, perdi una parte importante del web che sta avendo il codice semantico (che rappresenta il significato). Penso che l'opzione migliore sia garantire di avere la compressione gzip abilitata sul tuo server web e concentrarti sulla combinazione delle tue risorse in un singolo file, laddove possibile.

+0

Grazie Kevin - Mi stavo chiedendo se ci fossero degli strumenti là fuori per aiutare a svolgere un compito del genere (in realtà offuscando un file CSS e poi passando e modificando il codice HTML di conseguenza) come sono sicuro che alcuni progettisti anali là fuori non avrebbero Non voglio che il loro lavoro venga "riutilizzato". –

+19

qualsiasi "Sviluppatore Web" che ritiene che il proprio lavoro debba essere al riparo dal riutilizzo è indegno del titolo. – zzzzBov

+0

+1 per il tuo commento zzzzBov. :) –

2

Il compressore YUI minifies CSS, ma non sono sicuro di quanto grande possa essere la vittoria rispetto alla semplice compressione gzip. Se hai così tanto CSS, potrebbe essere un segnale di avvertimento di problemi più grandi.

+0

Grazie Hank - Avevo dato una breve occhiata al compressore YUI in precedenza - come ritengo che "riduca i CSS" il più possibile (rimuove tutto lo spazio bianco). Volevo solo vedere se ci fosse qualcosa di simile a quello degli strumenti in stile JavaScript. (Oh e non ti preoccupare - questo non è stato chiesto a causa di un problema, più solo di curiosità) –

+0

Hank - se lavori su un progetto di grandi dimensioni (in particolare in un ambiente aziendale) è comune incontrare una miriade di file CSS che richiedere la minificazione al fine di ridurre l'impatto delle prestazioni sul sito. Ho visto alcune grandi aziende utilizzare YUI Compressor per gestire il minification CSS. Obfuscation, tuttavia ... non così tanto. – calvinf

+0

@calvinf Sono sicuro che ci sono delle eccezioni alla regola, ma la maggior parte dei siti non dovrebbe davvero avere bisogno di risme e risme di CSS. Anche se hai bisogno di un * lotto * di CSS, quanti KB hai bisogno per iniziare che un minificatore CSS abbia un impatto sostanziale? Non concatenarli tutti in un unico file, le modifiche nella cache e la compressione GZip hanno un impatto molto più grande? –

1

Date un'occhiata a questo: minifycss

Per quanto riguarda l'offuscamento non sono sicuro che questa sia una buona idea. Le classi css possono essere manipolate ovunque. Nel momento in cui cambi il css perderai il link alle classi/id ecc ...

0

Dai uno sguardo allo html5boilerplate.com; in particolare l'ultimo codice sorgente su GitHub.

Lo script di build HTML5Boilerplate può minify JavaScript, CSS e HTML per te. Non rinomina i selettori CSS ma è probabilmente il più vicino a un "obfuscator" automatico che troverai.


Se stai solo cercando di eek fuori alcuni byte aggiuntivi da ogni pagina assicurarsi che si sta utilizzando gzip/sgonfiare compressione e quindi provare alfabetizzato le proprietà del selettore CSS e gli attributi del vostro elemento HTML ed i loro valori.

Read this per le raccomandazioni dettagliate di Google sul metodo sopra.


In alcuni linguaggi dinamici con aiutanti HTML (come asp.net/C#) è possibile sovrascrivere il metodo "ClientID" del html-controllo per essere una stringa casuale in modo dinamico e collegare i vostri selettori CSS per il codice HTML (o meglio, i controlli lato server che rendono HTML). Ma quello sarebbe per un'altra domanda interamente e probabilmente non è quello che stai cercando di entrare. Sarebbe anche diventato un incubo di manutenzione.


0

Se si utilizza Ruby, ecco un Ruby CSS Minifier che uso per buon effetto. Dato il mio stile già deciso, mi dà una riduzione del 15% circa delle dimensioni dei miei file.

Ad esempio, su un progetto l'aggregato di 5 file su 32.3kiB diventa 1 file di 26.4kiB (18%). Su un altro progetto, 2 file di 21.6kiB diventano 1 file di 19.0kiB (12%).

9

HTML Muncher è uno strumento python che tenta di rinominare ID e nomi di classi CSS in file HTML, javascript e CSS. Puoi utilizzarlo come primo passo nel processo di ottimizzazione, prima di passare i file ad altri strumenti come Google Closure Compiler o YUI CSS Compressor.

+0

HTML Muncher è un ottimo strumento. Tuttavia, i risparmi non saranno mai enormi se stai già utilizzando gzip. Originale = 148k - ** Minify + gzip = 17929 v. Munched + minify + gzip = 15905 ** - un risparmio di circa 2k per un sacco di lavoro – CalM

+0

account quei 2kb per milioni di visualizzazioni di pagina, e farà la differenza :) –

-1

Ci sono molti strumenti online che è possibile utilizzare per cose come la minificazione della css. Ecco uno online css minifier! Ho trovato.

Per quanto riguarda la ridenominazione delle classi css, proverei ad evitarlo poiché perderai molta leggibilità dal tuo html.

-3

Ho sviluppato uno strumento per offuscare i CSS. L'obiettivo non è quello di far caricare i fogli di stile più velocemente o altro, ma di rendere sicuro il tuo lavoro "riutilizzabile" dal furto. Ha diversi metodi su come ottenere un sorgente CSS originale (ma è ancora in fase di sviluppo e verranno utilizzati metodi migliori). Lo consiglierei ai venditori di template HTML/CSS, che forniscono dimostrazioni dal vivo e sono preoccupati per i furti, e anche per i programmatori - freelance, che vogliono presentare il loro lavoro a clienti (non fidati). Si può provare: http://cssobfuscator.com

Problemi correlati