5

私はJavaで開発されたWebベースのアプリケーションを持っています。ロードするページごとに10以上のjsファイルと15以上の画像と10以上のcssファイルがあります。

ブラウザに読み込まれる各ファイルは単一のリクエストとして扱われるため、ページのパフォーマンスを向上させるためにWebサーバーへの複数のリクエストを回避するためのより良いソリューションを探しています。

4

6 に答える 6

2

Java で開発している場合は、Maven を使用している可能性があります。Maven には、CSS と JS のミニフィケーション、および css スプライトの作成のための非常に優れたプラグインがいくつかあります。pom xml の次のコードは、既存の css からスプライト画像を作成し、css と js を縮小します。

<plugin>
                <groupId>net.jangaroo</groupId>
                <artifactId>smartsprites-maven-plugin</artifactId>
                <version>1.5</version>
                <configuration>
                    <rootDirPath>${webappDirectory}/resources/css/sprites/</rootDirPath>
                    <outputDirPath>${webappDirectory}/resources/css/generated_sprites/</outputDirPath>
                    <cssFileSuffix>-generated-sprite</cssFileSuffix>
                    <logLevel>WARN</logLevel>
                    <spritePngDepth>AUTO</spritePngDepth>
                    <spritePngIeSix>false</spritePngIeSix>
                    <cssFileEncoding>UTF-8</cssFileEncoding>
                    <documentRootDirPath>${webappDirectory}</documentRootDirPath>
                </configuration>
                <executions>
                    <execution>
                        <id>createSprites</id>
                        <phase>generate-sources</phase>
                        <goals>
                             <goal>createSprites</goal>  
                        </goals>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>com.samaxes.maven</groupId>
                <artifactId>minify-maven-plugin</artifactId>
                <version>1.6</version>
                <executions>
                    <execution>
                        <id>minify-initial-load-css</id>
                        <phase>generate-sources</phase>
                        <configuration>
                            <charset>utf-8</charset>
                            <verbose>false</verbose>
                            <debug>true</debug>
                            <timeout>180</timeout>
                            <webappTargetDir>${targetDirectory}/resources/</webappTargetDir>
                            <cssSourceDir>/resources/css/</cssSourceDir>
                            <cssSourceIncludes>
                                <cssSourceInclude>initial_load/*.css</cssSourceInclude>
                                <cssSourceInclude>generated_sprites/*.css</cssSourceInclude>
                            </cssSourceIncludes>
                            <cssFinalFile>initial_load.css</cssFinalFile>
                        </configuration>
                        <goals>
                            <goal>minify</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>minify-internal-pages-css</id>
                        <phase>generate-sources</phase>
                        <configuration>
                            <charset>utf-8</charset>
                            <verbose>false</verbose>
                            <debug>true</debug>
                            <timeout>180</timeout>
                            <webappTargetDir>${targetDirectory}/resources/</webappTargetDir>
                            <cssSourceDir>/resources/css/</cssSourceDir>
                            <cssSourceIncludes>
                                <cssSourceInclude>internal_pages/*.css</cssSourceInclude>
                                <cssSourceInclude>generated_sprites/*.css</cssSourceInclude>
                            </cssSourceIncludes>
                            <cssFinalFile>internal_pages.css</cssFinalFile>
                        </configuration>
                        <goals>
                            <goal>minify</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>minify-initial-load-js</id>
                        <phase>generate-sources</phase>
                        <configuration>
                            <charset>utf-8</charset>
                            <verbose>false</verbose>
                            <debug>true</debug>
                            <timeout>180</timeout>
                            <jsEngine>closure</jsEngine>
                            <webappTargetDir>${targetDirectory}/resources/</webappTargetDir>
                            <jsSourceDir>/resources/js/initial_load</jsSourceDir>
                            <jsSourceIncludes>
                                <jsSourceInclude>jquery-1.7.1.min.js</jsSourceInclude>
                                <jsSourceInclude>*.js</jsSourceInclude>
                            </jsSourceIncludes>
                            <jsSourceExcludes>
                                <jsSourceExclude>*gui.nocache.js</jsSourceExclude>                              
                            </jsSourceExcludes>
                            <jsFinalFile>initial_load.js</jsFinalFile>
                        </configuration>
                        <goals>
                            <goal>minify</goal>
                        </goals>
                    </execution>

幸運を！

于 2013-02-07T22:18:15.857 に答える
0

おそらく grunt.js を見てください。コードを縮小/醜くし、ファイルを連結できるビルドプロセスをセットアップする必要があるため、最終的に .js ファイルが 1 つだけになります...

于 2013-02-05T07:34:55.140 に答える
0

これらは、使用すべき特定の最適化手法です。

  1. js を縮小する - Yahoo の YUI 圧縮を使用できます。
  2. CSS ファイルを 1 つにマージできます。
  3. 画像ファイル - CSS スプライトの使用 - CSS スプライトを適用してサーバーへのラウンドトリップを最小限に抑える方法については、Google の Web サイトにアクセスしてください。

何よりも、徹底的なコードレビューが最も重要な要素であり、再生成されたコードや未使用のコードを JS ファイルの方程式から除外します。

さらに最適化するには、Firefox で Firebug を使用し、Chrome でページ速度を使用して、JS パフォーマンスを測定してみてください。IE10 を使用する場合は、3 つのツールすべてを使用してページのパフォーマンスを判断します

于 2013-02-07T19:13:01.670 に答える
0

ほぼすべてのブラウザには、クライアント ブラウザにファイルを保存しないように外部的に定義しない限り、キャッシュ メカニズムがあります。ファイルがダウンロードされるとブラウザにキャッシュされるため、次回は同じファイルのヒットがブラウザ キャッシュから返されます。

したがって、あなたの場合、すべてのファイルが一度ダウンロードされ、次回はダウンロードされません。最初のヒットは遅くなりますが、その後は速くなります。

于 2013-02-05T06:11:04.157 に答える
0

CSS/JS ファイルを自分で 1 つのファイルにマージする意思がない限り、すべての CSS/JS/画像を 1 つのリクエストにバンドルする既存のソリューションはないと思います。画像の場合は、引き続き複数のリクエストになります。パフォーマンスを向上させるためにできることは次のとおりです。

  1. Javascript と CSS の場合、縮小機能を使用してダウンロード サイズを縮小できます。プロジェクトの 1 つで YUI を選択したところ、サイズが 40 ～ 50% 縮小されました。開発者が JavaScript をデバッグしやすくするために、難読化機能をオフのままにしました。縮小は、実行時またはビルド時に実行できます。邪魔にならないようにビルド時間を選択しました。

  2. ブラウザのキャッシュを活用して、サーバーへのリクエストを減らします。ただし、ブラウザーの設定はクライアントによって異なる可能性があるため、サーバー側のキャッシュ関連のヘッダーを使用して動作を制御することをお勧めします。静的ファイルの場合、ほとんどのアプリケーション サーバーには独自のデフォルト設定があります。たとえば、WebLogic は FileServlet を使用して css や javascript などの静的コンテンツの要求を処理します。これは、FileServlet がすべてのヘッダーを静的コンテンツに設定することです。デフォルトのヘッダーを変更してキャッシュ動作を微調整する方法の 1 つは、サーブレット フィルターを使用して応答オブジェクトのヘッダーを変更することです。

これらが役立つことを願っています。

于 2013-02-05T23:16:45.923 に答える
0

JoerまたはGranuleを見てください。これらは、css/javascript を縮小および最適化します。Jawr は、base64 エンコーディングを使用して css イメージを css 自体に埋め込むこともできますが、プロジェクトはしばらく更新されていませんが、複数のプロジェクトで正常に使用されています。

Granule は、高度な JavaScript 最適化技術を備えていると思われるGoogle Closure Compilerを使用しているようです。

于 2013-02-05T07:52:42.423 に答える