CSS を含む GWT HTML ファイル

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

  •  21-08-2019
  •  | 
  •  

質問

GWT プラグインを使用して新しいプロジェクトを作成すると、スケルトン プロジェクトが作成されます。htmlファイルには次のようなコメントがあります 「リクエストされるファイルの数を減らすために CSS をインライン化することを検討してください。」インライン CSS の使用を検討する理由は何ですか?CSSをインラインではなく別のファイルに置くと、ファイルのサイズが小さくなりませんか?本当じゃないですか？

役に立ちましたか？

解決

答えは、GWT の動作方法にあります。GWT ではモジュールのロードごとに 1 ページのロードしかないため、インライン キャッシュは実際には機能しません。

答えだけが欲しい場合: インライン CSS は、プロジェクトを構成するすべてのファイルをロードするために必要な TCP/IP 接続の数を減らします。 複数の CSS ファイル、高い遅延、その他のネットワーク状況を考慮すると、これは重要な問題になる可能性があります。私の仕事（州政府）では、常に「太いパイプ」が保証されているわけではありません。

GWT (または少なくとも gwt-incubator) には、インライン CSS の最適化と情報とレイアウトの分離を組み合わせるメカニズムがあります。

ImmutableResources と StyleInjector を入力します。これら 2 つのことを (組み合わせて) 不変 (コンパイル時間後に) リソースをロードする方法が得られます。

これらを使用するには、まず 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 の力はここで説明したこと以外にも活用できます。例えば：私のプロジェクトの 1 つでは、IE と Firefox が正しく表示できるようにするために CSS を少し変更する必要があります。global.css には次のようなブラウザ固有の小さなセクションが 2 つあります。

/* 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 はキャッシュされず、毎回再ロードされるため) inline-css について最後に読んでから何か変更がない限り、すべてのページ)。

外部スタイルシートにはキャッシュされるという利点があり (そのため、更新または URI 変更に必要な場合にのみロードされます)、最初のダウンロード時間/ファイル サイズまで増加しますが、その後は再ロードする必要はありません (ただし、必要）。

また、当然ながら、ローカル コピーが存在する場合、スタイルシートを参照する他のすべてのページは CSS ファイルをダウンロードしません。(URI が一貫して同じファイルを参照している限り、ページが 1 つのドメイン上にあるか複数のドメイン上にあるかは関係ないと思います。しかし、私は間違っている可能性があります。）

ただし、ほとんどの場合、この速度低下はほとんど目に見えないため、HTML を CSS から分離することをお勧めします。したがって、ページのあらゆる部分を最適化することが本当に重要な場合にのみこれを行ってください。また、CSS を直接インライン化するのではなく、CSS をインラインで生成する何らかのオブジェクト/類似のものを使用することを検討してください。こうすることで、CSS を別のファイルに保存し、必要なページにインラインで含めることができます (ほとんどの場合はそうではありません)。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top