6

当我使用 GWT 插件创建新项目时，它会为我创建一个框架项目。在 html 文件中有一条评论说“考虑内联 CSS 以减少请求文件的数量” 为什么我会考虑使用内联 CSS？我很难将css放在单独的文件中而不是内联会减小文件的大小？不是吗？

4

4 回答 4

19

答案在于 GWT 的运作方式。由于 GWT 每个模块加载只有一个页面加载，因此内联缓存并没有真正发挥作用。

如果您只想得到答案：内联 CSS 减少了加载构成项目的所有文件所需的 TCP/IP 连接数。 考虑到您可能有多个 CSS 文件、高延迟和其他网络条件，这可能并非易事。在我的工作（州政府）中，您并不总是能保证“肥管”。

GWT（或至少是 gwt-incubator）有一种机制，可以将内联 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 分离的同时还提供了其他好处。

不去爱的种种？

于 2009-06-30T22:29:59.530 回答
1

基本上，打开 TCP 连接并请求文件需要时间，因此它可以减少加载页面的所有文件所需的时间。

此外，如果您仍然要加载该文件，最终它将是相同数量的带宽。减少传输时间比减少文件大小要好。

于 2009-06-30T21:48:43.933 回答
1

内联 CSS 有一些好处，因为它超越了外部样式表，并且总是 - 根据需要 - 使用最新的 CSS 修订版。缺点是它显然是特定于页面的（因此稀释了 CSS 将表示与标记分开的意图），并且总体上增加了文件的大小（因为 CSS 没有被缓存，并且每次都重新加载）每页 - 除非自从我上次阅读有关 inline-css 以来发生了某些变化）。

外部样式表具有被缓存的好处（因此仅在更新或 URI 更改需要时加载），并增加初始下载时间/文件大小，但随后不需要重新加载（除非必要的）。

当然，如果有本地副本，所有其他引用样式表的页面都不会下载 CSS 文件。（我认为页面位于一个或多个域上并不重要，只要 URI 始终引用同一个文件；但我可能是错的。）

于 2009-06-30T21:50:09.203 回答
1

但是，大多数情况下，这种速度下降几乎不会引起注意，将 HTML 与 CSS 分开是一种很好的做法。因此，只有在优化页面的每个部分非常重要时才这样做。此外，请考虑不要直接内联 CSS，而是使用某种对象/类似对象来为您生成内联 CSS。这样，您仍然可以将 CSS 保存在单独的文件中，并将其包含在需要它的页面中（大多数不会）。

于 2009-06-30T21:52:15.753 回答