divコンテンツのロードにajaxを使用する利点/不利益

Question

web developmentの理解がさらに必要で、特にCSSの動作が必要です。私は約2年間ウェブ開発を続けてきました。今は自分のウェブサイトのパフォーマンスを最適化する方法を学ぶべき時だと思います。私が尋ねたいことはほとんどありません。

最初：

activeクラスなしdivがhidden (display:none)なります

<div class="tab-container"> 
    <div class="tab active" id="first"></div> 
    <div class="tab" id="second"></div> 
</div> 

：私は私のページのタブ付きコンテンツを持っているときはいつでも

は、私はいつものようなものを使用。私は、ページをロードしてクロムの開発ツールに入ったら、実際にはsecondタブがロードされ、コードがそこに表示されていることに気付きました。 secondの場合は、ビデオ、写真などのコンテンツがたくさんあります。タブを開いていなくても、そのページのパフォーマンスは(time to load, etc..)に影響しますか？

二

現在、私はtab-menu clickにdiv contentをロードするためにJqueryとajaxを使用しています。

//some jquery funtion 
... 
$.ajax({ 
    url: "second-content.php", 
    //etc... 
}); 

私はdifferent filesに各content (first and second)ためのコードを書き、main fileから分離します。その結果、私は参照したいのはtab contentです。つまり、ページをロードすると、firstのコンテンツのみがロードされ、second's codeは開発ツールに表示されません。 2番目のタブに移動する場合は、最初のタブの内容が破棄されて(using jquery .empty() function)となり、を使用すると、secondのコンテンツが読み込まれます。私はそれを働かせることができた。しかし、これまでのところ、私はそれが良い実装かそうでないかを正直に知らない。誰かがこの実装についての利点/欠点を説明できますか？

英語は私の主な言語ではありませんので、皆さんが私がここで何を言おうとしているのか理解してくれることを願っています。私は本当にいくつかのアドバイスが必要です。

Answer 1

私は正しい軌道に乗っていると思いますが、可能であれば、2番目のタブを読み込んだときに最初のタブの内容を破壊しないでください。ページのパフォーマンスを向上させるためにタブの内容が表示されていない場合は、最初のページの読み込み時に2番目のタブを読み込むことは望ましくありません。バイト数が減り、HTTPリクエストが少なくなると、ページのダウンロードが速くなります。ユーザが第2のタブをクリックすることを決定すると、その時点でデータをユーザにロードする。パフォーマンスをさらに考慮する必要がある場合は、2番目のタブからコンテンツをキャッシュして、前後に繰り返して切り替えてもコンテンツにサーバーコールを追加しないようにして、サーバーに役立てますパフォーマンス。