---恢复内容开始---

div中嵌套了div速度将会同样很慢
 

   最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化。但我们发现就算给他们用div+css的形式做出的网站也没见他们做过什么优化,甚至连文章都没更新过。这是外话,我们就来谈谈难道真的用div+css制作出来的网站就打开速度就快,对搜索引擎就友好吗?
关于div+css的优点其实确实很多,这种布局方式大大精简了页面的代码量,减少了网页的体积,有利于网页的读取。而table的排版方式最初是由一位负责给报纸排版的人使用的,他的“发明”对于互联网可以说是起到了极大的推动作用。让传统的网页实现了丰富多彩的颜色和布局结构。在互联网发展的初期使用比较多的浏览器其实并非IE,而是美国的数家浏览器共存的局面,后来微软通过将IE与windows的捆绑才得到迅速的发展。直到最后又w3c组织对代码进行了规范之后table也才得到了快速的发展。
而后随着互联网的发展,人们对速度的要求越来越高,而table由于其天生的缺陷导致人们急于寻找新的方法来代替它,这就出现了div+css的网页制作方式。说这么多是想让大家了解一下这两种排版方式的历史,因此只能说div+css是现在比较流行也比较实用的排版方式,而你不能说table就不好,table的一些功能是div+css目前还无法替代的。
再来说说什么叫做div+css的滥用。大家都知道为什么我们不喜欢用table,就是因为table排版的话很多地方会需要嵌套的方式来实现我们需要的页面。而如果页面有很多这类嵌套那么你的网页体积将会大大增加,而浏览器在读取的时候是从<table>到</table>的顺序来读的,它只有在将整个table读取完的时候才能够将页面呈现出来。如果你嵌套过多的话可以想象一下你网页的速度将会是怎样的了。
而浏览器对于div+css形式的页面读取同样是遵循这个原则的,它也是从<div>到</div>来进行读取的。那么如果你的页面div中嵌套了大量的div速度将会同样很慢,而且嵌套太多的div也极容易会出现浏览器不兼容的问题。那么你这样做的页面跟table的嵌套又有什么区别呢?这就是我们要说的div滥用情况。一个div完全可以实现的效果就不要为了省事再去定义一个样式来。
那么如何来避免这种情况发生呢?这就需要对网页来进行web重构,对于web重构这个概念大家可以到百度上搜索一下。这是一个细致活,而且也是一个很考验网页设计人员能力的活。如果你懂的css又稍微懂些div,自己的网站是采用开源cms做的话,那么你自己就可以对网页进行重构。修改模板就可以了,但修改的过程中一定要注意浏览器的兼容性。
其实很多我们网站与浏览器不兼容的问题大都是因为对div使用不当,或者是过于滥用引起的。而table对浏览器的兼容性就要好很多,如果某个效果采用div会不可避免进行很多嵌套的话还是使用table更好一些。就是说用div+css与table制作页面,以达到对网页代码最大化的精简,同时又不丢失效果。
看完这些你应该明白了并不是div+css的就一定好,同样的页面效果有的网页设计人员仅用几个div就可以轻松实现,而有的网页设计人员却要用多于前者两倍甚至几倍的代码。

---恢复内容结束---

div中嵌套了div速度将会同样很慢
 

   最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化。但我们发现就算给他们用div+css的形式做出的网站也没见他们做过什么优化,甚至连文章都没更新过。这是外话,我们就来谈谈难道真的用div+css制作出来的网站就打开速度就快,对搜索引擎就友好吗?
关于div+css的优点其实确实很多,这种布局方式大大精简了页面的代码量,减少了网页的体积,有利于网页的读取。而table的排版方式最初是由一位负责给报纸排版的人使用的,他的“发明”对于互联网可以说是起到了极大的推动作用。让传统的网页实现了丰富多彩的颜色和布局结构。在互联网发展的初期使用比较多的浏览器其实并非IE,而是美国的数家浏览器共存的局面,后来微软通过将IE与windows的捆绑才得到迅速的发展。直到最后又w3c组织对代码进行了规范之后table也才得到了快速的发展。
而后随着互联网的发展,人们对速度的要求越来越高,而table由于其天生的缺陷导致人们急于寻找新的方法来代替它,这就出现了div+css的网页制作方式。说这么多是想让大家了解一下这两种排版方式的历史,因此只能说div+css是现在比较流行也比较实用的排版方式,而你不能说table就不好,table的一些功能是div+css目前还无法替代的。
再来说说什么叫做div+css的滥用。大家都知道为什么我们不喜欢用table,就是因为table排版的话很多地方会需要嵌套的方式来实现我们需要的页面。而如果页面有很多这类嵌套那么你的网页体积将会大大增加,而浏览器在读取的时候是从<table>到</table>的顺序来读的,它只有在将整个table读取完的时候才能够将页面呈现出来。如果你嵌套过多的话可以想象一下你网页的速度将会是怎样的了。
而浏览器对于div+css形式的页面读取同样是遵循这个原则的,它也是从<div>到</div>来进行读取的。那么如果你的页面div中嵌套了大量的div速度将会同样很慢,而且嵌套太多的div也极容易会出现浏览器不兼容的问题。那么你这样做的页面跟table的嵌套又有什么区别呢?这就是我们要说的div滥用情况。一个div完全可以实现的效果就不要为了省事再去定义一个样式来。
那么如何来避免这种情况发生呢?这就需要对网页来进行web重构,对于web重构这个概念大家可以到百度上搜索一下。这是一个细致活,而且也是一个很考验网页设计人员能力的活。如果你懂的css又稍微懂些div,自己的网站是采用开源cms做的话,那么你自己就可以对网页进行重构。修改模板就可以了,但修改的过程中一定要注意浏览器的兼容性。
其实很多我们网站与浏览器不兼容的问题大都是因为对div使用不当,或者是过于滥用引起的。而table对浏览器的兼容性就要好很多,如果某个效果采用div会不可避免进行很多嵌套的话还是使用table更好一些。就是说用div+css与table制作页面,以达到对网页代码最大化的精简,同时又不丢失效果。
看完这些你应该明白了并不是div+css的就一定好,同样的页面效果有的网页设计人员仅用几个div就可以轻松实现,而有的网页设计人员却要用多于前者两倍甚至几倍的代码。

div中嵌套div速度将会同样很慢的更多相关文章

  1. div中嵌套div中使用margin-top失效问题

    div中嵌套div中使用margin-top失效问题

  2. div中嵌套div水平垂直居中

    div中嵌套一个居中的div有很多方法,如果不想调整边距,有一个简单的方法: <div align="center" style="width: 200px;hei ...

  3. div中嵌套div水平居中,垂直居中

    方法一: div(父):display:table; div(子):display:table_cell;margin:0 auto;vertical-align:middle; 方法二: div(父 ...

  4. div中嵌套img元素,4px空白

    写布局的过程中遇到一个问题,在div中嵌套了img元素,没有指定div的高度,嵌套之后div高度始终比img高4个像素,没有设置内外边距,找不到原因. 除非强制div的高度为img的高度,才能使div ...

  5. 设置div中的div居中显示

    设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> s ...

  6. HTML里为什么不能在<p>标签中嵌套<div>标签

    学习过HTML语言的人都应该知道,在HTML里,有分块级元素和内联元素:例如我们常用到的div,o,ul,dl,table,h1...h6等,这些都是块级元素:而像a,b,i,em,img,span等 ...

  7. div中嵌套的多个div使用了浮动后居中的办法

    今天做网页的时候遇到了标题中的问题,网上查到了解决办法,记录一下一放以后忘记 <div class="wai"> <div style="float:l ...

  8. 大div中嵌套小div,点击大div时隐藏,点击小div不隐藏

    给小div添加一个click事件 <div onClick="event.cancelBubble = true">  //小div

  9. Div中嵌套一个div,怎么是里面的div居中?

    盒子居中是在写样式中经常遇到的问题,在这里说个我经常使用的方法~ 利用绝对定位:

随机推荐

  1. linux学习笔记之硬盘分区

    引用:http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/03/2997098.html PS:本文仅对知识点作总结.详情请参考原文. 首先 ...

  2. [Effective Modern C++] Item 7. Distinguish between () and {} when creating objects - 辨别使用()与{}创建对象的差别

    条款7 辨别使用()与{}创建对象的差别 基础知识 目前已知有如下的初始化方式: ); ; }; }; // the same as above 在以“=”初始化的过程中没有调用赋值运算,如下例所示: ...

  3. python面向对象(下)

    继承 继承描述了基类的属性如何"遗传"给派生类.一个子类可以继承它的基类的任何属性,不管是数据属性还是方法.创建子类的语法看起来与普通(新式)类没有区别,一个类名,后跟一个或多个需 ...

  4. (转+原)android获取系统时间

    参考的网站如下: http://c.biancheng.net/cpp/html/144.html http://www.linuxidc.com/Linux/2012-03/55909.htm 代码 ...

  5. asp.net 获取当前url地址

    设当前页完整地址是:http://www.jb51.net/aaa/bbb.aspx?id=5&name=kelli "http://"是协议名 "www.jb5 ...

  6. 发现一个不错的学习git的地方

    Git入门:http://rogerdudler.github.io/git-guide/index.zh.html 简洁.实用.高效的学习git基本操作的方式

  7. tomcat配置CATALINA_HOME变量

    1.CATALINA_HOME是TOMCAT安装路径的别名,目的是为了方便使用TOMCAT 2.计算机>属性>环境变量, 新建环境变量.变量名为CATALINA_HOME ,变量值tomc ...

  8. 【Lucene4.8教程之六】QueryParser与Query子类:如何生成Query对象

    一.概述 1.对于一个搜索而言,其核心语句为: searcher.search(query, 10); 此时,其最重要的参数为一个Qeury对象.构造一个Query对象有2种方法: (1)使用Quer ...

  9. Android 瘦身攻略

    http://www.jayfeng.com/2015/12/29/APK%E7%98%A6%E8%BA%AB%E5%AE%9E%E8%B7%B5/

  10. Http和Socket连接

    转自http://hi.baidu.com/%D2%B9%D1%A9%B3%E6/blog/item/d6a72d2bbf467cf2e7cd406d.html 相信不少初学手机联网开发的朋友都想知道 ...