web-dev-qa-db-ja.com

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

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

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

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

htmljavascript
16
Steven

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

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

13
closetnoc

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

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

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

29
Stephen Ostermiller

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

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

ただし、JavaScriptの量が少ない場合、それを取得するために追加のHTTPリクエストを作成する必要があるため、外部ファイルに保存する保存が無効になる場合があります。この場合、ページにJavaScriptを保持する方が効率的です。

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

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

12
foamcow

私はYii開発者であり、Yiiはこれとは何の関係もありません。開発者側では完全に、Javascriptコードを別のファイルに配置し、 CClientScript::registerScriptFile メソッドを使用するか、直接表示して（HTML）コードを表示し、 CClientScript::registerScript メソッドを使用して登録します。

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

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

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

4
trejder

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

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

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

3
Abhijith Bhattu

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

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

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

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

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

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

2
Salman A

これらの答えはマークを逃しています。 インラインキャッシュ をご覧ください。

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

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

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

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

参照：

2
perry

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

しかし、インラインJSがbetterであるユースケースを考えます。

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

0
yunzen