使用多个DIV会影响页面性能吗? [英] Does the use of multiple DIVs affect page performance?

查看:139
本文介绍了使用多个DIV会影响页面性能吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是编程世界和CSS的新手。我把一个页面,但不能确定如果我可能已经过度使用 div 标记,如果它会影响页面的性能,以及如果我应该清除浮动作为自己的div标签例如

  #content {

clear:both;

}

我已将以下整个代码包含在内

 <!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-Typecontent =text / html; charset = UTF-8/>
< meta http-equiv =Content-Languagecontent =en-us/>

< meta name =keywordscontent =/>
< meta name =descriptioncontent =/>
< meta name =authorcontent =/>

< title>示例< / title>

< base href =/>

< link rel =icontype =image / pnghref =/>

< link rel =stylesheettype =text / csshref =/>

< style type =text / cssmedia =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 {

清除: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.gifwidth =150height =96alt =logo/>< / div&

< div id =topnav>
< ul>
< li>首页< / li>
< li>关于< / li>
< li>浏览< / li>
< li> faq< / li>
< li>联系人< / 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 rut​​rum 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 socius varius id。 Imperdiet id magnis turpis beatae aliquet,vestibulum dolor nec eget eu cras lobortis,vel rerum,risus sed et,libero et non erosmedical。 Taciti eu leo sollicitudin malesuada,nibh duis amet aenean,odio aptent ultrices。 Tristique morbi nunc ullamcorper ut curabitur。在一个实施方案中,本发明涉及一种植物, Et坐在ante felis vitae坐。

Quam eget sed elit natoque velit,enim mauris mauris urna,integer amet tellus illo ipsum,dolor fermentum cursus enim mollis tristique porttitor。非尊严。 Sit ligula leo tincidunt,justo ut ut placerat quisque non,risus nonummy。超市毛利人congue aliquam aliquam felis,at placerat,amet vestibulum dictumst pellentesque iaculis risus。 Sem sed hindit nullam ultrices lorem aliquam,nulla tellus consequencesur 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整车辆,justo eget purus mattis donec vestibulum nunc,nunc vel eros lectus。
< / div>
< / div>

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

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


解决方案

b

这是相对的,少量的div。



浏览器渲染性能是非常令人印象深刻的这些天,所以主要的瓶颈将是



页面越小,下载和呈现的速度就越快。


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>

解决方案

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.

这篇关于使用多个DIV会影响页面性能吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆