tag style script attribute javascript html css web minify

javascript - style - title html attribute



¿Es una mala idea reducir tu HTML, CSS y Javascript? (5)

alguien me dijo que recuerda un navegador que se comportaba mal cuando no hay espacios en blanco entre ciertas etiquetas (a saber, los elementos ul y li). ¿Es esto cierto?

No, esa afirmación es falsa. Así es como deberían funcionar los navegadores de acuerdo con la especificación HTML en relación con los espacios en blanco . Cualquier secuencia de espacios en blanco (pestañas, nuevas líneas, espacios) significa lo mismo.

Tome el siguiente marcado:

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

La reducción correcta de esto después de tener en cuenta también las reglas de salto de línea SGML que indican que el espacio en blanco después de la etiqueta de apertura y antes de que la etiqueta de cierre se pueda ignorar, la minifcación correcta sería:

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

Si una herramienta de minificación proporcionara lo siguiente, sería apropiado decir que el minificador se rompió.

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

La excepción a esta regla son las etiquetas PRE, que especifican contenido preformateado y se supone que los navegadores representan todos los caracteres de espacio en blanco, e imagino que también debería dejar CDATA como es, ya que técnicamente no es parte del contenido HTML.

Wikipedia define la minificación como ...

[...] el proceso de eliminar todos los caracteres innecesarios del código fuente sin cambiar su funcionalidad. Estos caracteres innecesarios suelen incluir caracteres de espacio en blanco, caracteres de nueva línea, comentarios y, a veces, delimitadores de bloque, que se utilizan para agregar legibilidad al código pero no se requieren para que se ejecute.

Actualmente estoy haciendo esto con mi HTML, CSS y Javascript para ahorrar ancho de banda, pero alguien me dijo que recuerda un mal comportamiento del navegador cuando no hay espacio en blanco entre ciertas etiquetas (a saber, elementos de ul y li ). ¿Es esto cierto?

¿Existen navegadores, servidores proxy u otros agentes de usuario notables que se comporten mal al tratar con el código minificado?

Aparte de perder la legibilidad al ver la fuente, ¿hay algún otro inconveniente para la minificación?


alguien me dijo que recuerda un navegador que se comportaba mal cuando no hay espacios en blanco entre ciertas etiquetas (a saber, los elementos ul y li). ¿Es esto cierto?

Sí, en ciertas circunstancias, como si los elementos están configurados para mostrar inline-block inline o en inline .

Las siguientes dos listas se mostrarán de manera diferente, debido al espacio en blanco entre los elementos <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; }

salida renderizada

http://jsfiddle.net/Uwv3e/


¿Es una mala idea reducir tu HTML , CSS y Javascript? ¡Sí, por supuesto!

Sin embargo, una buena idea es reducir tu CSS y Javascript.

¿Por qué?

  • La minificación funciona al (a) reemplazar nombres de variables legibles por humanos por nombres compactos, como "mySuperTollesFunctionCall ()" a "m ()" y por (b) Eliminar espacios en blanco
  • Su JavaScript puede beneficiarse tanto de (a) como de (b)
  • Tu CSS solo puede beneficiarse de (b)
  • Su código HTML, en teoría, solo podría beneficiarse de (b), pero no vale la pena intentarlo.

Cualquier editor de HTML bueno y sencillo puede formatear bien tu archivo HTML para ti. Tenga cuidado con los espacios en blanco dentro de los bloques "pre", le da pistas sobre el cumplimiento de W3C, etc., etc., etc.

Si le preocupa el tamaño de su archivo HTML ... Debe habilitar la compresión GZIP de archivos estáticos en su servidor web, la mayoría de los fósiles vivientes lo manejarán y sus clientes lo apreciarán.

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



Minification elimina la capacidad de mantenimiento por el bien de ... por lo general, alrededor de 4-8kb de ahorros en el tamaño de un sitio. Puede obtener más ahorros al comprimir un solo jpg en el sitio y eliminar los metadatos de la imagen.

A menos que esté construyendo un sitio web que tenga una cantidad MASIVA de páginas y subpáginas y más de 5,000 líneas de CSS y JS, encontrará que la minificación es una pérdida de esfuerzo, especialmente cuando se trata de mantenimiento y tiene que mantenga las versiones no minadas de los archivos que flotan solo para hacer correcciones, minimizar, sobrescribir los archivos minificados con la nueva versión, ore para que el siguiente tipo que mantiene el sitio use su mismo flujo de trabajo y no realice cambios en el archivo CSS minfiied, luego, cuando regresa y borra sus cambios ...

Traigo esto porque lo he visto suceder. He hecho los puntajes de GTmetrics y Pingdom en los sitios antes y después de la minificación, y la velocidad de la puntuación y la carga apenas cambian lo suficiente como para que valga la pena.

Siempre he llamado minification "Gastar dólares para ahorrar centavos". Tus esfuerzos se pueden gastar mejor en otro lugar en un proyecto de desarrollo.