Файл GWT Html с CSS

Ответ 1

Ответ заключается в том, как работает GWT. Поскольку GWT имеет только одну нагрузку на каждую загрузку модуля, встроенное кэширование действительно не вступает в игру.

Если вам просто нужен ответ: встроенный CSS уменьшает количество соединений TCP/IP, необходимых для загрузки всех файлов, которые составляют ваш проект. Это может быть нетривиально, если вы могут иметь несколько файлов CSS, высокую задержку и другие сетевые условия. В моей работе (государственном управлении) вам не всегда гарантируется "жирная труба".

GWT (или, по крайней мере, gwt-инкубатор) имеет механизм объединения оптимизации встроенного CSS с разделением информации и компоновки.

Введите ImmutableResources и StyleInjector. Эти две вещи (объединенные) приводят к способу загрузки ресурсов Immutable (после компиляции).

Чтобы использовать их, сначала загрузите gwt-инкубатор. Затем добавьте необходимые библиотеки в свой модуль .gwt.xml

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

Как только это будет сделано, создайте файлы CSS в качестве ресурсов кода. Я держу мой в исходном пути, как "org.project.client.resources. *". Вы можете сохранить их в отдельных сегментах, например: header.css, body.css, table.css. Сходите с ума, действительно держите вещи такими же раздельными, сколько хотите. Ваш путь к файлу должен выглядеть примерно так:/src/org/project/client/resources/header.css.

Теперь создадим интерфейс CSS. Теперь есть некоторые довольно специальные вещи, которые вы можете сделать с этим смотрите здесь. Но я только что пошел с основным.

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

public interface Css extends CssResource {

}

Теперь, когда у вас есть класс CssResource (и у вас могут быть разные), вам нужно создать неизменяемый пакет ресурсов, который завершает все ваши файлы 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();
}

Это будет во время компиляции создавать ссылки на неизменяемые ресурсы CSS. Теперь нам нужно как-то поместить (вставить) эти ресурсы CSS в модуль. Здесь находится StyleInjector.

Я помещаю код, похожий на следующий, в мой метод ввода "onModuleLoad".

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

В GWT могут быть другие способы достижения такого же эффекта, но сила CssResource может быть использована для большего количества вещей, чем то, что я здесь перешел. Например: в одном из моих проектов мне нужно небольшое изменение в CSS, чтобы IE и Firefox отображали то, что я считаю правильным. У меня есть два небольших отдельных раздела браузера в моем global.css, например:

/* 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;
    }
}

Возможность оставить эту логику из моего JavaScript/Java прекрасна. Там также небольшая оптимизация, потому что GWT будет делать только инъекции для браузеров, которые в ней нуждаются. (Отложенная привязка на основе браузера - это то, как много всего работает в GWT.)

Таким образом, механизм, предоставляющий встроенный CSS, также предоставляет другие преимущества при сохранении разделения CSS.

Что не любить?

Ответ 2

В принципе, требуется время, чтобы открыть TCP-соединение и запросить файл, поэтому он может сократить время, необходимое для загрузки всех файлов для страницы.

Кроме того, если вы собираетесь загружать этот файл в любом случае, в конце концов, это будет такое же количество полосы пропускания. Лучше иметь сокращенное время для передачи, чем уменьшенный размер файла.

Ответ 3

Inline CSS имеет некоторые преимущества, поскольку он переопределяет внешние таблицы стилей и всегда - по необходимости - использует последние версии CSS. Нижняя сторона заключается в том, что он явно зависит от страницы (и поэтому размывает намерение CSS отделять презентацию от разметки) и увеличивает размер файлов в целом (поскольку CSS не кэшируется и перезагружается каждый раз и для каждая страница - ничего не изменилось с тех пор, как я в последний раз читал о inline-css).

Внешние таблицы стилей имеют преимущество кэширования (и поэтому загружаются только при необходимости для обновлений или изменений в URI) и увеличиваются до первоначального времени загрузки/размера файла, но впоследствии не нужны, (если это необходимо).

Кроме того, конечно, все остальные страницы, ссылающиеся на таблицу стилей, не будут загружать файл CSS, если есть локальная копия. (Я не думаю, что это важно, если страницы находятся на одном или нескольких доменах, если URI последовательно ссылается на один и тот же файл, но я мог ошибаться.)

Ответ 4

Однако большую часть времени это снижение скорости вряд ли будет заметным, и хорошей практикой является отделить HTML от CSS. Поэтому делайте это только в том случае, если это действительно важно для оптимизации каждой части вашей страницы. Кроме того, рассмотрите не прямое вложение CSS, а скорее используйте какой-то объект/подобный, который будет генерировать CSS для вас. Таким образом, вы все равно можете сохранить CSS в отдельном файле и включить его в строку на страницах, которые в ней нуждаются (большинство не будет).