2011-01-04 25 views
8

sé que hay varias herramientas por ahí que son capaces de ofuscar los archivos JavaScript como girando unas funciones sencillas como:minifying y Obsfucating CSS similar a Javascript

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

en

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

Mi ¿Existe algo como esto para usar con CSS/HTML (o hay alguna herramienta que tenga un efecto similar)? En particular, una herramienta de minimización/ofuscación que realmente cambia el nombre de las variables y referencias y elimina el espacio en blanco adicional, etc.

Y en caso afirmativo, ¿los beneficios en el rendimiento superarían la legibilidad/ofuscación de CSS/HTML/JavaScript?

+0

Seguramente cuando minimizas algo, ¡estás arrojando la legibilidad por la ventana completamente! –

+0

Estoy de acuerdo: me pregunto si los beneficios de la ofuscación valen la pena por los aumentos (si corresponde) en el rendimiento. –

+0

Creo que la única ventaja es que el archivo es más pequeño, por lo que ahorrará ancho de banda si lo envía a miles de agentes de usuarios por día. –

Respuesta

9

Es muy difícil "minificar" HTML o CSS porque todo lo que se puede guardar con seguridad es espacio en blanco (que no equivale a un gran ahorro). En cuanto al cambio de nombre de clase, se pierde una parte importante de la web que tiene un código semántico (que representa el significado). Creo que la mejor opción es garantizar que tenga habilitada la compresión gzip en su servidor web y centrarse en combinar sus activos en un solo archivo siempre que sea posible.

+0

Gracias Kevin - Me preguntaba si había alguna herramienta para ayudar a realizar una tarea como esa (en realidad ofuscar un archivo CSS y luego revisar y cambiar el HTML real en consecuencia) ya que estoy seguro de que algunos diseñadores anales no lo harían No quiero una posibilidad de que su trabajo sea "reutilizado". –

+19

cualquier "Desarrollador web" que crea que su trabajo debe estar a salvo de la reutilización es indigno del título. – zzzzBov

+0

+1 para su comentario zzzzBov. :) –

2

El compresor YUI minifies CSS, pero no estoy seguro de cuán grande puede ser la ganancia sobre la simple compresión gzip. Si tienes tanto CSS, podría ser una señal de advertencia de problemas mayores.

+0

Gracias Hank, he echado un vistazo al compresor YUI anteriormente, ya que creo que "minimiza CSS" tanto como puede (elimina todo el espacio en blanco). Solo quería ver si había alguna similar a la de las herramientas de estilo JavaScript. (Ah, y no te preocupes, esto no fue preguntado por un problema, más bien por curiosidad) –

+0

Hank: si trabajas en un proyecto grande (especialmente en un entorno empresarial), es común encontrar una gran cantidad de archivos CSS que requieren minificación para reducir el impacto en el rendimiento del sitio. He visto algunas grandes compañías que usan YUI Compressor para manejar la minificación de CSS. Sin embargo, la ofuscación no es tanto. – calvinf

+0

@calvinf Estoy seguro de que hay excepciones a la regla, pero la mayoría de los sitios realmente no deberían necesitar resmas y resmas de CSS. Incluso si necesita un * lote * de CSS, ¿cuántos KB necesita para empezar que un minificador de CSS tenga un impacto sustancial? ¿No concatenarlos a todos en un solo archivo, los ajustes de caché y la compresión GZip tienen un impacto mucho mayor? –

1

Tome un vistazo a esto: minifycss

En cuanto a la ofuscación No estoy seguro de que esta es una buena idea. Las clases de CSS se pueden manipular en cualquier lugar. En el momento en que cambie el CSS perderá el enlace a las clases/identificadores, etc. ...

0

Eche un vistazo a html5boilerplate.com; específicamente el último código fuente en GitHub.

La secuencia de comandos de compilación de HTML5Boilerplate puede minify JavaScript, CSS y HTML para usted. No cambia el nombre de los selectores de CSS, pero es probable que sea el más cercano a un "ocultador" automático que encontrará.


Si usted está buscando para eek algunos bytes adicionales de cada página asegúrese de que está utilizando gzip/desinflado de compresión y luego tratar de ordenar alfabéticamente las propiedades de selectores CSS y los atributos de su elemento HTML y sus valores.

Read this para las recomendaciones detalladas de Google sobre el método anterior.


En algunos lenguajes dinámicos con ayudantes HTML (como asp.net/C#) puede sobrescribir el método "ClientID" del html-control para que sea una cadena aleatoria de forma dinámica y vincular sus selectores CSS para el código HTML (bueno, los controles del lado del servidor que rinden HTML). Pero eso sería para otra pregunta por completo y es probable que no sea en lo que estás buscando entrar. También se convertiría en una pesadilla de mantenimiento.


0

Si utiliza Ruby, aquí es una Ruby CSS Minifier que utilizo con buenos resultados. Dado mi estilo ya escueto, me da una reducción del 15% en el tamaño de mis archivos.

Por ejemplo, en un proyecto, el agregado de 5 archivos en 32.3kiB se convierte en 1 archivo de 26.4kiB (18%). En otro proyecto, 2 archivos de 21.6kiB se convierten en 1 archivo de 19.0kiB (12%).

9

HTML Muncher es una herramienta de python que intenta cambiar el nombre de los ID y los nombres de las clases CSS a través de HTML, javascript y archivos CSS. Puede utilizarlo como un primer paso en su proceso de optimización, antes de pasar los archivos a otras herramientas, como el compilador de cierres de Google o el compresor de YUI CSS.

+0

HTML Muncher es una gran herramienta. Sin embargo, los ahorros nunca serán enormes si ya está usando gzip. Original = 148k - ** Minify + gzip = 17929 v. Munched + minify + gzip = 15905 ** - un ahorro de aproximadamente 2k para un montón de trabajo – CalM

+0

cuenta esos 2kb para millones de visitas a páginas, y hará la diferencia :) –

-1

Hay muchas herramientas en línea que puede utilizar para cosas como la minificación css. ¡Aquí hay un online css minifier! Encontré.

En cuanto a cambiar el nombre de las clases de CSS, intentaré evitarlo ya que perderá mucha legibilidad de su html.

-3

He desarrollado la herramienta para la ofuscación de CSS. Su objetivo no es hacer que las hojas de estilo se carguen más rápido o lo que sea, sino hacer que su trabajo "reutilizable" esté a salvo del robo. Tiene varios métodos para obtener una fuente original de CSS (pero aún está en desarrollo y se usarán mejores métodos). Lo recomendaría a los vendedores de plantillas de HTML/CSS, que ofrecen demostraciones en vivo y están preocupados por los robos, y también para los programadores, los trabajadores independientes, que quieren presentar su trabajo a los clientes (poco exigentes). Puedes probarlo: http://cssobfuscator.com

Cuestiones relacionadas