GWT Html file with CSS

Question

Cuando estoy creando un nuevo proyecto con GWT plug in crea un proyecto de esqueleto para mí. En el archivo html, hay un comentario que dice "Considere encuadrar CSS para reducir el número de archivos solicitados" ¿Por qué consideraría usar css en línea? ¿Es difícil tener css en un archivo separado que no esté en línea, reduce el tamaño de mi archivo? ¿No es verdad?

Answer 1

La respuesta radica en la forma en que opera GWT. Como GWT solo tiene una carga de página por carga de módulo, el almacenamiento en caché integrado no entra realmente en juego.

Si solo desea la respuesta: CSS en línea reduce el número de conexiones TCP/IP que se necesitan para cargar todos los archivos que componen su proyecto. Esto puede ser no trivial dado que puede tener múltiples archivos CSS, alta latencia y otras condiciones de red. En mi línea de trabajo (gobierno estatal) no siempre se garantiza una "tubería gruesa".

GWT (o al menos la incubadora gwt) tiene un mecanismo para combinar la optimización de CSS en línea con la separación de información y diseño.

Ingrese los ImmutableResources y StyleInjector. Estas dos cosas (combinadas) conducen a una forma de cargar recursos Inmutables (después de la compilación).

Para usar estos, primero descargue la incubadora gwt. A continuación, añadir las bibliotecas necesarias para su module.gwt.xml

<!-- immutable resources and injecting styles --> 
<inherits name="com.google.gwt.libideas.ImmutableResources" /> 
<inherits name="com.google.gwt.libideas.StyleInjector" /> 

Una vez hecho esto, crear los archivos CSS como código recursos.Mantengo el mío en la ruta de origen como "org.project.client.resources. *". Puede mantener estos en segmentos separados tales como: header.css, body.css, table.css. Enloquece, realmente mantén las cosas tan separadas como quieras. Su ruta de archivo debe ser similar a "/src/org/project/client/resources/header.css".

Ahora, para crear la interfaz CSS. Ahora, hay algunas cosas bastante especiales que puede hacer con este look here. Pero acabo de irme con el básico.

import com.google.gwt.libideas.resources.client.CssResource; 

public interface Css extends CssResource { 

} 

Ahora que usted tiene su clase CssResource (y que puede tener diferentes) que necesita para crear un paquete de recursos inmutable que envuelve todos los archivos CSS.

import com.google.gwt.core.client.GWT; 
import com.google.gwt.libideas.resources.client.ImmutableResourceBundle; 

public interface ResourceBundle extends ImmutableResourceBundle { 

    public static final ResourceBundle INSTANCE = GWT.create(ResourceBundle.class); 

    /* 
    * ============================= 
    * CSS 
    * ============================= 
    */ 

     @Resource("org/project/client/resources/header.css") 
     public Css headerCss(); 

     @Resource("org/project/client/resources/body.css") 
     public Css bodyCss(); 
} 

Esto, en tiempo de compilación, creará enlaces a los recursos de CSS inmutables. Ahora necesitamos poner (insertar) los recursos de CSS en el módulo de alguna manera. Aquí es donde entra el StyleInjector.

Pongo un código similar al siguiente en el método "onModuleLoad" de mi punto de entrada.

StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.headerCss().getText()); 
StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.bodyCss().getText()); 

Puede haber otras maneras de lograr el mismo efecto en GWT, pero el poder de la CssResource se puede aprovechar para más cosas de lo que he pasado por aquí. Por ejemplo: en uno de mis proyectos, necesito un pequeño cambio en CSS para que IE y Firefox rendericen lo que considero correc- tamente. Tengo dos secciones específicas pequeña del navegador en mi global.css así:

/* fix ie floating quirk */ 
@if user.agent ie6 ie7 ie8 { 
    #someElement { 
     top: -21px; 
     right: 5px; 
    } 
} 

/* fix firefox floating quirk */ 
@if user.agent ff gecko mozilla firefox Gecko Mozilla moz gecko1_8 { 
    #someElement { 
     top: -14px; 
    } 
} 

Ser capaz de salir de esta lógica de mi JavaScript/Java es hermosa. También hay una pequeña optimización aquí porque GWT solo hará la inyección para los navegadores que lo necesiten. (La vinculación diferida basada en el navegador es la función de muchas cosas en GWT).

Por lo tanto, el mecanismo que proporciona CSS en línea también proporciona otros beneficios a la vez que mantiene la separación de CSS.

Whats to love?

Answer 2

Básicamente, lleva tiempo abrir una conexión TCP y solicitar el archivo, por lo que puede reducir el tiempo que lleva cargar todos los archivos de una página.

Además, si va a cargar ese archivo de todos modos, al final tendrá la misma cantidad de ancho de banda. Es mejor tener un tiempo de transferencia reducido que un tamaño de archivo reducido.

Answer 3

CSS en línea tiene algunos beneficios, ya que exagera las reglas de hojas de estilo externas y siempre, por necesidad, utiliza las últimas revisiones de CSS. El lado negativo es que es claramente específico de la página (y así diluye la intención del CSS de separar la presentación del marcado) y aumenta el tamaño de los archivos en general (ya que el CSS no se almacena en caché, y se recarga cada vez y para cada página, a menos que algo haya cambiado desde la última vez que leí sobre inline-css).

Las hojas de estilo externas tienen la ventaja de estar en caché (y solo se cargan según sea necesario para actualizaciones o cambios de URI) y aumentan hasta el tiempo de descarga inicial/tamaño de archivo, pero, posteriormente, no son necesarias para ser re cargado (a menos que sea necesario).

Además, por supuesto, todas las otras páginas que hacen referencia a la hoja de estilo no descargarán el archivo CSS si hay una copia local. (No creo que importe si las páginas están en uno o varios dominios, siempre que el URI se refiera sistemáticamente al mismo archivo, pero podría estar equivocado).

Answer 4

Sin embargo, la mayoría de las veces esta disminución de velocidad apenas se notará, y es una buena práctica separar HTML de CSS. Solo haga esto si es REALMENTE importante optimizar cada parte de su página. Además, considere no incluir directamente el CSS, sino utilizar algún tipo de objeto/similar que genere el CSS en línea para usted. De esta forma, aún puede mantener el CSS en un archivo separado e incluirlo en línea en las páginas que lo necesitan (la mayoría no lo hará).