通常、Webページは多くの外部CSSおよびJSファイルにアクセスするため、多くのリソースダウンロードの対象となります。 リソースの数を2つに減らすために、すべてのCSSファイルとすべてを1つのJSファイルに結合する必要性に関する最適化の第一人者からのアドバイス。 これは間違いなくページの読み込み時間を短縮するのに役立ちます。
それでもこれらの2つのダウンロードが最善の解決策ではないと思われる場合は、同意します。 この記事では、CSSとJSを組み合わせて、ダウンロード数を1つに減らす方法を検討します。 この方法を発見し、必死にMicrosoft Office Liveのページを最適化しようとしました
この手法は、IEおよびFirefoxでのCSSおよびJSパーサーの動作に基づいています。
•CSSパーサーがCSSコンテンツでHTMLコメント文字（<！-）を検出すると、その文字は無視されます。
•JSパーサーがJSコンテンツでHTMLコメント文字（<！-）を検出すると、その文字は行コメント（//）に類似していると見なされるため、HTMLコメント文字の後の行の残りは無視されます
例を考えてみましょう
<！-/ *
関数t（）{}
<！-* /
<！-body {background-color：Aqua; }
CSSパーサーが上記のコードを解析すると、HTMLコメント文字がスキップされ、コードは以下のコードと同等になります...
/ *
関数t（）{}
* /
body {背景色：アクア; }
ご覧のとおり、CSSアナライザーはCSSコードのみを認識し、スクリプトコードはコメント化されています（/ * ... * /）。
JSアナライザーがコードを解析すると、HTMLコメント文字が行コメント（//）で解釈されるため、コードは次のようになります...
// / *
関数t（）{}
// * /
// body {background-color：Aqua; }
ご覧のとおり、JSアナライザーはスクリプトコードのみを表示し、他のすべてはコメント化されています。
このリソースにリンクするには、ページでSCRIPTおよびLINKタグを使用できます。 例：
<link type = "text / css" rel = "stylesheet" href = "test.jscss" />
<script type = "text / javascript" language = "javascript" src = "test.jscss"> </ script>
これらの2つのタグは同じリソースを参照するため、1回だけ読み込まれ、スタイルとスクリプトの両方として解釈されることに注意してください。
最後に、もう1つ注意する必要があります-回答のコンテンツタイプ-コンテンツを適切なものとして処理できることをFirefoxに確認させるために* / *を付ける必要があります。