преимущество/недостаток использования ajax при загрузке содержимого div

Question

Мне нужно лучшее понимание в web development, особенно, как работает CSS. Я занимаюсь разработкой веб-приложений уже около двух лет, и я думаю, теперь настало время узнать, как оптимизировать работу моего веб-сайта. Есть несколько вещей, которые я хочу задать.

первый:

Всякого раз, когда у меня есть вкладки содержания на моей странице, я всегда использую что-то вроде:

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

Где div без active класса будет hidden (display:none). Я заметил, что когда я загружаю страницу и перехожу в инструмент разработчика на хроме, вкладка second фактически загружается, и там отображается код. если в second у меня есть много контента, такого как видео, фотография или т. д., это повлияет на производительность (time to load, etc..) на странице, даже если я не открою вкладку second?

второй

В настоящее время я использую Jquery и ajax загрузить div content на tab-menu click.

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

Я написал код для каждого content (first and second) в different files и отделен от main file. в результате я загружаю только tab content, который я хочу увидеть. это означает, что при загрузке страницы будет загружен только контент для first, а second's code не будет показан в инструментах dev. и когда я хочу перейти на вторую вкладку, содержимое первой вкладки будет уничтожено (using jquery .empty() function) и с использованием ajax будет загружено содержимое second. Мне удалось это сработать. но до сих пор я честно не знаю, хорошая ли это реализация или иначе. может ли кто-нибудь объяснить преимущество/недостаток этой реализации?

Английский не является моим основным языком, поэтому, надеюсь, вы, ребята, понимаете, что я пытаюсь сказать здесь. и мне действительно нужен совет.

Answer 1

Я думаю, что вы на правильном пути, но не уничтожаете содержимое первой вкладки, когда вы загружаете вторую вкладку, если это возможно. Вы не хотите загружать вторую вкладку при начальной загрузке страницы, если содержимое вкладки не видно, чтобы повысить производительность страницы. Меньше байтов и меньше HTTP-запросов означает, что страница будет загружаться быстрее. Когда пользователь решает нажать вторую вкладку, загрузите данные пользователю в это время. Если вы хотите начать уделять больше внимания производительности, то вы также захотите кэшировать контент со второй вкладки, чтобы, если они переключаются назад и вперед, это не добавляет дополнительных серверных вызовов для вашего контента, который помогает с сервером представление.