1:速度和加载方式方面的区别

div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的:

div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少;table 的加载方式是完成后加载,遇到 <table> 后,在读到 </table> 之前,table 中的内容不加载,或者传输中断了(document.onload()事件)的时候加载,这是因为TABLE牵涉到多行多列问题,所以只有当TABLE所有内容加载完毕,IE才知道该怎么显示

2:在网页应用中的差别

如果页面首尾加 table ,那么必须等整个页面读完了才加载

如果页面首尾加 div ,无任何影响

3:DIV与Table布局在大型网站的可用性比较

DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的。让TABLE做该做的事,并不是说页面里不出现TABLE就是多么多么牛。

用DIV进行排版的优势就是我不说,大家应该都比较清楚。DIV是标准,是大势所趋,但并不意味着所有的页面都适合用它来做。

中国的门户和国外的有很大的区别,中国网民并不喜欢信息量少的页面,YAHOO到了中国页面上的内容就多了不少,而上次改为简洁的页面后访问量下降的厉害以至于没过几天就又改了回来。正式由于中国的国情造就了搜狐、新浪这样门户。

为什么DIV不适合他们?下面我从几个方面来逐一说明:

精简代码:

大家都说DIV的布局精简代码,但是用DIV替代TABLE所节约的代码又被CSS(样式)所占用,而这些样式大多用于控制DIV的排版布局。那你会说了,CSS可以放在外部重用啊,要想得到这个问题的答案请往下看。

重用性与下载量:

统一使用一个.css的样式表文件,可以实现修改一次,全站修改的效果,这样使得维护的成本更低。但是请大家换一个角度想,如果所有页面在加载时都要访问一个文件,那这个文件每天的下载量,特别时在搜狐、新浪的网站平台上将达到几亿次,这就需要后面有很多台前端web服务器在做支撑,那后台的成本无形中也提高了很多。如果后台支撑没有做好,那么页面就会出现花屏,之前所作的工作也是白费。很多人会问,这样的几率太小了。我们所作的工作就是为了避 免这一两次意外的发生,如果意外发生了,对于门户后果将是不堪设想的。

HTTP通讯:

统一的样式表文件采用外部调用的形式,这样每次加载单个页面都会多一次对服务器的http请求服务器都会增加一次响应,这样对前端web服务器 会是很大的消耗。而原来很长时间都是将css和js写在页面前端(大家可以看看sohu和sina的页面,大多都是采用这样的形式),而不是作为外部调用 的形式,也是为了尽量避免给服务器增加消耗。

页面缓存:

每次用户访问的页面,都会在浏览器缓存中保存一定时间,以保证用户下次再访问该页面时能够大大提高页面显示速度。而每次修改都会使页面重新下载,对于每个外部导入的样式文件也是如此,如果CSS文件修改,那么访问网站的每一个页面都会重新下载,而以往的将样式写在页面中的方式,只是修改的页面需要重新下载。

兼容性:

对于CSS(样式表)并不是所有浏览器的所有版本都支持的很好,比如IE5以前的浏览器对于CSS的支持就不是很好。而现在使用IE5以前版本 浏览器的用户不在少数,这样就使得在页面制作的过程中需要针对不同浏览器版本进行测试,以保证兼容性,无形中也增加很多工作量(至少我接触的开发人员制作 div页面比table页面的标准时间要长一些)。

横切与延展性:

横切——传统的布局方式为了使页面下载的更快,把页面自上而下分成若干个块,但是往往采用DIV进行布局的页面都会出现这样的情况,由于每块中间栏或者其他栏内容条数不固定导致两边栏目没有同时自适应,而出现留白。

以上我们只是讨论某一技术在某一领域的可用性,而非技术本身。

说了这么多并不是说DIV这种布局方式不好,而是说我们应该正确的看待Table在以内容为基础的大型门户中的作用,而不是人云亦云。之所以 DIV的布局方式没有在大型网站应用,不是说门户没有用DIV是技术落后,是里面的人没有前瞻性,而是多种原因决定的。网易之所以全部采用DIV的方式是因为内容并不是他们主攻方向。而对于其他门户来说,这样的决策是要靠时间来验证的。只是现在这个时机还不成熟而已。

4:DIV+CSS

而现在我认为DIV +CSS并不是字面上的含义那么简单,而有两重内在含义:

1、结构与表现分离,用DIV完成结构,用CSS控制表现,这样带来的好处非常多,DIV精简了页面,提高了灵活性。而精通CSS的设计师能避免DIV的重复嵌套,从而大大提高页面加载速度,以及站点的可以维护性。

2、选用DIV 来配合CSS的原因,CSS 的核心是 “盒子模型”,而没有哪个标签能比DIV更好的诠释“盒子模型”的精髓,TABLE的结构过于复杂,并不能很好的做到这一点,虽然TABLE+CSS也是一种选择,但别忘了DIV还有另外一个优势,浮动层叠,而且用TABLE进行布局的网站是不能通过W3C验证的。

其实DIV的好处还远远不止这些,例如弹性布局,用户自定义布局,DIV都展现出不可思议的灵活性,而富有语义的结构对搜索引擎的友好度也比TABLE要来的高,更不用说跨平台的应用。DIV+CSS为我们提供了一个优雅而规范的技术框架,让我们能用最少的重复劳动,完成更多更美观的页面,从而提升整个团队的效率,甚至改变长期以来网页设计师与网页程序员无法同步工作的问题。

在我亲身经验中,使用DIV+CSS的团队,与使用TABLE+CSS的团队相比,工期缩短30%-50%。

转载于:https://www.cnblogs.com/shadowduke/p/4943958.html

转: Div与table的区别相关推荐

  1. div与table的区别

    div 和 table 的区别是加载方式. div的加载方式是即读即加载,遇到<div>,没有遇到</div>的时候,一样加载div中的内容,读多少加载多少. table的加载 ...

  2. DIV与Table布局在大型网站的可用性比较

    DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABLE就 ...

  3. hibernate中@Entity和@Table的区别

    Java Persistence API定义了一种定义,可以将常规的普通Java对象(有时被称作POJO)映射到数据库. 这些普通Java对象被称作Entity Bean. 除了是用Java Pers ...

  4. ABAP 内表修改 MODIFY 和 MODIFY table 的区别

    MODIFY table gt_intable FROM gs_intable. MODIFY gt_intable FROM gs_intable. 对于内表修改命令,MODIFY 与 MODIFY ...

  5. HTML中div与span的区别,在HTML的网页布局里div与span有什么区别

    很多刚入行的朋友不是很懂这俩个标签的区别,可能大家认为SPAN也是一块,DIV也是一块,同样的作用为啥有俩个标签呢?本篇文章就给大家解答这个疑惑. DIV与SPAN的区别与特点 以下是在没有对开发网页 ...

  6. lua中table.和table[]的区别

    lua中table.和table[]的区别 lua中的table可以定义为如下格式 local tab = { ["one"] = 1, ["two"] = 2 ...

  7. html table字体居中 css,CSS如何让DIV和table居中但是让其中的文字不居中

    这篇文章主要为大家详细介绍了CSS如何让DIV和table居中但是让其中的文字不居中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 我们在写网页代码的时候经常会 ...

  8. 包含多个table的html整体居中,css实现div或table居中,文字不居中【Chrome/Firefox/IE测试通过】...

    之前设计网页,如果希望div或table居中,总是用 把它包起来,但是这样的结果,div或table虽然居中了,但div或table里面的文字也居中了,这是不符合设计者意愿的.那么,我们能否用css实 ...

  9. HTML中DIV与SPAN的区别

    DIV 和 SPAN元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表.两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素). 具体步骤: 1.所谓块 ...

最新文章

  1. 【Qt】QImage使用总结
  2. php vbcrlf,我是这样打造自已的“菜刀”的,让一句话飞一会
  3. 在鹅厂面试5轮后扑街!微服务架构,我拿什么拯救你!
  4. 三、Beautiful Soup解析库
  5. BBAug: PyTorch的物体检测包
  6. python 重写抽象类编译错误_从零开始的Java之旅5.0继承、super、this、抽象类
  7. ZooKeeper原生java客户端使用
  8. c语言程序计算器清屏功能,C语言实现计算器功能
  9. 【资料】《数字电子技术基础》阎石第五版
  10. 【禁止重复造轮子Day01】省市级连的递归
  11. Guava的Splitter和Joiner
  12. ubuntu mysql的my.cnf_Ubuntu下面MySQL的参数文件my.cnf浅析
  13. springboot项目构建过程中易踩坑点
  14. Milvus 群星闪耀时|又一个小目标达成 :社区正式突破 15,000 星!
  15. 服务器 ftp查询文件是否存在,ftp查看远程服务器文件是否存在
  16. 详解跨境电商企业信息化建设的关键点:业财一体化
  17. Golang map
  18. 【C语言从零到入门】第二节 C语言开发工具的安装
  19. 搭建一个简单的云计算有哪些简单的配置文件
  20. AI深度学习文章成果 -(SEO内容训练模型产出的内容)

热门文章

  1. Express 入门之Router - worldtree_keeper的专栏 - CSDN博客
  2. 学习File API用于前端读取文件
  3. node --- 创建一个Socket服务器
  4. javascipt -- find方法和findIndex方法的实现
  5. jquery --- DOM操作、表单元素的初始化
  6. CSS3 2D Transform
  7. Linux运维系统工程师系列---13
  8. django 修改日期
  9. PPC系统常见启动项(StartUp)解说
  10. 关于pragma pack的用法(一)