7

HTMLコードを最初にロードできるように、JSファイルをページの下部に配置することを強くお勧めします。この場合、訪問者はページがいっぱいになるのを待っているときに何かを見るでしょう。ただし、これは次の理由で不利だと思います。

  1. モダンなデザインは主にJSに依存しています。これは、JSをロードする前に、ページが見苦しく見えることを意味します。

  2. ロード中に接続を中断すると(JSをまったくロードしない)、訪問者はWebサイトの機能の一部を見逃します(おそらく非常に重要です)。そして、これがロードの問題であることを理解しません(ページを再ロードするため)。

  3. フッターの前のスクリプトの最後にあるサーバー側スクリプトdie(エラーのため)(PHPなど)の場合、訪問者はページ全体の機能(JSによる)を見逃します。ただし、JSを上部にロードすると、フッターまたはページの半分しか表示されません。

  4. 最初にJSをロードする場合、ブラウザは他のもの(画像など)を並行してロードします。ただし、JSを最後にロードすると、ロード時間が長くなる可能性があります。JSファイルは大きく(たとえば、JQueryやJQuery UI)、すべての小さなもの(画像など)が読み込まれ、最後に大きなファイルを読み込んでいるためです。

更新: 5。jQueryライブラリはコードの前にロードする必要があるため。jQueryライブラリをフッター(例:footer.php)にロードする場合、異なるページ(本文内)にカスタムjqueryコードを追加することはできません。

私が間違っているなら私を訂正してください!JSファイルをフッターに入れることはまだ有益ですか?

4

7 に答える 7

4

編集:このトピックについて人々の耳に耳を傾けていることに応えて、別のポイントを追加します.

追加ポイント#5。JS-fail での動作の処理について真剣に懸念している場合、つまり JS をオフにしてブラウジングしている人々の場合は、プログレッシブ エンハンスメントの概念を受け入れる必要があります。たとえば、アコーディオン メニューを設計して、フライアウト メニューのオン ホバーとしてデフォルトで動作するようにすることができます (CSS のみを使用する場合のみ可能)。その後、JS が有効になっているときにキー クラスを変更することで、その動作を削除できます。そうすれば、ユーザーは JS をオフにする必要がある場合でも JS なしでリンクにアクセスできますが、JS が機能している場合は強化された動作が得られます。

しかし、処理しようとしてはならないのは、ページがバックエンドで破壊されたために、JS ファイルがあるはずのページに JS ファイル全体が存在しないことです。予期せぬ事態を処理することは 1 つのことですが、提供される前に HTML ファイルの構築を完了できなかった場合の処理​​は、特にテンプレート言語に実際のバックエンド コードがある場合 (そうすべきではない)、運用環境で受け入れられるシナリオと見なされるべきではありません。ハッカーになる可能性がある何かを見て興味深いものを提供するのを待っています。壊れたページはエラー メッセージとして表示されます。

================================

  1. 完全に間違っています。JS を使用してページの最初の静的な外観を微調整するときはいつでも、それは間違っています。懸念事項の分離を維持すると、ページがより柔軟になります。JS を使用してページの STATIC スタイルを微調整することは現代的ではありません。IE6 と IE7 と IE8 を絶対にサポートする必要がある場合は、クライアントの 5% に対する絶対的なグレースフルな劣化の代替手段として何かを受け入れることを拒否した場合、丸みを帯びたグラデーション コーナーを全面的に切り取るのにどれだけの費用がかかるかをクライアントに伝えます。ベース。

  2. 事前に JS を使用していないページの読み込みに時間がかかる場合は、別の問題に対処する必要があります。読み込んでいるリソースの数は? あなたの PHP はどのような不敬虔な前処理を行っていますか? 私はバックエンドまたはデザインの悪ふざけを呼びます。

  3. 完全に受け入れられないのではなく、動作する JS を含むページの半分を半分受け入れられると言っているのですか? そのクライアントを手放さないでください。

  4. jQuery は、最小化すると、中サイズの JPEG のサイズについてです。

注: 一部の JS を上位に配置することは、完全に受け入れられないわけではありません。分析やキャンバス ノーマライザーなどの特殊なコードでは、これが必要です。しかし、必要のないものは一番下にあるべきです。JS が解析されるたびに、ページの読み込みとフローの計算プロセス全体が停止します。JS を一番下まで押し込むと、認識されるページの読み込み時間が改善されます。また、チームの誰かが、コードがなぜタンクに入っているのか、または 25 メガバイトの png-24 で何ができるのかを突き止めるために、お尻をすばやくキックする必要があるという証拠を提供するのにも役立ちます。再フォーマットではなく縮小しただけです。

于 2012-03-22T00:01:30.063 に答える
4

ヘッダーのスクリプト タグは、他のすべての要求をブロックします。次のような 10 個のタグがあるとします。

<script src="http://images.apple.com/home/scripts/promotracker.js"></script>

...それらは順次実行されます。他のファイルは同時にダウンロードされません。したがって、ページの読み込み時間が長くなります。

サンプル ソリューションとして、こちらの HeadJS を確認してください。

于 2012-03-21T23:32:04.543 に答える
2

JS をページの下部に配置するか、非同期で読み込むことをお勧めする理由は、JS によってページの読み込みが遅くなるためです。

JS をダウンロードする一部のブラウザーが他の並列ダウンロードをブロックし、JS を実行するすべてのブラウザーで UI スレッドがブロックされ、したがってレンダリングがブロックされる場合 (一部のブラウザーではブロックの解析もブロックされます)。

それを一番下に置いたり、非同期にロードしたりすることで、訪問者のページのロードエクスペリエンスへの影響が少なくなるまで問題を遅らせようとします.

ページがどんなに美しくても、読み込みに時間がかかりすぎて、人々は待たず、2 / 3 秒で問題が発生し始めることを忘れないでください。

  1. 現代のデザインはおそらく、これまでにないほど JS に依存する可能性が低くなります。はい、ポリフィルはまだ必要ですが、ブラウザーが改善されるにつれて、CSS でより多くのことができるようになります。

  2. これは Backbone.js アプリのようなものには当てはまるかもしれませんが、JS の欠如がサイトを壊すなら、デザインは違うべきだと私は主張します。

  3. サーバー側のスクリプトが機能しなくなった場合、他に心配すべき問題がある可能性があります。いずれにせよ、有用なページが十分にあるという保証はありません。

  4. いいえ!JS は UI スレッドをブロックし、場合によってはダウンロードをブロックするため、画像が遅延します。また、JS は接続を使用しているため、並列ダウンロードに使用できる接続が少なくなります。

  5. @samsaffron の jQuery の読み込み遅延に関する記事をご覧ください - http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

JS の読み込みを遅らせることができる場合は、

于 2012-03-23T10:06:37.920 に答える
2

「javascript を実行する前に DOM を準備する必要があるか」という観点から考える必要があります。基本的に、DOM の準備ができていることを基本的に保証するために、ページの下部にスクリプト タグを配置します。ヘッダーでスタイリングをリンクし、ページを適切にスタイルすると、「醜さ」を感じることはありません。第二に、ページの一部を javascript で表示して DOM オブジェクトを操作することに依存している場合は、この問題を防ぐためにさらに ajax 呼び出しを使用します。両方の長所。ページは可能な限りロードされ、ajax 呼び出しは html を取得してページの他の部分に入力します。

于 2012-03-21T23:39:50.317 に答える
1

ニーズは人それぞれ異なります。あなたのリストを見てみましょう。

1) JavaScript が原因でページのレイアウトやスタイルに問題が発生したことはありません。HTML と CSS が整っていれば、欠落している JavaScript はほとんど見えなくなります。css で要素を非表示にし、準備ができたら JavaScript で表示できます。jQueryのメソッドを使用できます.show();

例を次に示します。

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background:#def3ca; margin:3px; width:80px;
  display:none; float:left; text-align:center; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="showr">Show</button><button id="hidr">Hide</button>
  <div>Hello 3,</div><div>how</div><div>are</div><div>you?</div>
<script>
$("#showr").click(function () {
  $("div").first().show("fast", function showNext() {
    $(this).next("div").show("fast", showNext);
  });
});
$("#hidr").click(function () {
  $("div").hide(1000);
});
</script>
</body>
</html>

それでも問題が解決しない場合は、JavaScript をサイトが依存するスクリプトと他のスクリプトに分割し、一部をヘッダーに、一部をフッターに配置できます。

2) これはユーザー エラーです。制御することはできませんが、必要な機能があるかどうかを確認して、再読み込みを試みることができます。ほとんどのプラグインは、実行中かどうかを確認できるため、テストを実行して再読み込みを試みることができます。

また、ユーザーが必要とするまでファイルのロードを遅らせることもできます。たとえば、検証スクリプトをロードfocusするのを待っformたり、特定のポイントを超えてスクロールして「スクロールしないと見えない部分」の下にあるコードをロードしたりすることができます。

3) ページdieが s の場合、とにかく半分空白のページが表示されます。PHP 5 では、 sを使用してエラー処理を改善できます。exception

 

if (!$result = mysql_query('SELECT foo FROM bar', $db)) {
        throw new Exception('You fail: ' . mysql_error($db));
}

この

try
{
  // Code that might throw an exception
  throw new Exception('Invalid URL.');
}
catch (FirstExceptionClass $exception) 
{
  // Code that handles this exception
} 
catch (SecondExceptionClass $exception) 
{
  // you get the idea what i mean ;)
}

4) スクリプトを縮小する場合は、画像よりも大きくしないでください。JQuery は 32KB に圧縮および gzip されています。JQuery-UI のスクリプトは 51KB です。それはそれほど悪くはありません。ほとんどのプラグインはそれよりもさらに小さくする必要があります。

そのため、必要な結果を得るために必要なことを実行することをお勧めしますが、エラーや余分なコードを減らすベスト プラクティスを探すことをお勧めします。猫の皮を剥くには、もっと良い方法が常にあります...

于 2012-03-22T01:44:05.440 に答える
1

スクリプトをフッターに配置することについてはあまり詳しくありませんが、ページが完全に読み込まれた後にのみ JavaScript を実行するようにページに指示するさまざまな方法を検討することをお勧めします。

これにより、いくつかのオプションが開かれます。ページの準備が整った後にのみ、JS に外部スクリプトを動的にロードさせることができます。

ページ コンテンツの一部またはすべてを非表示にして、ページの準備ができたら表示することもできます。JS で非表示にして、非 JS ブラウザでも表示できるようにしてください。

これらを参照してください。

于 2012-03-21T23:32:02.327 に答える
1

私はときどき Javascript をページの一番下 ( の直前</body>) に置くことを勧めてきましたが、初心者のプログラマーが実際に対処できない状況window.onload<body onload...>、それがコードを動作させるための最も簡単な適応であった場合に限られます。

ロード時間への影響に関するマイケルのメモとバランスを取る必要がある、あなたの実際的な欠点に同意します。ほとんどの場合、[私は送信] ページのスクリプトをロードする方<head>が勝ちです。

于 2012-03-21T23:37:48.740 に答える