div+css与table布局

  1:速度和加载方式方面的区别
  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并非字面上的含义那么简单,而有两重内在含义:
  一、结构与表现分离,用DIV完成结构,用CSS控制表现,这样带来的好处很是多,DIV精简了页面,提升了灵活性。而精通CSS的设计师能避免DIV的重复嵌套,从而大大提升页面加载速度,以及站点的能够维护性。
  二、选用DIV 来配合CSS的缘由,CSS 的核心是 “盒子模型”,而没有哪一个标签能比DIV更好的诠释“盒子模型”的精髓,TABLE的结构过于复杂,并不能很好的作到这一点,虽然TABLE+CSS也是一种选择,但别忘了DIV还有另一个优点,浮动层叠,并且用TABLE进行布局的网站是不能经过W3C验证的。
  其实DIV的好处还远远不止这些,例如弹性布局,用户自定义布局,DIV都展示出难以想象的灵活性,而富有语义的结构对搜索引擎的友好度也比TABLE要来的高,更不用说跨平台的应用。DIV+CSS为咱们提供了一个优雅而规范的技术框架,让咱们能用最少的重复劳动,完成更多更美观的页面,从而提高整个团队的效率,甚至改变长期以来网页设计师与网页程序员没法同步工做的问题。
在我亲身经验中,使用DIV+CSS的团队,与使用TABLE+CSS的团队相比,工期缩短30%-50%。
  劣势:table布局规避了许多浏览器不兼容的问题。而DIV则必须面对这些问题。css

相关文章
相关标签/搜索