この記事では、小さなCombinatorius Javaライブラリーを使用して、リソースとそれに続く最小化と圧縮を組み合わせてJavaScriptとCSSを転送する方法について説明します。これにより、コンテンツの転送を高速化および単純化できます。

デモ： combinatorius.dkiriusin.com

GitHub： github.com/deniskiriusin/combinatorius

主なライブラリ機能

JavaScriptとCSSをそれぞれ1つのJavaScriptとCSSリソースに組み合わせて、HTTP要求の数を減らします。
応答時間を改善するために生成されたデータのローカルキャッシュ。
ブラウザーの条件付きリクエストを支援する正しいExpiresおよびCache-Control HTTPヘッダー。
ブラウザのキャッシュとサーバー上のデータ間の対応を決定するためのETagサポート。
HTTP応答のサイズを縮小するGzip圧縮。
YUI Compressorのサポート。
転送されたリソースのバージョンのサポート（指紋と静的リソースのバージョン管理）。
URLまたはCookieオプションを介したCSSテーマのサポート。
シンプルな構成。

簡単な分析

Webページの読み込み速度は、Web開発者が知っておく必要のある多くの要因に依存します。

インターネットプロバイダーによって提供される速度、DNS設定、またはリソースの地理的な場所については説明しませんが、HTTPプロトコルと、CSSおよびJavaScriptコンテンツの転送を加速するために使用できる方法に焦点を当てます。

したがって、ページの読み込み速度に影響する主な要因は次のとおりです。

-送信されたコンテンツのサイズ

-HTTPリクエストの数

したがって、私たちの目標は、送信されるコンテンツのサイズとサーバーへのリクエストの数を最小限に抑えることです。

問題1：転送されたコンテンツ

ページが読み込まれるとどうなるかを考えてください。豊富なユーザーインターフェイスを備えた最新のインターネットリソースは、コンテンツをダウンロードするために数十、時には数百のHTTP要求を送信します。それらの多くはCSSとJavaScriptにあります。送信されるCSSおよびJavaScriptの総重量は通常、数百キロバイト以上です。コンテンツを最小化および圧縮することにより、送信されるコンテンツの量を減らすことができます。

最小化とは、機能を維持しながらスクリプトを減らすことをタスクとするプロセスです。これは、スクリプトからコメントを削除すること、スペース、および変数の名前を減らすことによって実現されます。

ライブラリはYUI Compressorを完全にサポートし、CSS / JavaScriptとデータ圧縮用のgzipを最小化します。これにより、送信されるCSSとJavaScriptの総重量を時々減らすことができます。デフォルトでは、ライブラリは、名前にサフィックス「.min。」が含まれるリソースを最小化しません。

prop.YUI.OmitFilesFromMinificationRegEx = .*\\.min\\.(js|css)$

正規表現はcombinatorius.properties

で変更できます。

データ圧縮はリソースを大量に消費するプロセスであるため、最終データはサーバー側とクライアント側の両方でキャッシュされ、後続のリクエストではキャッシュから直接提供されます。 CSSとJavaScriptが変更されると、データは最小化、圧縮、およびキャッシュされます。

問題2：HTTPリクエストの数

クライアントは、ページ上のCSSリソースとJavaScriptリソースの数に関係なく、2つのリクエストのみを送信する必要があります。それぞれCSSとJavaScriptごとに1つ。このアプローチの利点を見てみましょう。

RFC 2616にあるように、HTTP要求は次の形式に準拠する必要があります。

 Request = Request-Line *(( general-header | request-header | entity-header ) CRLF) CRLF [ message-body ]

実際には、次のようになります。

 GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1 Host: www.w3.org Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36 HTTPS: 1 Referer: https://www.google.ie/ Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 Cookie: _ga=GA1.2.587820689.1448903370; JSESSIONID=00002Fn37WPDiDzeIspqmDaEY1J:-1; web_vid=1140991966240108

同じRFC 2616に基づいて、HTTP応答形式は次のとおりです。

 Response = Status-Line *(( general-header | response-header | entity-header ) CRLF) CRLF [ message-body ]

Chrome DevToolsには次のようなものが表示されます。

 HTTP/1.1 200 OK Date: Tue, 12 Apr 2016 15:56:01 GMT Last-Modified: Thu, 18 Feb 2016 10:16:05 GMT ETag: "19982-52c08a77e8340" Accept-Ranges: bytes Content-Length: 104834 Keep-Alive: timeout=10, max=100 Connection: Keep-Alive Content-Type: text/css X-Pad: avoid browser bug

HTTPヘッダーのサイズは、Cookieを考慮して、200バイトから2KB以上までさまざまです。

おもしろいですが、ほとんどの場合、ささいなことにお金を払わなければなりません。たとえば、サイズがそれぞれ1バイトの10個の静的リソースを含むページを作成すると、ブラウザは10バイトの有用なデータをダウンロードするために、数キロバイトのHTTPヘッダーのみを応答して送受信する必要があります。

しかし、主な問題はそれでさえありません、しかしそれ-要求は遅いです。最新のブラウザはマルチスレッド化されており、最善を尽くしていますが、ほとんどすべてのHTTPリクエストについて、何らかの方法でDNSを決定し、サーバーへの接続を作成してから、HTTPSの場合はSSLハンドシェイクを行う必要があります...その後、サーバーからHTTP応答を取得できます。これにはすべて時間がかかり、リクエストが多いほど、ページの読み込みに時間がかかります。

幸いなことに、HTTPヘッダーは非常に有用である可能性があり、ライブラリはCSSとJavaScriptの読み込み速度を最大化するように巧みにそれらを調整します。

キャッシュ制御（HTTP / 1.1）

Cache-Controlヘッダーディレクティブは、だれがHTTP応答をキャッシュできるか、どのような条件下で、どのくらいの期間、キャッシュできるかを決定します。リクエストをまったく送信せず、ブラウザのキャッシュにレスポンスのコピーを保存し、そこから取得してサーバーと通信しないようにするのが最善です。これにより、ネットワークを介したデータ転送の費用が不要になります。

したがって、max-ageディレクティブは、受信した応答をブラウザキャッシュから再利用できる最大時間を秒単位で決定します。ライブラリはデフォルトで1年間データをキャッシュします。

 Cache-Control: public, s-maxage=31536000, max-age=31536000

combinatorius.properties

構成を変更できます。

有効期限（HTTP / 1.0）

このヘッダーは本質的にCache-Controlの類似物で、HTTP / 1.1に取って代わりました。 Expiresは、クライアント側でデータをキャッシュできる期間も決定します。ライブラリはデフォルトでExpiresを1年先に設定します。

 Expires: Thu, 15 Apr 2017 22:00:00 GMT

combinatorius.properties

構成を変更できます。

ETag（HTTP / 1.1）

キャッシュ検証を提供し、クライアントが条件付きリクエストを送信できるようにします。これにより、コンテンツが変更されていない場合にWebサーバーが完全な応答を送信する必要がないため、キャッシュをより効率的にすることができます。ライブラリは、指紋の使用と同様にETagを使用します。たとえば、長いキャッシュを使用して、CSSおよびJavaScriptリソースに変更を加えた後、それらの名前を変更する必要はありません。ライブラリは、CSSおよびJavaScriptに加えられた変更を自動的に認識します。データは必要に応じて自動的に最小化され、圧縮され、キャッシュされ、必要なすべてのヘッダーとともにクライアントに配信されます。

ユーザーガイド

ライブラリは中央リポジトリからアクセスできます。

 <dependency> <groupId>com.dkiriusin</groupId> <artifactId>combinatorius</artifactId> <version>1.0.60</version> </dependency> <dependency> <groupId>com.yahoo.platform.yui</groupId> <artifactId>yuicompressor</artifactId> <version>2.4.8</version> </dependency>

サーブレットをweb.xml

登録します。

 <servlet> <servlet-name>Combinatorius</servlet-name> <servlet-class>com.dkiriusin.combinatorius.CombinatoriusServlet</servlet-class> <load-on-startup>0</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Combinatorius</servlet-name> <url-pattern>/combo/*</url-pattern> </servlet-mapping>

、今後、 /combo/*

へのすべてのリクエストはライブラリによって処理されます。

次に必要なのは、 combinatorius.properties

ファイルを作成し、それをクラスパスに配置することです。

Tomcatを例として使用すると、 common.loader

を変更し、 combinatorius.properties

パスを追加することでこれを実現できます。私の場合（Ubuntu 12.04 LTS）：

 view /etc/tomcat7/catalina.properties

宛先：

 common.loader=${catalina.base}/lib,${catalina.base}/lib/*.jar,${catalina.home}/lib,${catalina.home}/lib/*.jar,/var/lib/tomcat7/common/classes,/var/lib/tomcat7/common/*.jar

後：

 common.loader=${catalina.base}/lib,${catalina.base}/lib/*.jar,${catalina.home}/lib,${catalina.home}/lib/*.jar,/var/lib/tomcat7/common/classes,/var/lib/tomcat7/common/*.jar,${catalina.base}/combinatorius-conf

したがって、ディレクトリを作成します。

 mkdir /var/lib/tomcat7/combinatorius-conf

そして、 combinatorius.properties.

をコピーしますcombinatorius.properties.

combinatorius.properties

 #---------------------# # required properties # #---------------------# # root CSS directory prop.css.dir = /var/lib/tomcat7/webapps/my_project/css # cached CSS directory prop.css.cache.dir = /var/lib/tomcat7/webapps/my_project/css_cache # root JS directory prop.js.dir = /var/lib/tomcat7/webapps/my_project/js # cached JS directory prop.js.cache.dir = /var/lib/tomcat7/webapps/my_project/js_cache #---------------------# # optional properties # #---------------------# # themes root directory prop.themes.dir = /var/lib/tomcat7/webapps/my_project/themes # Cache-Control: s-maxage directive (31536000 by default) prop.s-maxage = 31536000 # Cache-Control: max-age directive (31536000 by default) prop.max-age = 31536000 # Enables gzip compression (true by default) prop.isCompressionEnabled = true # Enables YUI compressor (true by default) prop.isYUICompressorEnabled = true # Insert line breaks in output after the specified column number (-1 by default) prop.YUI.CSSCompressor.linebreakpos = -1 # Splits long lines after a specific column (100 by default) prop.YUI.JavaScriptCompressor.linebreak = 100 # Minify only, do not obfuscate (false by default) prop.YUI.JavaScriptCompressor.nomunge = false # verbose output (false by default) prop.YUI.JavaScriptCompressor.verbose = false # Preserve unnecessary semicolons (such as right before a '}') (false by default) prop.YUI.JavaScriptCompressor.preserveAllSemiColons = true # Disable all the built-in micro optimizations (true by default) prop.YUI.JavaScriptCompressor.disableOptimisations = true # Define files to be omitted of minification ('.*\.min\.(js|css)$' by default) prop.YUI.OmitFilesFromMinificationRegEx = .*\.min\.(js|css)$

このライブラリは、 prop.css.dir

およびprop.js.dir

ディレクトリのCSSおよびJavaScriptリソース、およびそれらのサブディレクトリで動作します。 CSSおよびJavaScriptファイルはアルファベット順に再帰的に読み取られ、最小化され、圧縮されてクライアントに送信されます。最小化されたデータは、サーバー側のprop.css.cache.dir

およびprop.js.cache.dir

キャッシュされます。

正規表現prop.YUI.OmitFilesFromMinificationRegEx

一致するリソースは最小化さprop.YUI.OmitFilesFromMinificationRegEx

ません。

CSSテーマ

CSSテーマのサポートも提供されます。 CSSテーマは、1つ以上のCSSファイルをprop.themes.dir

サブディレクトリです。たとえば、 prop.themes.dir/green/theme.css

。テーマ名はサブディレクトリの名前と一致する必要があり、 theme

パラメータのURLまたはCookiesのcombinatorius.theme

の値としてライブラリに渡すことができます。

追加のリソースを接続する

prop.css.dir

およびprop.js.dir

含まれていない追加のリソースを接続することが可能prop.js.dir

。このような必要性は、スクリプトがめったに使用されず（プロジェクトの1つまたは2つのページで）、デフォルトで「アセンブリ」に含まれるべきではない場合に発生する可能性があります。 resources

パラメータURLを使用して、追加のリソースを転送できます。

 /combinatorius/combo/&type=js&resources=extra_js/extra1.js,extra_js/extra2.js&theme=blue

JSPタグ

単純さと信頼性のために、JSPタグを使用してURLを生成することをお勧めします。それぞれCSSおよびJavaScriptごとに1つのタグ。必須の属性はtype

とpath

です。

 <%@ taglib uri="https://github.com/deniskiriusin/combinatorius" prefix="cb" %> <cb:combo type="css" path="/combo"> <jsp:attribute name="theme">blue</jsp:attribute> <jsp:attribute name="csv_resources">extra_css/extra1.css,extra_css/extra2.css</jsp:attribute> </cb:combo> <cb:combo type="js" path="${path}"></cb:combo>

JSPタグを使用すると、1つの重要な利点があります。タグは、URLの最後にバージョンを追加してリソースを自動的にサブスクライブし、キャッシュキャッシュの無効化の問題を解決します。

 /combinatorius/combo/&type=js&v=1465737376000

リンクを読む：

developer.yahoo.com/performance/rules.html

developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/?hl=en

効率的なCSSおよびJavaScriptレンダリングのためのJavaライブラリ