CODEWITHSUNDEEP
jqueryhtmlcssajaxoptimization
procatmer
procatmer

Reputation: 5649

advantage/disadvantage of using ajax in loading div content

I need a better understanding in web development, especially how the CSS 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.

first:

Whenever I have a tabbed content on my page, I always use something like:

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

Where the div without active class will be hidden (display:none). I noticed when I load the page and go into developer tool on chrome, the second tab is actually loaded and the code is shown there. if in the second i have a lot of contents like video, picture or etc.. would it affects the performance (time to load, etc..) of the page even if I don't open the second tab?

second

currently i'm using Jquery and ajax to load the div content on tab-menu click. 

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

I wrote the code for each content (first and second) in the different files and separated from the main file. in the result, I only load the tab content which I want to see. it means when I load the page, only the content for first will be loaded and the second's 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 (using jquery .empty() function) and using ajax, the second 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?

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.

Upvotes: 0

Views: 112

Answers (1)

Brandon Parker
Brandon Parker

Reputation: 803

I think you're on the right track, but don't destroy the content of the first tab when you load the second tab, if possible. You don't want to load the second tab on initial page load if the tab content isn't visible to increase page performance. Less bytes and less HTTP requests means the page will download faster. When the user decides to click on the second tab, load in the data to the user at that time. If you want to start getting even more considerate of performance, then you'd also want to cache the content from the second tab so that if they toggle back and forth repeatedly it doesn't add additional server calls for your content which helps with server performance.

Upvotes: 1

Related Questions