Jump to content

Split <div> to display faster?


Recommended Posts

Most of my product pages include a link to a window showing the text of my translation, formatted with CSS to appear as a series of scrolling "slides." Each "slide" is a separate <div> containing 2, 1, or 0 <p>'s. The number of slides can range from ~25 to ~1,000. On some of the larger ones, I'm wondering whether there is an advantage to splitting the text HTML between two separate shell divs? If I put the first 50 or so slides in one <div>, will it load and display faster than if I put all 800 slides in the same <div>?

I'll try to illustrate:

   <body>
      <div class="shell" onclick="window.close()">
        <div><p>Title</p><p>by Composer></p></div>
         <!--		~800 more divs here		-->
        <div><p>Translation credit</p><p>Titles credit></p></div>
      </div>
   </body>

OR...

   <body>
      <div class="shell" onclick="window.close()">
        <div><p>Title</p><p>by Composer></p></div>
         <!--		~50 divs here		-->
      </div>
      <div class="shell" onclick="window.close()">
         <!--		~750 more divs here		-->
        <div><p>Translation credit</p><p>Titles credit></p></div>
      </div>
   </body>

The CSS makes the break between the shell divs invisible. The only difference would be whether one would display faster. Presumably if the first div were displayed before the second (currently not visible) were parsed, the second would be completed well before the user finished scrolling through the first, but I don't know whether it works that way or not.

To see live examples, click on "View supertitles" at the bottom of these two windows. I have split the divs in the first (811 slides), not in the second (885 slides).
https://tastefultitles.com/Catalog.html?num=4
https://tastefultitles.com/Catalog.html?num=25

 

Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...