7

周りを見回して、この特定の質問が議論されているのを見つけることができませんでした。違いはごくわずかであることを確認してください。あなたの考えに興味があるだけです。

シナリオ: ページ レンダリングの前にロードする必要のないすべての Javascript が、終了</body>タグの直前に配置されています。代わりに、DOM ロード/準備完了イベントが発生したときに実行されるヘッド内の Javascript コードを介してこれらを遅延ロードする利点や不利益はありますか? これは、機能が満載の .js ファイル全体を 1 つダウンロードすることのみに関係し、使用時に必要に応じていくつかの個別のファイルを遅延ロードしないことに関係しているとしましょう。

それが明確であることを願っています、ありがとう。

4

2 に答える 2

8

私の意見では、大きな違いがあります。

タグの下部で JS をインライン化すると<body>、ページにこれらの s を同期的に (今すぐ実行する必要があります) および順次 (連続して) ロードするように強制する<script>ため、必要に応じてページの速度が少し遅くなります。これらの HTTP 呼び出しが終了し、JS エンジンがスクリプトを解釈するのを待ちます。ページの下部に多数の JS をまとめて配置している場合、スクリプトが相互に依存する可能性があるため、ネットワーク キュー (古いブラウザーではホストごとに一度に 2 つの接続のみ) でユーザーの時間を浪費する可能性があります。であるため、順番にダウンロードする必要があります。

DOM をより速く準備したい場合 (通常、イベント処理とアニメーションを行うために最も待機するもの)、必要なスクリプトのサイズをできるだけ小さくし、並列化する必要があります。

たとえば、YUI3 には小さな依存関係の解決とダウンロード スクリプトがあり、ページに順番にロードする必要があります (YUI3 の seed.js を参照)。その後、ページを調べて依存関係を収集し、CDN (または独自のサーバー) に対して 1 つの非同期パイプライン呼び出しを行い、JS の大きなボールを取得します。JS ボールが返された後、スクリプトは指定したコールバックを実行します。一般的なパターンは次のとおりです。

<script src="seed.js"></script>
<script>

    YUI().use('module', function(Y) {
        // done when the ball returns and is interpretted
    });

</script>

私は、スクリプトを 1 つの大きなボールにまとめることは特に好きではありません (1 つの依存関係が変更された場合、全体をダウンロードして解釈し直す必要があるためです!) が、パイプライニング (スクリプトの結合) とイベントベースのモデル。

非同期のイベントベースの読み込みを許可すると、パフォーマンスは向上しますが、パフォーマンスが認識されない可能性があります (ただし、これは打ち消すことができます)。

たとえば、ページの一部が 1 ～ 2 秒間読み込まれず、そのために外観が異なったり (JS を使用してページ スタイルに影響を与えている場合はお勧めしません)、ユーザーとのやり取りの準備ができていない可能性があります (またはサイトをホストしているユーザー) がスクリプトを返します。

さらに、<script>適切に実行できるように、適切な依存関係が にあることを確認するために、いくつかの作業を行う必要があります。たとえば、jQuery または Prototype がない場合、次の呼び出しは成功しません。

<script>

    $(function () {
        /* do something */
    });

</script>

また

<script>

    document.observe('dom:loaded', function {
        /* do something */
    });

</script>

インタプリタが「Variable $ undefined」のようなことを言うので。<script>これは、両方の を DOMに同時に追加した場合でも発生する可能性があります。jQuery または Prototype は、アプリケーションの JS よりも大きいと思われるためです (したがって、データの要求に時間がかかります)。いずれにせよ、何らかの制限がなければ、これは運に任せることになります。

したがって、選択は本当にあなた次第です。依存関係を適切にセグメント化できる場合、つまり、必要なものを前に置き、他のものを後で遅延ロードすると、DOM の準備が整うまでの全体的な時間が短縮されます。

ただし、jQuery などのモノリシック ライブラリを使用している場合や、ユーザーが JS アニメーションやスタイルに関連するものをすぐに表示できることを期待している場合は、インライン化が適している可能性があります。

于 2010-05-25T02:10:31.893 に答える
0

使いやすさの観点から、他の機能に加えてロード トリガーとしてボタンを 2 倍にするなど、ユーザーが迅速な応答を期待するものに対しては絶対にこれを行うべきではありません。

ユーザーがスクロールするときにページを継続的にロードすることでページネーションを置き換えるOTOHは、非常に良い考えです。ロード トリガーがページの最後にある場合は気を散らすものだと思います。

于 2010-05-25T00:50:24.157 に答える