私は単一ページのウェブサイトをデザインしています。サイトへのすべてのセクションはDIV要素でモーダルにポップアップするため、実際のブラウザページを離れることはありません。最初は、「display：none」を使用してcssですべてのセクションを非表示にし、ナビゲーションはそれに応じてそれらを表示および非表示にします。
ポートフォリオのセクションをまとめましたが、ポートフォリオアイテムごとにAJAXを使用するのが最適かどうか疑問に思い始めています。これは、ポートフォリオアイテムに大きな画像が含まれているためです。プリロードの賢明な制限についての大まかなガイドはありますか？すべてのアイテムがプリロードされている場合、HTMLファイルは非常に巨大に見えます。
これは少し一般的な質問であり、すべてをプリロードするのは悪い考えのように感じますが、私は急いで行きたくありません。要素が「display：none」に設定されている場合、ユーザーのコンピューターでどのような種類のリソースが使用されているのかよくわかりません（たとえば、RAMの問題ですか？）。
乾杯！:)
@Digbyswiftが述べたように、多くの要素を含む1つの大きなHTMLファイルがあると、ページサイズが大きくなり、全体的な読み込み時間に影響します。
古いブラウザの場合、ページ上の要素の数は_はるかに_より顕著な影響を及ぼしましたが、上限に達し始めるには、数万の要素の範囲に入る必要があります。
最近のブラウザの場合、要素数の上限はそれほど低くないので、そこでは問題ないはずですが、繰り返しになりますが、要素とのJavaScriptのやり取りを多く行うと、パフォーマンスの低いクライアントの速度が低下します。モバイルデバイスとして。
私の意見では、あなたが扱っている最大のトレードオフは、個々の呼び出しの束の代わりに1つのはるかに大きなページを持つことによって、必要な小さな応答の数と単一のサーバー応答のサイズを効果的にトレードしているということです。あなたの特定のケースに応じて、それは有益な全体的な取引であるかもしれませんし、そうでないかもしれません。
私はあなたがそれが作る違いをテストし、それに基づいてあなたの決定をする必要があると言うでしょう。これに影響を与える1つのことは、応答に圧縮を使用することです（別名、GZipまたはDeflate）。
また、「ポートフォリオ」については、大きな画像がたくさんあるとおっしゃっていました。個人的には、ブラウザが最初にすべてをロードするのを防ぐために、そのセクションのHTMLに実際のタグがない可能性があります。代わりに、画像を表示する必要があるため、JavaScriptを使用して要素を書き込むことにより、必要に応じて画像をロードします。これを行うにはいくつかのテクニックがあります。画像が読み込まれるときにさらにスマートに追加できますが、これらの大規模なサーバー呼び出しを減らすと、ページが大幅に高速化されます。おそらく、1つの巨大なHTMLページがあることはパフォーマンスに影響を与えず、おそらくそれをより速くするでしょう。<img />
すべての要素をHTMLにハードコーディングする問題は、主にファイルのサイズが大きくなるため、ユーザーがそのHTMLページをダウンロードするのにかかる時間です。それはあなたの聴衆が誰であるか、そしてあなたが彼らがページにアクセスすることをどのように期待しているかに依存します。たとえば、大きなHTMLページはモバイルデバイスには適していません。
ただし、必要なAJAXスクリプトが実際のハードコードされたHTMLよりもファイルサイズが大きいかどうかをトレードオフする必要があります。
まず、最新のブラウザ（Firefox、Chrome、IEなど）には巨大なメモリがあります。ユーザーはそれをますます簡単に設定できます...
モバイルブラウザでは、約10MBに制限されていました。制限メモリの詳細については、http ：//www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/を参照してください。