Is there a performance difference between inline html and dynamically-built html using getJSON()?

Is there a performance difference between inline html and dynamically-built html using getJSON()?

I am dynamically changing the contents of divs based on user selections. To start with, though, I have default content for each of my three tabs. When the user makes a new selection, I build the HTML content dynamically, calling $.getJSON(), loading the appropriate json file. As of right now, I have (very large) chunks of html right in my page at design-time for the default views:

  1.     <div id="BooksContent"> <section> . . . there are hundreds of sections inside here . . . </section> </div>
        <div id="MoviesContent"> <section> . . . there are hundreds of sections inside here . . . </section> </div>
        <div id="MusicContent"> <section> . . . there are hundreds of sections inside here . . . </section> </div>
Then, when the user selects a different-than-the-default set of stuff to view, code like one of these takes place:

  1.     $.getJSON(getBooks(<whatever they selected>) . . .
        $.getJSON(getMovies(<whatever they selected>) . . .
        $.getJSON(getMusic(<whatever they selected>) . . .

Would it be better, from a performance point of view, to just make those getJSON() calls in the "ready" function (rather than have those elephantine blocks of html hard-coded)? IOW, should I do this:

  1.     $(function() {
         $.getJSON(getBooks('pulitzers') . . .
         $.getJSON(getMovies('oscars') . . .
         $.getJSON(getMusic('grammies') . . .
         . . .
?

I'm thinking the latter may indeed be better because the movies and music html would be getting generated asynchronously while the user is viewing the initial page (books). By the time they click on one of the other tabs, those other tabs should have been populated "behind the scenes." Am I right?