インラインJavaScriptは良いですか、悪いですか？

現在、WordPressからYiiフレームワークに切り替えており、外部の開発者がサイトを再構築しています。

私が気づいたことの1つは、彼がYiiの方法でAJAX / jQueryを呼び出すたびに、WebページにインラインでJavaScriptを挿入することです。JavaScriptコードはフッターの下に配置されているようですが、まだインラインです。

一般に、JavaScriptコードはWebページ内により頻繁に配置されるようです。JavaScriptスクリプトは、可能な限りJavaScriptファイルに配置する必要があると常に考えられてきました。これは今後の「新しい」トレンドですか？または、JavaScriptコードを別のファイルに保存することを試みるべきですか？

インラインJavaScriptはページのダウンロード時間を増やしますが、これは良くありません。.jsファイルへの呼び出しでは、少なくともこれらは並行呼び出しであり、コンテンツのダウンロード時間が短縮されます。はい、JavaScriptをHTMLコードに直接挿入しても問題ない場合がありますが、多くの場合、これを可能な限りオフロードする方が適切です。

ページのダウンロード時間（つまりHTML）は、すべてのリソース呼び出しがランキングに影響するメトリックに影響を与えるわけではないことに注意してください（PageRankまたはSERPでは関係ありません）。ポイントは、それがSEOのサイトのパフォーマンスに影響を与えるということです。

私の通貨換算サイトでは、セッションの大部分は単一ページビューです。これは、ユーザーがランディングページで通貨計算を直接実行できるためです（すべての計算はJavaScriptを使用してクライアント側で処理されます）。

私のページは、すべてのリソース（css、js、さらには画像）がページ内にインラインである場合、約半分の時間でダウンロードおよびレンダリングされます。複数のページを表示するユーザーは非常に少ないため、これらのリソースの一部がページビュー間でキャッシュされることによるメリットはあまりありません。

私のサイトは典型的ではありません。ほとんどのサイトには、セッションごとに複数のページがあり、画像が大きいために私の手法の適用性が低くなります。この質問に対する正しい解決策はありません。サイトによって異なります。ユーザーの典型的な行動に基づいて、自分で測定する必要があります。

HTMLファイル内にJavaScriptを含めることは必ずしも悪いことではありませんが、判断を下す必要があります。

複数のページで大量のJavaScriptが使用されている場合、それは悪いことです。その場合、JavaScriptは外部の圧縮されたキャッシュ可能なファイルである必要があり、サイトのトラフィックが非常に多い場合は、CDNを使用する必要があります。

ただし、JavaScriptの量が少ない場合、外部ファイルに保存することは、それを取得するために追加のHTTP要求を作成する必要があるという事実によって無効になる場合があります。この場合、ページにJavaScriptを保持する方が効率的です。

繰り返しになりますが、このJavaScriptの小さなスニペットを複数のページで使用する場合、キャッシングを利用するために外部ファイルに配置することが有益です。

最終的に、追加のHTTP要求を行うオーバーヘッドとJavaScriptのサイズを比較検討する必要があります。ほとんどの場合、「平均的な」サイトの場合、おそらく外部ファイルに配置するだけで大​​きな違いは生じません。

私はYii開発者であり、Yiiはこれとは何の関係もありません。それは、開発者側で完全に彼または彼女は別のファイルにJavaScriptコードを入れて、とHTML（ビュー）ページに登録するかどうか、CClientScript::registerScriptFileメソッドまたはビューに直接（HTML）コードを、それを入れて使用して登録CClientScript::registerScriptする方法を。

あなたの答えによると、ほとんどの（プロ？）Yii開発者は最初のアプローチに強く投票します。つまり、できるだけ多くのJavascriptコードを別々のファイルに保存します。したがって、これは間違いなくコーディングの新しいトレンドではなく、開発者の悪い習慣です。少なくとも、それはYiiコミュニティで見られる方法です。

編集：実際、私は最も重要な議論を忘れていました。Yii（および他のほとんどのプロフェッショナルなPHPフレームワーク）は、MVCデザインパターン（実際にはアーキテクチャパターン）に基づいて構築されています。また、同じパターンを正面で使用できます。HTMLコードはモデル（データ）、CSSはビュー（装飾）、Javascriptはコントローラーです。それらはすべて、個別のファイル、.jsおよび.cssファイルに入れられます-最適化されたシナリオで縮小、難読化、およびgzip圧縮されています。

Yiiアプリケーションを構築するとき、MVCパターンを壊して、すべてを同じファイルに保存できます。問題は、そうする価値はありますか、何の利点がありますか（どれもありませんか？）、それはどこにあなたを導くでしょうか？JSコードをインラインに保持するかどうかを尋ねるときに、同じ引数を使用できますか？

実際には、開発中のWebページの目的によって異なります。

少量のインラインJavaScriptを使用しますが、サイズが大きい場合は外部JavaScriptファイルを使用します。

いずれにせよ、ページがJavaScriptをロードするとき、最初に実行する必要があります。ベストプラクティスは、外部JavaScriptを使用してページコンテンツを長くしないことです。また、デバッグが容易になります。

答えは実際に何が行われているかによって異なります。

Webサイト全体で使用されているインラインJavaScript（Webサイトのすべてのページのヘッダー内に表示されるウィジェットなど）に気付いた場合は、「共通の」JavaScriptファイルに移動するのが適切です。

実際、単一のページで使用されている場合でも、できるだけ多くのJavaScriptを共通のJavaScriptファイルに移動します。JavaScriptファイルの強力なキャッシュと圧縮ヘッダーを送信するようにサーバーを構成します。ページのサイズは小さくなりますが、JavaScriptファイルのサイズはそれほど大きくなりません。

一方、JavaScriptが単なる設定オプション/初期化の束である場合、たとえば：

$(function () {
    myplugin({
        images: ["img1", "img2", "img3"]
    });
});

何らかの理由でコードを外部JavaScriptファイルに移動することができなかった場合（たとえば、画像パラメーターがデータベースから取得されている場合）、インラインで保持します。そうは言っても、「邪魔にならない」サードパーティのプラグインを選択します（またはそれらをプラグインとして変換します）。

これらの答えはマークを逃しています。見ていインラインキャッシングを。

YiiはPHPでコーディングされているため、一般的な（または珍しい）PHPパターンは、開発者がサーバーで既知の状態、条件、または値に基づいてJavaScriptコードを動的に生成するPHPコードを記述する場合があることです-そして、それをすべて1つのバッチでクライアントに送信します。これにより、クライアントは関数を実行し、サーバーによって既に実行された計算の一部をスキップできます。

データ（サーバー上にあり、往復を必要とするデータ）が提供されるまでコンテキストを持たない.jsファイルの汎用Javascript関数の全束をクライアントに送信する代わりに、 Javascript関数の一部としてのコンテキスト/データ。これは、最初のページの読み込み時にアプリ全体を送信するのではなく、機能/データを一緒に送信し、クライアントがその時点で必要とする可能性がある機能/データのみを送信することを意味するため、th約です。また、個々のクライアントが必要とする可能性のある機能のごく一部を注入するだけなので、アプリ全体を最初のページの読み込み時に簡単にダウンロードしてリバースエンジニアリングする必要はありません。それがSEOの前兆であるかはわかりませんが、それに応じて最適化できると確信しています。

エンドユーザーがWYSIWYGエディターを使用してCMSソフトウェアでページを作成する場合を考えてください。このユーザーは、サーバー上のソース.jsファイルにアクセスできない場合、どのようにしてページに新しい機能を追加しますか？HTMLタブに切り替えて、インラインJavaScriptを使用します。

すべてのインラインJavascriptが悪いわけではありません。時々、onclickでも問題ありません。一般的な推奨事項として、インラインJavascriptを書くことは避けてください。そうすれば、良い習慣を身に付けることができます。

参照：

• インラインキャッシング
• インラインキャッシュを使用した動的JavaScriptの最適化
• JavaScriptでのJavaScript VMの説明-インラインキャッシュ
• インラインスクリプトを避けるべき理由 （MainMaとuser1389596の回答を参照）

私が前に言ったように、通常、インラインJSコードは悪いです。

しかし、インラインJSが優れているユースケースを考えます。

JS駆動のギャラリーを挿入するCMSを考えてください。ギャラリーは、おそらくjQueryで行われます。id属性によって識別されます。id属性は、ページ上で一意であるだけでなく、サイト全体で一意です。この場合、JSコードは1ページでのみ使用され、HTTPオーバーヘッドがないため、インラインJSの方が良いと思います