为什么表格布局的页面加载速度更快?

时间:2012-03-08 23:18:52

标签: html css tablelayout

我听说Google uses tables for layout because tables load faster。我发现很难相信,与基于CSS的布局相比,表可以减少页面加载时间,而且布局更小/语义标记。

heftier标记加载时间越慢对吗?有人可以解释一下,和/或提供表格如何加载更快的例子吗?

3 个答案:

答案 0 :(得分:1)

对于当前的浏览器,使用表而不是div标签并没有真正的性能原因。

很长一段时间,HTML表格明显快于div + css表格,特别是在具有较大表格和大量浮动div标签的IE6中。这并不是说一些漂浮的div是显而易见的,通常页面有数百个浮动div,然后很容易注意到差异,但它是显而易见的。事实上,我记得有一个页面,我经常使用它从表格切换到浮动div的那一天非常明显。当然这是我经常访问的页面(所以我确切地知道加载需要多长时间)并且列出了所有Web安全颜色及其值(因此有很多浮动div)。当时这可以解释为表格的自定义代码比同等的div标签运行得快(并且更容易跟踪)。一旦浮动div标签完全实现,差异就不再明显了(表格因新的CSS实现而变慢)。

话虽如此,有理由使用表而不是div + css。

  • 我不认为W3C标准打算用div + css替换表格。这样做违背了他们的标准通常提倡的风格的结构的解释。此外,HTML5引入了新标签来替换常用的div + css,如"article", "aside", "footer", etc。如果div + css是要走的路,为什么standers的作者会阻止它的使用呢?
  • 选择时表更容易预测。你有没有开始在表中选择一些文本,只是为了看到所选的第一列,并且在选择第二列之前选择了表下的所有内容?我有,它真的是错误的(注意:我在过去几个月里没有检查过这个问题,但我认为写入不好的网站仍然存在问题)。
  • 非浏览器更容易识别表格。例如,复制/过去到Excel。表格总是正确复制,但div + css通常与A列中的每个单元格一起出现,或者有时整个表格放在一个单元格中。
  • 表格通常与div + css标签做同样的事情,但预定义的样式更多,导致CSS更简单。

在特定情况下,我并不是说一个人是对是错 我会说最好使用最适合的工作标签。

有些人已经注意到

  

W3C HTML5标准清楚明确地声明表格仅用于表格数据。

这当然是不正确的,但仅仅是因为使用了单词" only"。来自@Isaac Fife的link陈述

  

作者不得将元素,属性或属性值用于除其适当的预期语义目的之外的目的,因为这样做会阻止软件正确处理页面。例如,以下文档是不符合的,尽管在语法上是正确的:[包含由两行组成的表的页面的HTML,每行包含一个单元格。] ...因为放置在单元格中的数据显然不是表格数据。 .."关于为什么表标签的特定用法是错误的

虽然这不是明确的规则,但它是一个很好的例子,说明为什么不正确使用标签会成为一个问题。

可以在W3.org page for Tables (HTML4)上找到更明确的答案:

  

HTML表模型允许作者将数据 - 文本,预格式化文本,图像,链接,表单,表单字段,其他表等 - 排列到单元格的行和列中。

     

...

     

表格不应仅仅用作布局文档内容的方法,因为在呈现给非可视媒体时可能会出现问题。此外,当与图形一起使用时,这些表可能会强制用户水平滚动以查看在具有更大显示的系统上设计的表。为了最大限度地减少这些问题,作者应该使用样式表来控制布局而不是表格。

对于那些想要更多(虽然还没有最终)的人来说W3.org page for Tabular data (HTML5)说明了(注意:HTML5在撰写本文时并未标准化,这就是为什么他们是底部的红色框)页面。):

  

table元素以表格的形式表示具有多个维度的数据。

     

...

     

不应将表用作布局辅助工具。从历史上看,许多Web作者都使用HTML格式的表作为控制页面布局的方法,因此很难从这些文档中提取表格数据。特别是,诸如屏幕阅读器之类的可访问性工具的用户可能发现使用用于布局的表来导航页面非常困难。如果要将表格用于布局,则必须使用属性role =" presentation"用户代理正确地将表格表示为辅助技术,并将作者的意图正确地传达给希望从文档中提取表格数据的工具。

     

注意:使用HTML表进行布局有很多种选择,主要是使用CSS定位和CSS表模型。

由此可以清楚地看出,标准写入要阻止使用表格进行页面布局。话虽如此,他们并没有严格禁止使用表格进行页面布局,因为角色属性可以用来表示表格正在填写表格"作用。

从标准来看,最佳做法似乎是使用表格来呈现表格数据,而不是用于布局。在about.com

可以找到何时使用表格的相当好的经验法则

注意:请记住,表格标签确实代表网页上信息的结构或布局。标准不是试图完全删除表的使用,而是阻止使用表格来格式化页面。可以将从数据库中提取的信息放入表中,但不要将页面放在一个表中,其中顶部标题位于一行中,左侧选项栏和主页内容位于第二行的两个单元格中,底行的页脚。

正确使用表格的示例可能是ASCII look up charta web safe color chart

可以在w3schools.com找到不当表格使用的示例

更新2012/03/12:添加了其他信息和有效的标准参考,以阐明何时使用表格。

答案 1 :(得分:0)

关于页面性能,我没有看到关于表格布局与div + css的任何数据;老实说,我相信除了你是像Google这样的主要玩家之外,微观优化不值得花时间。话虽如此,有几种情况我可以设想表格布局具有更好的性能,并且它与布局不需要CSS的事实有关,因此可以减少整体带宽消耗(这会仅当移除的大量css定位代码超过表格布局所需的增加的批量时才有效。此外,如果您可以完全消除CSS(并嵌入任何剩余的CSS),您可以消除单个GET请求(同样,只有像Google这样的人可能会关心的微优化)。

但是,就像2009年关联问题的答案一样,我所能做的就是推测Google使用表格布局的真正原因。表现可能不是他们决定的一个因素!你必须记住,在2009年,divs + css的运动仍在进行中,有大量的主要网站还没有适应,并不是每个人都完全相信由于众多的错误而值得付出努力。兼容性问题。

据我们所知,Google选择使用表格可能只是为了保持与CSS有很多问题的古老浏览器的兼容性(例如IE5 / 6)。那个,而不是表现,对我来说似乎更有可能。 请记住,我从未在经验上建立表格更快,理论上在某些情况下。

答案 2 :(得分:0)

请勿将其视为

  

为什么CSS中较少的代码行比HTML中的大型构成要慢   如表?

重要的是,单行CSS如何为浏览器创建大量工作,而不是10行HTML可以为浏览器创建很少的工作。因此,这段代码生成的工作很重要,而不是创建工作的代码的长度。

在加载时,加载时间与使用CSS或html标签的天气大致相同。不同的是,如果你使用外部CSS,这将在服务器上创建另一个命中(可能会导致像谷歌这样非常繁忙的服务器上的性能问题)。此外,我们经常在stackoverflow上看到,内容已加载但CSS样式不是。如果使用内联css,则可以避免此类问题。

所以我认为仅在非常繁忙的服务器上才有意义,优化是游戏的名称。对于我们的一般用途,单独的CSS文件很好,更理想,因为它增强了代码的可读性和可维护性,并且不需要在HTML中嵌入所有内容。