2009-07-27 8 views
6

私はこれについていくつかの検索をしましたが、ベストプラクティスや推薦を見つけることはできません。おそらくそれは何もないからです。私は、TinyMCEやその他のプラグイン、サイトの特定のJSファイルに加えて、私のサイトであらゆる種類のjQueryプラグインを使用しています。その上に、私は3つのスタイルシートを持っています.....そして、サイトが成長するにつれてもっと来ています!<HEAD>にいくつの数が含まれていますか?

タグにスクリプトを含めることに注意が必要な「制限」や何かがありますか?私は、それぞれが完了する必要がある別のHTTP要求であることを知っていますが、それらがすべて縮小され、できるだけ小さい場合、問題があるでしょうか?

<link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/redmond.css" /> 
    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/style.css" /> 
    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/jqueryFileTree.css" /> 

    <!--[if gte IE 7]> 
     <link rel="stylesheet" type="text/css" href="http://mysite.com/scripts/style.ie.css" /> 
    <![endif]--> 

    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery-ui.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jqueryFileTree.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jqminmax.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.corner.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.jeditable.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.qtip.js"></script> 

    <script type="text/javascript" src="http://mysite.com/assets/plugins/tinymce/tiny_mce.js"></script> 

    <script type="text/javascript" src="http://mysite.com/assets/js/latitude.js"></script> 
+0

ダウンロード時間はすべて重要ですか?何を聞いていますか?どのくらいダウンロードが遅いのですか? –

+0

はい、ダウンロード時間は重要です。しかし、私はJSファイルを簡単に組み合わせる方法を知らず、どれだけ多くの人が「あまりにも多く」であるかについて他の人の考えが何であるか疑問に思っていました。 –

+2

UNIXのcatユーティリティは、JSファイルを結合するのに適しています。 – Quentin

答えて

8

ライブに展開する前に、スクリプトを使用してこれらのファイルを1つのjsと1つのcssに結合することをおすすめします。これは良いではない多くの理由がありますが、詳細は以下のリンクを参照してください。

http://developer.yahoo.com/performance/rules.html

編集:はありません、そこにあるファイルの数に制限はありませんが、ほとんどのブラウザができ、さらに答えるために任意の時点でWebサーバーに2つの接続(サイト用)しかないため、一度にjs 2ファイルをロードします。 FirefoxのYSlow pluginには、ファイルのダウンロード方法のグラフが表示されます。

ASP.NETを使用している場合、このcodeprojectの記事は役に立ちます。Linuxを使用している場合はthisが役に立ちます。

編集: Windows上で簡単なバッチファイルが(あなたのビルドツールにプラグインする)

@echo off 
copy file1.js + file2.js + file3.js merged.js /b 
+1

JSファイルはどのように組み合わせますか?すべてのコードをコピーして1つの巨大なものにコピーしてからそれを小さくしますか?細工後のC/Pは –

+0

でも効くはずです。 – millimoose

+0

これとYUICompressライブラリの間で、私はOKであるはずです。すべての入力をありがとう! –

1

ページで参照するCSSファイルとJSファイルの数が多いほど、読み込む時間が長くなります。可能な限り少数のファイルに結合するほうがはるかに優れています。

+1

多くのブラウザは2つの同時接続を開き、ダウンロードをパラレル化します。他のドメイン/サブドメインにコンテンツを格納する際にできることがあり、ブラウザは2つ以上の接続を設定してダウンロードします。それはファイルのサイズとnrのバランスです。 – nos

2

これは、他の多くのサイトがそのように "ロード"されていて、jsファイルがすべての現代(古い)ブラウザでキャッシュされているように感じるのに役立ちます。あなたのjqueryファイルをgoogleapisサイトでホストされているものにリンクするのに役立つものは、そこにホストされている同じjqueryファイルに他のサイトがリンクしていて、すでにキャッシュに入っている可能性があるからです。

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

ウェブサーバーは、gzip圧縮を自動的に有効にしてファイルを最適化する必要がありますが、確認してください。

+0

"コールドキャッシュ"ロードではそれでもなお非常に遅くなります。最初の訪問。ヤフーからのサイトヒットの年齢が高いのはコールドキャッシュだというデータがあります。 – Frozenskys

0

だろう質問のこの種の良い答えが存在するが、場合があるかどうかはわかりませんあなたは最適化に興味があります.Yahoo!によって行われた数多くのものがあります:http://developer.yahoo.com/performance/rules.html

個人的には、私が構築しているものの種類がそれほど大きくないため、これらのルールのほとんどを無視する傾向があります。

4

ブラウザはドメインへの同時リクエスト数に制限があるため、ページ内の他のアイテムの読み込みが遅くなる可能性があります。たとえば、IE8 has a limit of 6 concurrent connections, and IE7 has a limit of 2です。

ローカルにホストするファイルを結合したり、外部に他のユーザー(Googleなど)を参照したり、他のユーザーをページの下部に移動させて負荷を遅らさないようにすることをおすすめします。

jsCompressのような多くのオンラインツールとスクリプトを組み合わせることができます。 「ファイルをアップロード」タブが表示されますので、jsファイルをすべてアップロードすれば、圧縮して縮小します。

サーバー側のユーティリティもあります。あなたはあなたが使用しているサーバー側の技術は言いませんが、例えばPHPの世界ではMinifyを使うことができます。

関連する問題