回答:
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つのファイルに結合することです。これにより、必要なリクエストの数が減ります。
圧縮。クライアントとサーバーの両方で各リクエストの計算オーバーヘッドが追加されます。ただし、(圧縮解除)に費やされる時間は、通常、非圧縮データの送信に費やされる時間よりも短くなります。通常、圧縮はサーバーソフトウェアによって透過的に処理されます。
これらの手法は、画像などの他のリソースにも適用されます。
私は1ページのウェブサイトをデザインしています
文字通り1ページしかない場合、はい、スタイルシート、JavaScript、画像(データURIでインライン化された小さな画像)のすべてを1つのファイルで提供する方が(パフォーマンスの観点から)優れています。これにより、比較的遅い外部リソースを取得するために必要な追加のHTTP要求がなくなります。
結果のファイルは、配信する前にgzipで圧縮する必要があります。これにより、全テキスト応答のサイズが大幅に削減されます。
データURIのサイズとブラウザの互換性には制限があるため、ページの外部に大きな画像を配置することを検討する必要があります。(たとえば、IE8には32KBの制限があります。これは、base64エンコードの性質により、実際のファイルサイズは約23KBに相当します。)
コードに対するユーザーの要求を拒否するようにアクセス許可を変更できますが、htmlページは引き続きコードを呼び出すことができますか?
いいえ。せいぜい、コードを不明瞭にして難易度の高いオブザーバーから「隠す」ことができますが、実際の保護は提供しません。
クライアント側のJSコードはブラウザーで見る必要があります(つまり、ページでJSを直接使用する必要がある場合)。つまり、ブラウザーでダウンロードする必要があります。
ブラウザでダウンロードできない場合、ページでJSを使用することはできません。
その点で、JSをインライン化するか、ファイルに配置しても違いはありませんが、一般的な方法はJSファイルを使用することです(懸念の分離)。
ブラウザーに公開したくないコードがある場合は、サーバー側のコード(node.js、php、perl、asp.net、jspなど)を使用して対話する必要がありますブラウザから-最初のページの読み込み時またはAJAXの使用時。
まあ、それはコードの量に依存します、そしてあなたはプログラマー/ソフトウェアエンジニアであるか単なるコーダーであるかについてあなたはどれほど真剣ですか。短いコードスニペットをHTMLに直接挿入する多くのデザイナーと協力しました。
それは私が自分で行うことではありませんが、ソフトウェア開発のベストプラクティスを知りたい場合は、外部*.js
ファイルのすべてをpuし、<script>
タグを介してロードすることを強くお勧めします。
2番目の点については、コードを表示するためにユーザーまたはブラウザーを拒否することはできませんobfuscation
。コードを読みにくくするものがありますが、パフォーマンスは低下します。
私のJSコード用の外部ファイルを作成するのが良いですか、それとも単にhtmlコードに入れますか?
JSコード用の外部ファイルを作成することをお勧めします。また、クライアントに提供するファイルを1つまたは2つ用意することをお勧めします。しかし、それはだまた、保守性の問題のための倍数のファイル間であなたのJSコード分割を持っている方が良いです。これを可能にするために、Gulpのようなプリプロセッサーを使用して、異なるJSファイルを1つのファイルに結合できます。
クライアントが処理するHTTPリクエストが少なくなるため、ファイルの提供は少ない方が良いです。
ロードするためにページ上にそれをより速く置いていますか?
はい。明らかに、HTMLに対して1つのリクエストを行うだけなので、JSコードを外部として多くのリクエスト(少なくとも2つ)を行うので、明らかに高速です。これは、JSコードがどちらかの側で縮小されていない場合のみであり、すべてが単一のHTMLページである場合にコードを維持するのがどれほど難しいかは考慮されません。
コードに対するユーザーの要求を拒否するようにアクセス許可を変更できますが、htmlページは引き続きコードを呼び出すことができますか?
いいえ、できません。CSSコードやHTMLコードのようなJSコードは静的コンテンツです。つまり、ブラウザに表示されると、クライアントはそれとそのコンテンツを完全にダウンロードできます。すべてのファイル、画像、スクリプトは、ダウンロードするために開いています。 ただし、人間がコードを使用するのがより困難になるように、コードを縮小/拡大することができます。これは、パフォーマンスのために最初に作成された u化の結果にすぎません。
htmlとjavascriptのコンテンツを別々のファイルに分けることの多くの利点: