Does the use of multiple DIVs affect page performance?

Question

I am new to the world of coding as well as CSS. I have put together a page however am unsure if I may have overused the div tag and if it would affect the performance of the page as well as if I should be clearing the float as its own div tag e.g.

#content {

        clear: both;

    }

I have included the entire code below

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Content-Language" content="en-us" />

        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="" />

        <title>Example</title>

        <base href="" />

        <link rel="icon" type="image/png" href="" />

        <link rel="stylesheet" type="text/css" href="" />

        <style type="text/css" media="all">

        * {

            margin: 0;
            padding: 0;

        }


        body {

            font-family: arial, verdana, sans-serif;
            font-size: 0.8em;

        }


        #wrapper {

            /* background-image: url('images/bg-inner-page.gif'); */
            background-color: #808080;
            height: 200px;

        }

        #innerwrapper {

            width: 960px;
            overflow: auto;

        }

        #header {



        }

        #logo {

            float: left;
            margin-top: 20px;
            margin-left: 50px;
            background-color: gray;

        }

        #topnav {

            float: left;
            margin-top: 50px;
            margin-left:30px;
            color: #ffffff;

        }

        #topnav ul {

            word-spacing: 10px;

        }

        #topnav ul li {

            list-style-type: none;
            display: inline;

        }

        #content {

            clear: both;

        }

        #innercontent {

            float: left;
            margin-top: 100px;
            margin-left: 225px;
            margin-bottom: 20px;
            width: 400px;

        }


        #rightcol {

            float: left;
            margin-top: 125px;
            margin-left: 50px;
            width: 200px;

        }


        #footer {

            background-color: gray;

        }


        </style>

    </head>

    <body>
        <div id="wrapper">
            <div id="innerwrapper">

                <div id="header">
                    <div id="logo"><img src="images/logo.gif" width="150" height="96" alt="logo" /></div>

                    <div id="topnav">
                        <ul>
                            <li>home</li>
                            <li>about</li>
                            <li>browse</li>
                            <li>faq</li>
                            <li>contact</li>
                        </ul>
                    </div>

                </div>

                <div id="content">
                    <div id="innercontent">

                        Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.

                        Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
                    </div>
                </div>

                <div id="rightcol"><img src="http://htmldog.com/r/logo.gif" width="140" height="91" alt="html" /></div>
            </div>

            <div id="footer">footer</div>
        <div>
    </body>
    </html>

score 3 · Answer 1 · answered May 24 '11 at 05:51

3

Don't worry about performance due to many divs. Unless you use hundreds of divs (e.g. to simulate rounded borders on some browsers), the bottleneck for webpage is and will be the inet connection.

answered May 24 '11 at 05:51

Hyperboreus

31,997
9
47
87

@Hyperboreus - Thanks. So my use of multiple divs including to clear a float is efficient? – PeanutsMonkey May 24 '11 at 05:54
When writing content that is transmitted via internet, don't bother about how fast it will be rendered on the client, but how fast you can transmit it. Keep your pages small, use dynamic and preemptive loading and don't worry about 20 or 100 divs. – Hyperboreus May 24 '11 at 05:57
@Hyperboreus - Thanks. So is it possible to make my page smaller? Also what does dynamic and pre-emptive loading mean? – PeanutsMonkey May 24 '11 at 05:59
Dynamic: if a part of the page changes, only load the changes (google AJAX). Preemptive: Try to guess what the user wants to see next, and load this in the background and display it later without delay. – Hyperboreus May 24 '11 at 06:00
Righto. So when you say 'guess' and to load it in the background, I take it I would utilize Javascript? Would I pre-load images, etc? I thought that would be highly inefficient. – PeanutsMonkey May 24 '11 at 06:02
1

Depends. Image the scenario: the client has finished loading the page and is displaying it to the user. So much unused bandwidth. Use it to pre-load content. E.g. if you have a slider with next and prev button, preload the next and the previous image as it is highly likely that one of those two will be displayed next. – Hyperboreus May 24 '11 at 06:05
@Hyperboreus - Thanks. It is certainly helping me understand how pages should be developed. – PeanutsMonkey May 24 '11 at 06:11

score 2 · Accepted Answer · answered May 24 '11 at 05:54

2

Not at all.

That is, relatively, a small amount of divs.

Browser rendering performance is extremely impressive these days, so the major bottleneck will be the speed of the Internet connection downloading the page.

The smaller you can make your page the faster it will download and render.

answered May 24 '11 at 05:54

Alastair Pitts

19,423
9
68
97

@Alastair Pitts - Thanks. So even if I am using a `div` to clear float is absolutely fine? – PeanutsMonkey May 24 '11 at 05:57
@PeanutsMonkey: I wouldn't worry about it in the slightest. Personally, I avoid using floats, but that is a personal preference. I would really only start worrying if you have 100's of div's. Then it becomes more of a maintainability issue. – Alastair Pitts May 24 '11 at 05:59
@PeanutsMonkey: AFAIK, that's how most people recommended to clear floats. Since it is one of the most mainstream scenarios, I think it will be the most optimized, too. – Merlyn Morgan-Graham May 24 '11 at 06:00
@PeanutsMonkey: For example, look at the source for the StackOverflow home page, it's full of divs! – Alastair Pitts May 24 '11 at 06:00
@Alastair Pitts - Great. So in terms of professionalism, my code is kosher? – PeanutsMonkey May 24 '11 at 06:00
@Alastair Pitts - But does that mean that the code is efficient? How would I measure the efficiency of my code? – PeanutsMonkey May 24 '11 at 06:01
@PeanutsMonkey: I think it's recommended to put style sheets in a separate file, when you can. – Merlyn Morgan-Graham May 24 '11 at 06:01
@PeanutsMonkey: Your structure looks good. I would advise moving your CSS into a external CSS file. It will allow you keep a clean separation of your code and your styles, also, it will reduce the size of your main page (as the CSS file will be downloaded asynchronously) – Alastair Pitts May 24 '11 at 06:03
@Merlyn Morgan-Graham - The reason I haven't put it in an external file is because I found it easier to amend the CSS in the page. I will definitely move it across to another file once the coding of the page has been completed. Thanks for noting it though. – PeanutsMonkey May 24 '11 at 06:04
@Alastair Pitts - Great. Is there anything I could improve it terms of the structure of my page and CSS? I take it when you say asynchronous, you mean it downloads once when I visit the website and caches. Is that right? – PeanutsMonkey May 24 '11 at 06:06
@PeanutsMonkey: Correct. Apart from that, it all looks good to me! Lots of practice and you'll do fine :) – Alastair Pitts May 24 '11 at 06:07
Alastair Pitts - Thanks. Great to know I am going down the right path. Certainly helps in improving my code. – PeanutsMonkey May 24 '11 at 06:09
1

@PeanutsMonkey: Not sure about the usage above, but asynchronous would mean that your content page can complete its download before/while the stylesheet is downloaded, which gives the browser an opportunity to partially display it. It also helps to "saturate the transfer pipe" by having concurrent transfers (which is useful on some network connections). As for caching, that's a great reason to also consider sharing stylesheets. Cached content is the fastest content :) – Merlyn Morgan-Graham May 24 '11 at 06:12
@Merlyn Morgan-Graham - When you say 'saturate the transfer pipe' what does that mean exactly? I always thought asynchronous meant a one way method of communicating. – PeanutsMonkey May 24 '11 at 06:29
1

@PeanutsMonkey: "Saturating the pipe" is a loose term for queuing up multiple simultaneous transfers to deal with network implementation (hardware/software) bugs. It doesn't have to do with asynchronous behavior, just with multiple transfers. Asynchronous in general means multiple things can happen at once, or that one operation can take place without waiting for another operation to finish. In the case of separating content, it would mean that some content can be displayed without waiting for other content to be displayed. – Merlyn Morgan-Graham May 24 '11 at 07:47
@Merlyn Morgan-Graham - Thanks. So how does the use of the term differ asynchronous differ when referring to a web service? – PeanutsMonkey May 24 '11 at 07:56
1

@PeanutsMonkey: Sounds like another question brewing there... ;) Calling a web service asynchronously will allow the next line of code (after the web service call) to execute before the web service responds. If you call it synchronously, you'll be blocked on the call, and the next line of code won't be executed until the response is received. – Merlyn Morgan-Graham May 24 '11 at 08:04
Righto. Probably is another question. Might post it when I know more about server-side programming. Thanks for answering it though. Gives me an idea what it means when someone talks about it the next time around. – PeanutsMonkey May 24 '11 at 08:07

Does the use of multiple DIVs affect page performance?

2 Answers2

Linked