title: advantage/disadvantage of using ajax in loading div content
body: <p>I need a better understanding in <code>web development</code>, especially how the <code>CSS</code> works. I've been doing web development for about 2 years now and I think it's now the time for me to learn about how to optimize the performance of my website. There are few things I want to ask.</p>
  
  <p><strong>first:</strong></p>
  
  <p>Whenever I have a tabbed content on my page, I always use something like:</p>
  
  <pre><code>&lt;div class="tab-container"&gt;
      &lt;div class="tab active" id="first"&gt;&lt;/div&gt;
      &lt;div class="tab" id="second"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where the <code>div</code> without <code>active</code> class will be <code>hidden (display:none)</code>. I noticed when I load the page and go into developer tool on chrome, the <code>second</code> tab is actually loaded and the code is shown there. if in the <code>second</code> i have a lot of contents like video, picture or etc.. would it affects the performance <code>(time to load, etc..)</code> of the page even if I don't open the <code>second</code> tab?</p>
  
  <p><strong>second</strong></p>
  
  <p>currently i'm using <code>Jquery</code> and <code>ajax</code> to load the <code>div content</code> on <code>tab-menu click</code>. </p>
  
  <pre><code>//some jquery funtion
  ...
  $.ajax({
      url: "second-content.php",
      //etc...
  });
  </code></pre>
  
  <p>I wrote the code for each <code>content (first and second)</code> in the <code>different files</code> and separated from the <code>main file</code>. in the result, I only load the <code>tab content</code> which I want to see. it means when I load the page, only the content for <code>first</code> will be loaded and the <code>second's code</code> won't be shown in dev tools. and when I want to go to the second tab, the first tab content will be destroyed <code>(using jquery .empty() function)</code> and using <code>ajax</code>, the <code>second</code> content will be loaded. I managed to make it worked. but, so far I honestly don't know if it's a good implementation or the otherwise. can someone explain the advantage/disadvantage about this implementation?</p>
  
  <p>English is not my main language, so, I hope you guys understand what I'm trying to say here. and I do really need some advice. </p>