2011-02-05 3 views
3

実行しないでJavaScriptをダウンロードする方法はありますか?私は自分のページの読み込み時間を短縮したいので、ユーザーがアイドル状態の間、ページに多くのJavaScriptを「遅延ロード」しようとしています。しかし、私はjavascriptを実行したくない、私はそれがブラウザのキャッシュにあることを望む。ページの表示パフォーマンスに与える影響を最小限に抑えて、JavaScriptを読み込むベストプラクティスは何ですか?

オブジェクトタグを使用する必要がありますか?私はリンクのタグを使用することができることに気付いたが、それは私のUIパーフォーマンスに悪影響を及ぼすCSSだとブラウザに考えさせる。

+3

ページ読み込み時間を遅くしたいですか? ...ちょうど巨大な '.tiff'や' .bmp'を組み込み、 'display:none;'に設定することはできますか?あなたのウェブサイトは何ですか?私はモバイルブラウザ/携帯電話の帯域幅を使っている間にそれを避けることができますか? –

+2

あなたは「ページの読み込み時間を減らす」という意味ではないと確信していますか? – jacobangel

+1

あなたの努力は間違っているかもしれません。あなたが特別な要件を持っていない限り、通常は身体の終わりにスクリプトを置くだけで十分です。 –

答えて

0

JavaScriptでXMLHttpRequestオブジェクトを使用してファイルを読み込むことができます。 (別名AJAX)。 (もちろん、結果を破棄して終了してください^^)。

+0

これでブラウザのキャッシュにファイルが追加されませんか? – will

+0

@will:httpヘッダーで許可されている場合は、ファイルをキャッシュに追加する必要があります。 – yankee

+0

これはベストプラクティスとは考えられません。ページの読み込み時間を改善するという目標を達成することはできますが(Firefox/Chrome/IEがユーザーにページが読み込まれていると言います)、これは完全にはわかりませんAJAXリクエストを実行するためのオーバーヘッドなど、他の場所でコストを活用しているようです。私はこれを行うことによって得られるスピードアップの量の証拠の何かを見なければならない、私はそれがそれの価値があると感じない。 – Mattygabe

2

関数またはクラスにすべてのコードを持ち、グローバルスコープに何も置かない限り、何も実行されません。

その後、任意のスクリプトを実行する前に、ページ全体の負荷をできるようになる

window.load(function() { //your initialisation here }); 

これからの呼び出しを使用してスクリプトを起動することができます。

また、スクリプト参照を追加してページ内の画像の後に読み込むこともできます。

スクリプトを使用してヘッドにスクリプト要素を追加するだけで読み込みます。 これらのページは、このための例があります:

http://unixpapa.com/js/dyna.html

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

あなたが遅い接続または過負荷になっているサーバを持っている場合は、この方法では、目に見える要素は、ブラウザによって最初にロードされます。

+0

+1これは、とにかくクライアント側のコードを構築するより良い方法だと思います。あなたの実行は、セッションごとに異なる任意の読み込み時間に基づくべきではありません。 – jmort253

+0

javascriptをロードするときに実行の一時停止を避け、解析と解釈とコンパイルと実行が何も起こっていないときに、ロード時間を「減らす」という意味だと思います。 –

+0

投稿者が質問を増減から変更したため、回答が変更されました;) –

1

私が知る限り、JavaScriptの読み込みを直列的に回避するブラウザ間の準拠の方法はありません。あなたのjavascriptがロードされたときに何かをする場合は、あなたのコードをリファクタリングする必要があります。たとえば、jQueryライブラリスクリプトにjQueryコマンド/アクション/コードを書き込まないでください。 jQueryライブラリをリンクし、jQueryコマンドを別のファイルに入れます。カスタムライブラリでも同じことを行う必要があります。これが不可能な場合は、コードのアーキテクチャに大きな問題があります。

また、実行していないJSを</body>タグの近くのページの下部に貼り付けるようにしてください。これにより、他のすべてのものが最初に読み込まれるようになり、かさばるJSライブラリがCSSや画像などの処理速度を落とさないようにします。

+0

私はこれに同意します - ロードされているコードの最適化に焦点を当てるのではなく、OPはロードの改善方法に焦点を当てています。ロードされ、実行され、即座に評価されなければならないJavascriptのトンは、ややコード臭です。問題の20%(JavaScriptの読み込み方法)に焦点を当てるのではなく、80%(Javascriptが読み込まれている理由とその理由)に焦点を当てます。明らかに理想的ですが、そこにコードがある理由はありますが、あなたは理想的なので質問してください:) – Mattygabe

1

外部のJavaScriptを処理するベストプラクティスの方法は、ページの下部に配置することで、ページ上の他のものの後にロードすることです。次に、レンダリング可能なすべてが表示され、ページの下部にあるJavaScriptが読み込まれ、コンパイルされてキャッシュされます。もちろん、これはjavasciptが中央ページで実行する必要のない関数のライブラリである場合にのみ機能します。その場合は、シリアルJavaScriptの読み込みにかかわらず、コンパイルと実行は関係ありません。

Require.JSは、JavaScriptが読み込まれると自動的に管理するための素晴らしいライブラリです。

+0

ありがとう。しかし、私のqは、どのようにロードするかについてのより多くのものでした。とにかくありがとう。ロードするときは – will

+0

が重要な唯一のものですが、 'inline'と' external'しかありません。ページの残りの部分に与える影響を最小限に抑えたい場合は、ページの下部にあるすべてのjavascriptを 'load'または' inline'してください。それは影響を与えない唯一の方法です。 –

関連する問題