网页加速:关于table[表格]的优化

本文依然属于高性能web前端优化指南》系列,此文主要讲一下table标签的相关优化。

table标签曾经因为使用简单——从firework里面直接导出来就是一个table网页——所以出现了大量使用table布局的网站;而后来又因为table布局太过死板修改不便而且冗余代码众多,又被网站开发者痛批导致跌入人生低谷。其实,table是无辜的,因为发明他的初衷不是为了用来布局。

如果你的网页整体架构是通过table实现的,强烈建议你废除。table只适用于做数据列表。

要优化table,首先要避免下面这些:

  1. 用table来架构网页
  2. table里面又套table
  3. 滥用rowspan和colspan

做到上面这3点,基本就可以无忧无虑的用table了。

本来table有个优点就是结构清晰,易生成,所以很多新手程序员或很多旧控件都使用table输出数据。但有两个问题可能是他结构清晰的优点荡然无存。

1,table里面套table

也就是连环表格。在大表格的一个td里面又加入一个小表格,很多时候后台程序都喜欢这么干。在源代码方面,这样连环套的写法造成代码混乱,阅读困难;在搜索引擎方面,由于搜索引擎是从上到下一次读取网页的,读到大表格里面的小表格,然后又跳出来读大表格,造成逻辑混乱,搜索引擎就不能正确处理上下文的关系了,导致非人为的理解混乱

2,rowspan和colspan

也就是跨行与跨列。这两个属性非常好用,如果给人看,像在word与excel里面,能给人一目了然结构清晰的感觉。但搜索引擎和人不同,上面说过他是从头到尾读的,一个跨行或跨列,就会在源代码上把本来相关的内容拉开一公里的距离。还是那句话,搜索引擎会出现逻辑混乱。

table布局的缺点:

要知道table相对来说是一个比较死板的元素,因为table里面的tr,td之类的,永远被限定在table范围内。table,有一个天生的框架,约束了里面的格子乱动——这是保持数据结构清晰的必要手段。

所以,想要用table做一个看起来不乱的网页结构,那就要用到上面提到的两个办法:大量的table连环套和大量的跨行跨列。但要知道,网页不只是看起来规整就可以了,而且要搜索引擎也看起来规整才行。

而且说实话,用table布局真心很难,比div之类的难多了——除非你是Fireworks导出党。

table做数据表格时能优化吗?

当然能。简单说一下它的优化措施:

1,定义表格的外观样式时,写在css中而不是使用table自带的属性

因为css的class可以无限重用,可以在表格本体上节约大量代码。关键是,css兼容性更好,定制性更强。

2,记住格子的关联性

这个关联性是指,如果表格的某一列中某一个格子定义了宽度,那此列的所有格子都会依照这个宽度,而不用再每个都设置——注意我说的是

怎么运用这个优点呢?也就是说你把表格第一行里面的所有格子设置宽度后,下面的格子就不用加什么宽度了——可以节约一些代码

但一些后台程序员只懂得循环输出代码,往往第一行加了width,后面的循环依旧会输出width。这一点需要后台人员注意。

3,不要拘泥于“一致性”

比如想要表格每行都一样高,即使某一行里面有换行。要做到这点,需在td里面套个div之类的才能实现,而每行都加个div无疑造成冗余代码。

————————-总结————————–

关于网页中table优化,其实没什么好说的,只要你不用table来做布局,就谢天谢地了。

发表评论

电子邮件地址不会被公开。