JSコードをhtmlファイルまたは外部ファイルに配置する方が良いでしょうか?


15

1ページのWebサイトを設計している場合、JSコード用の外部ファイルを作成するのが良いのでしょうか、それともHTMLコードに入れるのが良いのでしょうか?ロードするためにページ上にそれをより速く置いていますか?コードに対するユーザーの要求を拒否するようにアクセス許可を変更できますが、htmlページは引き続きコードを呼び出すことができますか?

回答:


25

JSコードを別のファイルに置くと、テストと開発が容易になります。コードをどのように提供するかという問題は別の問題です。

  • HTMLとJSを別々に提供することには、クライアントがJSをキャッシュできるという利点があります。これには、クライアントが毎回新しいリクエストを発行しないように、適切なヘッダーを送信する必要があります。更新を実行するためにクライアントキャッシュを無効にしたい場合、キャッシュは問題があります。1つの方法は、ファイル名にバージョン番号を含めること/static/mylibrary-1.12.2.jsです。

    JSが別のファイルにある場合、アクセスを制限できません:HTMLページでJSファイルを参照したため、または誰かがそれをダウンロードしたいためにJSファイルへのリクエストが行われたかどうかを判断するのは困難です(技術的には不可能です)直接。ただし、Cookieを使用して、特定のCookieを送信しないクライアントにサービスを提供することを拒否できます(ただし、それは愚かなことです)。

  • HTML内でJSを提供すると、各ページのサイズが大きくなりますが、クライアントが複数のページを表示する可能性が低い場合は問題ありません。クライアントはJSに対して個別のリクエストを発行しないため、この戦略はページをより速く読み込みます-少なくとも初めてですが、キャッシュが優れている損益分岐点があります。たとえば、PHPを介してJSを含めることができます。

    ここでは、クライアントはJSファイルに個別にアクセスする必要はありませんが、必要に応じて非表示にすることができます。ただし、だれでもHTML内のJSコードを表示できます。

読み込み時間を最小限に抑える他の戦略には、

  • 提供するJSファイルのサイズを縮小するJS ミニファイ。コードをデプロイするときに縮小は1回しか行われないため、これはバイトを節約する非常に効率的な方法です。OTOHを使用すると、関心のある訪問者にとってコードが理解しにくくなります。

    縮小に関連するのは、すべてのJSファイルを1つのファイルに結合することです。これにより、必要なリクエストの数が減ります。

  • 圧縮。クライアントとサーバーの両方で各リクエストの計算オーバーヘッドが追加されます。ただし、(圧縮解除)に費やされる時間は、通常、非圧縮データの送信に費やされる時間よりも短くなります。通常、圧縮はサーバーソフトウェアによって透過的に処理されます。

これらの手法は、画像などの他のリソースにも適用されます。

  • 画像は、データURLを使用してHTMLまたはCSSにインライン化できます。これは、base64エンコードによってサイズが大きくなるため、小さくシンプルな画像に対してのみ実用的です。これは別のリクエストよりも高速です。
  • 複数の小さな画像(アイコン、ボタン)を1つの画像に結合し、スプライトとして抽出できます。
  • サーバーは、Webサイトで実際に使用されるサイズまで画像を縮小でき、帯域幅を節約できます。サムネイル画像を比較します。
  • 一部のグラフィックでは、SVGのようなテキストベースの画像がはるかに小さくなります。

「テストと開発の容易化」、この目的のために独自のファイルにJSを含めることが常に役立つかどうかはわかりません。あるプロジェクトでは、非常に小さなHTMLファイルを使用していますが、実際には、HTMLに含めるためにさらに整理されています。キャッシングに関しては、複数の訪問での速度を向上させることができます(おそらく)が、最初のページの読み込みでは、JavaScriptをHTMLに直接含める方が常に高速になります。
ヨンガン

5

私は1ページのウェブサイトをデザインしています

文字通り1ページしかない場合、はい、スタイルシート、JavaScript、画像(データURIでインライン化された小さな画像)のすべてを1つのファイルで提供する方が(パフォーマンスの観点から)優れています。これにより、比較的遅い外部リソースを取得するために必要な追加のHTTP要求がなくなります。

結果のファイルは、配信する前にgzipで圧縮する必要があります。これにより、全テキスト応答のサイズが大幅に削減されます。

データURIのサイズとブラウザの互換性には制限があるため、ページの外部に大きな画像を配置することを検討する必要があります。(たとえば、IE8には32KBの制限があります。これは、base64エンコードの性質により、実際のファイルサイズは約23KBに相当します。)

コードに対するユーザーの要求を拒否するようにアクセス許可を変更できますが、htmlページは引き続きコードを呼び出すことができますか?

いいえ。せいぜい、コードを不明瞭にして難易度の高いオブザーバーから「隠す」ことができますが、実際の保護は提供しません。


1
なぜ反対票?開発サイトと複数ページのサイトには別々の/外部ファイルがある方が良いのですが、この場合のOPは「1ページのウェブサイト」と「ロードが速い」かどうかを具体的に尋ねています。この場合、HTTPリクエストを最小限に抑えることが優先されます。あなたはまだ複数のファイルで開発することができます(そしてそうすべきです)が、それは尋ねられている質問ではありません。
MrWhite 14年

js、css、および画像を別々のファイルに配置することにより、ブラウザーがファイルをキャッシュできるようにします。そのため、ページコンテンツが変更された場合、htmlのみを再ロードする必要があります。
ティエリーJ.

@ThierryJ。ファイルをキャッシュできますが、最初のページの読み込み時に(新しいユーザーを獲得することは非常に重要です)キャッシュが有効ではないため、すべてのファイルを含める方がはるかに高速です。また、コンピューターはキャッシュされたファイルをロードする必要があり、HTMLにファイルを含めると完全にスキップされます。ほとんどの場合、最初にファイルをHTMLに含めるだけで、おそらくより高速になります。とにかくHTMLをリロードする必要があり、javascript部分は100 kBを超えることはできませんが、無視できます。
ヨンガン

4

クライアント側のJSコードはブラウザーで見る必要があります(つまり、ページでJSを直接使用する必要がある場合)。つまり、ブラウザーでダウンロードする必要があります。

ブラウザでダウンロードできない場合、ページでJSを使用することはできません。

その点で、JSをインライン化するか、ファイルに配置しても違いはありませんが、一般的な方法はJSファイルを使用することです(懸念の分離)。

ブラウザーに公開したくないコードがある場合は、サーバー側のコード(node.js、php、perl、asp.net、jspなど)を使用して対話する必要がありますブラウザから-最初のページの読み込み時またはAJAXの使用時。


2

まあ、それはコードの量に依存します、そしてあなたはプログラマー/ソフトウェアエンジニアであるか単なるコーダーであるかについてあなたはどれほど真剣ですか。短いコードスニペットをHTMLに直接挿入する多くのデザイナーと協力しました。

それは私が自分で行うことではありませんが、ソフトウェア開発のベストプラクティスを知りたい場合は、外部*.jsファイルのすべてをpuし、<script>タグを介してロードすることを強くお勧めします。

2番目の点については、コードを表示するためにユーザーまたはブラウザーを拒否することはできませんobfuscation。コードを読みにくくするものがありますが、パフォーマンスは低下します。


1

私のJSコード用の外部ファイルを作成するのが良いですか、それとも単にhtmlコードに入れますか?

JSコード用の外部ファイルを作成することをお勧めします。また、クライアントに提供するファイルを1つまたは2つ用意することをお勧めします。しかし、それはだまた、保守性の問題のための倍数のファイル間であなたのJSコード分割を持っている方が良いです。これを可能にするために、Gulpのようなプリプロセッサーを使用して、異なるJSファイルを1つのファイルに結合できます。

クライアントが処理するHTTPリクエストが少なくなるため、ファイルの提供は少ない方が良いです。

ロードするためにページ上にそれをより速く置いていますか?

はい。明らかに、HTMLに対して1つのリクエストを行うだけなので、JSコードを外部として多くのリクエスト(少なくとも2つ)を行うので、明らかに高速です。これは、JSコードがどちらかの側で縮小されていない場合のみであり、すべてが単一のHTMLページである場合にコードを維持するのがどれほど難しいかは考慮されません。

コードに対するユーザーの要求を拒否するようにアクセス許可を変更できますが、htmlページは引き続きコードを呼び出すことができますか?

いいえ、できません。CSSコードやHTMLコードのようなJSコードは静的コンテンツです。つまり、ブラウザに表示されると、クライアントはそれとそのコンテンツを完全にダウンロードできます。すべてのファイル、画像、スクリプトは、ダウンロードするために開いています。 ただし、人間がコードを使用するのがより困難になるように、コードを縮小/拡大することができます。これは、パフォーマンスのために最初に作成れた u化の結果にすぎません。


0

htmlとjavascriptのコンテンツを別々のファイルに分けることの多くの利点:

  • もちろん個々のファイルの読みやすさを向上させます
  • JavaScriptコードはHTMLファイル内に限定されないため、他のHTMLおよびJavaScriptファイルまたはライブラリはJavaScriptコードを使用できます。
  • 同様に、別のファイルに配置されたJavaScriptコードは、他のファイルや高度なライブラリを使用して複雑な計算を簡単に実行できます(機械学習、3Dグラフィックス、フレームワークなどのライブラリ)
  • javascriptはクライアント側でキャッシュでき、ページの更新時にHTMLコンテンツのみを再ロードする必要があります
  • 優れた/最新のソフトウェアエンジニアリング手法を、別のjavascriptファイル/モジュール/ライブラリ(デザインパターン、typescript / babelなどについて読む)により簡単に適用できます。
  • javascriptコードは、縮小//化によってWebページへの訪問者から簡単に難読化または「非表示」にできます。
  • javascriptファイルは、gulp、webpackなどを介して1つのファイル/モジュールにまとめることができます。

1
これは作られたポイントを超える大幅な提供の何にも思えるし、前6つの回答で説明していません
ブヨ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.