2

すべての JS とすべての CSS を 1 つの縮小されたファイルに圧縮し、HTML ページからそれらにリンクすることは合理的な方法であり、これは多くの Web サイトが最適化を行う場所のようです.

ただし、リソース負荷が1 つだけの Web サイトはめったに見ません。

私の質問は、このような 3 つのリソースを持つことは、それらのコンテンツを取得してタグに入れて、ロードする 1 つのリソースを生成することとまったく同じかどうかです。JS の場合、これは<script>タグで簡単です (縮小された JS を取り出してタグsrcに入れます)。CSS の場合、これは単純<link rel="stylesheet" ... />に<style type="text/css" /> ...minified CSS... </style>.

これは、ページを可能な限り最小のパッケージに詰め込む一般的な方法ですか (できれば 1 つの TCP トランザクション)。

少なくとも、Web サーバー ソフトウェアの作業が大幅に簡素化されます。

4

3 に答える 3

2

次の 2 つの理由から、それらを分けておきます。

  1. ブラウザは複数のソケットを使用してコンテンツをダウンロードできます

  2. スクリプト/スタイルシートはキャッシュして他の HTML ページで再利用できるため、一度だけダウンロードされます。

于 2013-08-10T19:01:08.060 に答える
2

これは、モバイルなどのデバイスの速度の最適化には影響しないと確信していますが、ブロードバンド接続では大きな違いはありません (明らかに、速度は適切な最適化であり、そうではないと言っているわけではありません)。コードの最適化だけでなく、可能な場合は複数のサーバーからすべてのコンテンツ/画像をサーバーする方が良いのではないでしょうか? Mumford コンテンツは、合計ページ サイズを節約します。しかし、複数のCSSページと複数のjsドキュメントがなく、それらを最適化する、つまりコンテンツを縮小し、重複するタグを取り除く限り、コードがページ上にあるかsrcファイルを介しているかは問題ではないと思いました。

.header{ Color:#000000; } .test{ カラー:#000000; } .header、.test{ Color:#000000; に }

これがあなたが探しているものかどうかはわかりませんが、最適化しすぎると、速度が0.001秒しか増加しない可能性があるため、最適化に費やす価値があると確信しています。

于 2013-08-10T19:06:37.307 に答える
1

リソースをリンクすることも、それらを html ページに埋め込むことも同じです。ただし、複数のページで使用するのは便利ではありません。次に、自分自身を繰り返す必要があります。

すべてのスクリプトと css を一緒に配置する場合は、次の点に注意してください。

ほとんどの場合、JavaScript コードの大部分は、マウスのクリックやドラッグなど、ユーザーが開始したイベントを処理します。これらのユーザー トリガー イベントはすべて、ページが読み込まれ、onload イベントがトリガーされた後に発生します。これらの JavaScript のロードを遅らせるには、onload イベントの後に外部ファイルを強制的にロードする JavaScript イベント リスナを含むドキュメントのヘッドに挿入します。( Google 開発者向けのヒント)

これは、より明確にするためのコード例です。遅延スクリプトは、重要なページ要素が形成された後に読み込まれます。

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
于 2013-08-10T19:02:19.013 に答える