Aunque el tamaño de un archivo de página web medido en K es realmente insignificante para el ancho de banda actual, cómo optimizar al mínimo el archivo de una página web medido en K sigue siendo una de las cuestiones que los diseñadores web deben considerar.
Como todos sabemos, sin afectar la estructura y funciones de toda la página web, cuanto más pequeño sea el archivo de la página web, mejor, porque los archivos de página web más pequeños ayudan al navegador a acortar el tiempo de interpretación de la página web y los visitantes naturales no tienen a enfrentar La irritación de esperar a que las páginas web aparezcan lentamente es aún más obvia para los usuarios con poco ancho de banda y velocidades de Internet lentas. Imagínese, ¿le gustaría que todo el sitio apareciera frente a usted inmediatamente cuando abre un sitio web? ¿O prefieres pasar más de diez segundos o incluso unos minutos viendo cómo el navegador interpreta poco a poco todo el sitio?
En la era del diseño de tablas, el código se repetía innumerables veces junto con la tabla en la página, lo que hacía que todo el archivo de la página web se volviera extremadamente hinchado, la legibilidad del código también se reducía al mínimo y el tiempo de interpretación del navegador, naturalmente. aumentó mucho. Desde que el diseño DIV+CSS reemplazó al diseño de la Tabla, todo se ha mejorado enormemente, lo que permite que la Tabla vuelva a su posición original para mostrar datos, y el diseño se deja en DIV+CSS, por lo que se ha mejorado la legibilidad y reutilización del código. Y el punto más importante de DIV + CSS es distinguir el rendimiento y la estructura del archivo de la página web, de modo que no sea necesario cambiar la estructura de todo el archivo de la página web para mejorar el rendimiento.
Aunque el método de diseño DIV+CSS ha minimizado el código inflado en el diseño de tabla anterior, para los diseñadores web, cómo controlar el tamaño de los archivos de la página web al mínimo es una cuestión que siempre vale la pena explorar y seguir.
Mire el siguiente fragmento de código:
#encabezado { |
Dicho fragmento de código CSS tiene una estructura muy clara, una estructura clara y muy legible. Sin embargo, dicho fragmento de código no se ha simplificado, lo que significa que es el código CSS más original. Veamos el código simplificado a continuación. .
| #encabezado { margen: 10px 15px; fondo:#333 url(Imágenes/encabezado.jpg); } |
Existe el término atributo compuesto en CSS, que significa que muchos parámetros de atributo se pueden integrar juntos. Por ejemplo, el "margen superior; margen derecho; margen inferior; margen izquierdo" anterior se puede integrar en un "margen". "propiedad y luego proporcione parámetros para ella.
A través de esto, podemos optimizar aún más el código basado en el código CSS original. Además, la estructura escrita de esta manera también es razonable y la legibilidad es igualmente sólida. Pero esto no es suficiente para una racionalización extrema. Para aclarar la estructura de este código CSS, utilizamos espacios, saltos de línea y otras cosas que ocupan espacio. ¿Qué pasa si eliminamos estas cosas que ocupan espacio?
| #encabezado{margen:10px 15px;fondo:#333 URL(Imágenes/encabezado.jpg);} |