私が求めているのは、JavaScriptをグループ化することが良い習慣であると考えられる場合、JavaScriptとCSSを1つのHTMLドキュメントに直接配置するWebサイトを増やしてはどうでしょうか。
3 に答える
1つのドキュメントに多数のコードがある場合、変更に必要な文字列を見つけるためにより多くの時間が必要になるため、コードの操作が難しくなります。
そのため、コードを個別のファイルに分割し、それぞれが独自の特別なタスクを解決してから、必要に応じてコードに含めることをお勧めします。
ただし、ファイル数が多い開発バージョンからファイル数が少ないリリースバージョンにファイルを結合するスクリプトを作成することはできますが、これには2つの問題があります。
多くの場合、このスクリプトを作成するために追加のコーディングを行い、プロジェクトの構造がより複雑になったときにスクリプトを変更するのが面倒です。
バグを見つけたり、小さな機能を追加したりした場合は、開発バージョンとリリースバージョンの両方でプロジェクトを再構築する必要があります。
JavaScriptとCSSを1つのHTMLドキュメントに直接配置するWebサイトを増やしないのはなぜですか
個々のファイルのキャッシュ。
外部ファイルには、キャッシュされるという利点があります。スクリプトとスタイルはめったに変更されない(静的)、および/またはページ間で共有されるため、ページからそれらを分離するだけでページが軽くなる方がよいでしょう。
JSとCSSが埋め込まれた500kbのページデータをダウンロードする代わりに、5kbのページをロードし、キャッシュから495kb相当のJSとCSSをロードしてください-495kbの帯域幅を節約し、追加の2つのHTTPリクエストを回避します。
JSとCSSをページに埋め込むこともできますが、ページはおそらく動的になります。これにより、ページは常に新しいコピーをロードし、各リクエストが非常に重くなります。
モジュラーコード
WordPressサイトを想像してみてください。それらは、世界中のさまざまな開発者によって作成された大量のウィジェットを使用して構築されています。1ページに詰め込まれた多くのコードを処理することは可能ですが、想像を絶することです。
一部のコードが短絡したり、サイトで機能しなかったりした場合は、関連するコードをページで検索して別のウィジェットから誤ってコードを削除するよりも、外部ファイルにリンクしているコードを削除する方が簡単です。
関心事の分離
- HTMLをCSSおよびJSから分離することもベストプラクティスです。そうすれば、それはあなたが扱っているスパゲッティではありません。
複数のウェブページが同じファイルを使用できるように、それらを分離しました。1つのファイルを変更すると、複数のページも芳香的に更新できます。また、大きなHTMLファイルはダウンロードに時間がかかります。