HTML-файл GWT с использованием CSS

StackOverflow https://stackoverflow.com/questions/1066250

  •  21-08-2019
  •  | 
  •  

Вопрос

Когда я создаю новый проект с подключаемым модулем GWT, он создает для меня скелетный проект.В html-файле есть комментарий, в котором говорится "Рассмотрите возможность встраивания CSS, чтобы уменьшить количество запрашиваемых файлов" Почему я должен рассматривать возможность использования встроенного css?Мне сложно, если css в отдельном файле не встроен, уменьшает размер моего файла?разве это не правда?

Это было полезно?

Решение

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

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

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

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

Чтобы использовать их, сначала загрузите gwt-incubator.Затем добавьте необходимые библиотеки в свой module.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.

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

Другие советы

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top