转: Div与table的区别

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/272763.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

你的工作是为了你自己!

1、无论为谁打工&#xff0c;要为自己学东西&#xff0c;客观为公司创造价值。我自己当年&#xff0c;无论我在方正给国内企业工作&#xff0c;还是我在雅虎给外国人工作&#xff0c;我都跟别人最大的不一样&#xff0c;我从来不觉得我在给他们打工&#xff0c;我真的可能是很有…

java 无法注入service_SpringBoot集成shiro,MyRealm中无法@Autowired注入Service的问题

网上说了很多诸如是Spring加载顺序&#xff0c;shiroFilter在Spring自动装配bean之前的问题&#xff0c;其实也有可能忽略如下低级错误。在ShiroConfiguration中要使用Bean在ApplicationContext注入MyRealm&#xff0c;不能直接new对象。道理和Controller中调用Service一样&…

python之函数用法startswith()

# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法startswith() #http://www.runoob.com/python/att-string-startswith.html#startswith() #说明&#xff1a;返回布尔值,用于检查字符串是否是以指定子字符串开头&#xff0c;如果是则返回 True&#xff0c;否则…

别去取悦,心里没你的人

鞋子不合适不必硬塞&#xff0c;否则磨了自己的脚&#xff1b;不必讨好心里没你的人&#xff0c;不在乎你的人&#xff0c;你付出再多&#xff0c;也打动不了他。讨好心里没你的人&#xff0c;会让自己很累很累&#xff1b;总是迁就他&#xff0c;总是围着他转&#xff0c;最后…

tensorflow java 加速_Tensorflow使用GPU加速

测试faster-rcnn时&#xff0c;cpu计算速度较慢&#xff0c;调整代码改为gpu加速运算将 with tf.Session() as sess: 替换为1 gpu_options tf.GPUOptions(per_process_gpu_memory_fraction0.9)2 with tf.Session(configtf.ConfigProto(gpu_optionsgpu_options,log_device_plac…

Install OpenStack Kilo Dashboard wiht Nginx + uWSGI On RHEL7.1

一、安装Horizon、Nginx、uWSGI yum install -y uwsgi-plugin-python openstack-dashboard uwsgi nginx 二、配置uWSGI cat >/etc/uwsgi.ini <<EOF [uwsgi] plugins python master true processes 10 threads 2 chmod-socket 666socket 127.0.0.1:9000 pidfile …

C#枚举类型的笔记

一、枚举类型的概念枚举类型声明为一组相关的符号常数定义了一个类型名称。枚举用于"多项选择"场合&#xff0c;就是程序运行时从编译时已经设定的固定数目的“选择”中做出决定。枚举类型&#xff08;也称为枚举&#xff09;为定义一组可以赋给变量的命名整数常量提…

java动态打印_JFreeChart学习(三)——动态打印java内存使用情况

JFreeChart动态打印java内存使用情况import java.awt.BasicStroke;import java.awt.BorderLayout;import java.awt.Color;import java.awt.Font;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt.event.WindowAdapter;import java.awt…

WPF中StringToImage和BoolToImage简单用法

在WPF的绑定控件操作中&#xff0c;经常会通过bool值或者某些特定的string值做出相应动作。但UI层控件的很多属性对应的都不是Bool值或者对应的只是固定的String值。 这个时候有两方法解决该问题。 1.是在后台cs中做出比较判断&#xff0c;然后根据相应结果传达UI层做出相应动作…

【必备】jQuery性能优化的38个建议

一、注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery&#xff0c;所有javascript开发过程中&#xff0c;都需要注意&#xff0c;请一定不要定义成如下&#xff1a;$loading $(#loading); //这个是全局定义&#xff0c;不知道哪里位置倒霉引用了相同的变量名&#xf…

java中策略设计模式_Java中的设计模式(五):策略模式

策略设计模式是行为设计模式之一。当我们为特定任务使用多个算法时&#xff0c;使用策略模式&#xff0c;客户端决定在运行时使用的实际实现。策略模式的最佳示例之一是Collections.sort()采用Comparator参数的方法。基于Comparator接口的不同实现&#xff0c;对象将以不同的方…

isset函数

isset (PHP 4, PHP 5) isset — 检测变量是否设置 检测变量是否设置&#xff0c;并且不是 NULL。 如果 var 存在并且值不是 NULL 则返回 TRUE&#xff0c;否则返回 FALSE。 $a "test"; $b "anothertest";var_dump(isset($a)); // TRUE var_dump(i…

SQLl中的left join、right join、inner join详解

left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只返回两个表中联结字段相等的行举例如下&#xff1a;--------------------------------------------表A记…

afudos备份bios不动_bios刷坏后的两种解决方法

通常主板新的BIOS可以修正旧版中BIOS的一些BUG&#xff0c;纠正对某些硬件和软件的兼容问题&#xff0c;添加新硬件的支持等等&#xff0c;所以有时我们需要刷新BIOS。但刷新主板BIOS实际上是存在一定风险的&#xff0c;虽然现在各主板厂商都推出了在Windows下刷新BIOS的软件&a…

光学基础知识:白光、颜色混合、RGB、色彩空间

1665年&#xff0c;牛顿(Isaac Newton)进行了太阳光实验&#xff0c;让太阳光通过窗板的小圆孔照射在玻璃三角棱镜上&#xff0c;光束在棱镜中折射后&#xff0c;扩散为一个连续的彩虹颜色带&#xff0c;牛顿称之为光谱&#xff0c;表示连续的可见光谱。而可见光谱只是所有电磁…

SQL Server各个版本功能比较

微软的SQlserver主要经历了从sql server 2000 到最新的sql server 2017&#xff0c;现把各个版本的更新特性介绍如下&#xff1a;SQL SERVER 2000日志传送索引视图SQL SERVER 2005数据库镜像&#xff08;只有 SQL Server 2005 Enterprise Edition SP1 和更高版本支持异步数据库…

java hibernate的使用_《Hibernate快速开始 – 4 – 使用JAVA持久层 API (JPA)教程》

章节目标使用JPA EntityManagerFactory使用注解提供映射信息使用 JPA 接口本教程可在 entitymanger/ 路径下下载4.1. persistence.xml之前的章节使用了hibernate原生的配置文件hibernate.cfg.xml。然而&#xff0c;JPA中定义了不同的的自助配置文件persistence.xml。这个启动过…

HTTP消息中Header头部信息整理

1、HTTP请求方式GET向Web服务器请求一个文件POST向Web服务器发送数据让Web服务器进行处理PUT向Web服务器发送数据并存储在Web服务器内部HEAD检查一个对象是否存在DELETE从Web服务器上删除一个文件CONNECT对通道提供支持TRACE跟踪到服务器的路径OPTIONS查询Web服务器的性能说明&…

gdb命令中attach使用

[测试程序] 我们先看看我们的测试程序: /* in eg1.c */ int wib(int no1, int no2) { int result, diff; diff no1 - no2; result no1 / diff; return result; } int main() { pid_t pid; pid fork(); if (pid &…

java%4d_java积累

数组的使用package javaDemo;import java.util.*;/**** author Administrator* version 1.0***/public class test {public static void main(String[] args){String[] greeting new String[3];greeting[0] "Welcome to Core Java";greeting[1] "by Cay Hors…