Div与table的区别在速度和加载与网页应用等等中的差别介绍

  Div与table的区别在各个方面表现都很明显比如速度和加载方式方面的区别、在网页应用中的差别等等,多不胜数,下文详细整理了一下,喜欢的朋友可以参考下,希望可以帮助大家更好的理解Div与table的区别

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

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

  div 的加载方式是即读即加载,遇到

没有遇到

的时候一样加载 div 中的内容,读多少加载多少;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为我们提供了一个优雅而规范的技术框架,让我们能用最少的重复劳动,完成更多更美观的页面,从而提升整个团队的效率,甚至改变长期以来网页设计师与网页程序员无法同步工作的问题。

时间: 2024-10-29 12:43:13

Div与table的区别在速度和加载与网页应用等等中的差别介绍的相关文章

《数据科学:R语言实现》——第2章 数据抽取、转换和加载 2.1 引言

第2章 数据抽取.转换和加载 2.1 引言 在使用数据回答关键业务问题之前,最重要的事情是准备数据.数据通常存在文件中,使用Excel或者文本编辑器可以轻松地获取.但是数据也可以来自于其他来源,例如数据库.网站和各种文件格式.能够从这些源中引入数据很重要. 数据主要有4种类型.以文本形式存储的数据最简单.由于一些用户需要把数据存在结构化的文件中,因此带有.tab或.csv扩展名的文件可以用来存放一定列的数据.很多年以来,Excel在数据处理领域占据主导地位,这个软件使用.xls和.xlsx文件格

seo优化div与table布局的区别

seo优化div与table布局的区别 在开始学做网页时,根本就不知道什么是seo也不知道,动态网站是怎么做的,那么自然那时做网站是挣不了钱了,更不要说排在搜索引擎前几位了.也更不知道div是什么啊. 好了现在我们就来看看table与div布局的区别.     table是由:    <table class=classname><tr> </td>内容</td></tr></table> 如果我们要显示多行数据就会出现很多tr 与t

DIV与Table两种页面布局方式在大型网站的可用性比较

DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABLE就是多么多么牛. 用DIV进行排版的优势就是我不说,大家应该都比较清楚.DIV是标准,是大势所趋,但并不意味着所有的页面都适合用它来做. 中国的门户和国外的有很大的区别,中国网民并不喜欢信息量少的页面,YAHOO到了中国页面上的内容就多了不少,而上次改为简洁的页面后访问量下降的厉害以至于没过几天就又改

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

比较 DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABLE就是多么多么牛. 用DIV进行排版的优势就是我不说,大家应该都比较清楚.DIV是标准,是大势所趋,但并不意味着所有的页面都适合用它来做. 中国的门户和国外的有很大的区别,中国网民并不喜欢信息量少的页面,YAHOO到了中国页面上的内容就多了不少,而上次改为简洁的页面后访问量下降的厉害以至于没过几天

网页设计之css+div PK table+css

css|设计|网页|网页设计 用过div+css作个整个网站,如果是纯粹的div的布局是比较麻烦的,尤其是你div里面嵌套div的,div布局的时候,你有些页面效果还是要舍弃一点的,比如图片的圆角,这些如果套div比较麻烦,在一个div在VS2005设计器里面可能变形,如果过多的套div,你实现ajax拖动效果的时候比较麻烦,所以我觉得眼下还是div+嵌套table比较好. 圆角--可以用div+css做出一样漂亮的圆角,而且不用图片,而且是宽度.高度自适应的 怎么实现?挖挖Google Tal

div与span的区别

<div>与<span>的区别在于,<div>是一个块级元素(block-level)元素,它包围的元素会自动换行,而<span>仅仅是一个行内元素(inline elements),在它的前面后不会换行.<span>没有结构上的意义,纯粹是应用样式,当其他行内元素都不合适时,就可以使用<span>元素. 此外,<span>标记可以包含于<div>标记之中,成为它的子元素,而反过来则不成立,即<span&

html5 anvas-html5 Canvas制作马赛克块数问题和加载速度问题

问题描述 html5 Canvas制作马赛克块数问题和加载速度问题 这两天在看canvas 今天照着课本敲了下马赛克的代码. 以下是主要代码 var imageData = context.createImageData(500,500); var pixels = imageData.data; //马赛克的块的个数 **//个数如果为2的平方数显示会比较好,但是32为什么不好?加载也比较慢** var numTileRows = 32; var numTileCols = 32; //每个块

div和table的麻烦?求助![

问题描述 页面表示的是一个树,html如下:<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><HTML><HEAD><TITLE>NewDocument</TITLE><METANAME="Generator"CONTENT="EditPlus"><METANAME="Author"CO

CSS技巧荟萃:了解CSS页面布局和加载流程

如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性.在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局. 介绍 在我们开始正式的介绍页面流程前,我们需要简单了解几种不同类型的html元素,以及它们的缺省显示方式.这里我们主要重点介绍两个类型的元素: block inline 如果大家关心html5的话,你应该知道在HTML5中也包含了几个新的元素,例如,section,article等等,但是仍旧遵循这里我们介绍的显示类型. inline类型的元素包括: