Jump to content
Jay@TastefulTitles.com

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

 

Share this post


Link to post
Share on other sites

You can many use simple <div> in your website. you can use bootstrap grid with <div> use in your website it makes a faster

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...