【问题标题】:Why do table layouts have faster page load? [closed]为什么表格布局的页面加载速度更快? [关闭]
【发布时间】:2017-01-17 07:31:01
【问题描述】:

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

heftier 的标记是加载时间越慢,对吧?有人可以解释和/或提供一个表加载速度如何更快的示例吗?

【问题讨论】:

  • 我没有看到任何关于这个问题的确切数据,而且这个问题已经存在三年了。
  • “语义”并不总是意味着“更小”。只是说。
  • 哦...如果您查看google.com,整个页面中只有一个表格——而且它是空的。
  • 这是一个加载的问题。表格布局加载速度更快的证据在哪里?我看到很多网站都支持 div/css 并声称 div/css 加载速度更快。例如 - twoninemedia.com/blog/index.cfm/2007/4/19/…
  • @IsaacFife 支持您的评论,因为它是基于证据的,但是相反的证据在哪里?一个测量一张表格下载时间的网站采用两种方式呈现。本身不会超出轶事状态。

标签: html css tablelayout


【解决方案1】:

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

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

话虽如此,使用表格而不是 div+css 是有原因的。

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

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

有人指出

W3C HTML5 标准清楚明确地规定表格只能用于表格数据。

这当然是不正确的,但这只是因为使用了“仅”这个词。来自@Isaac Fife 状态的link

作者不得将元素、属性或属性值用于其适当的预期语义目的以外的目的,因为这样做会妨碍软件正确处理页面。例如,尽管在语法上是正确的,但以下文档是不符合标准的:[HTML for a page contains a table contains a table by two rows with a cell.]...因为放置在单元格中的数据显然不是表格数据。 ..” 参考为什么 table 标签的特定使用是错误的

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

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

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

...

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

对于那些想要更多(尽管尚未最终确定)的人,W3.org page for Tabular data (HTML5) 它声明(注意:在撰写本文时 HTML5 尚未标准化,这就是为什么它们是页面底部的红色框.):

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

...

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

注意:使用 HTML 表格进行布局有多种替代方案,主要使用 CSS 定位和 CSS 表格模型。

由此可见,标准编写者希望阻止使用表格进行页面布局。话虽如此,他们并没有说严格禁止使用表格进行页面布局,因为角色属性可用于指示表格正在填充“演示”角色。

从标准看来,最好的做法是使用表格来呈现表格数据,而不是用于布局。关于何时使用表格的一个相当好的经验法则可以在about.com找到。

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

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

不当表使用示例可在w3schools.com

找到

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

【讨论】:

  • W3C HTML5 标准清楚明确地规定表格只能用于表格数据。请参阅第 3.2.1 节。 dev.w3.org/html5/spec/Overview.html#semantics-0
  • 另外,div 应该在没有语义上合适的块标签时使用。它的使用方式并不像很多人使用的那样(对于页面中的每件事)。如果最终有很多<div class="nav"> 之类的东西,那么就有一个<nav> 元素的语义案例。或者,如果他们看到很多 <div id="footer">,他们可能会添加一个 <footer> 元素。哦等等... :)
  • @cHao 我不知道你为什么要转发我帖子中的内容,我已经说过 HTML 5 添加了新标签来替换常用的 div 标签,并链接到一篇文章,上面写着“The W3C mined billions” "还是我的答案太长而无法阅读?
  • 我有一半时间不阅读链接的文章。如果答案不在这里,那就不算数。 :) 但是这篇文章的大部分内容(当我发布该评论时)都是为了捍卫表格布局。然后你就像“我不认为 W3C 标准打算用 div+css 替换表格”,当它发布在“有理由使用表格代替......”时。基本上,措辞使它看起来像别的东西。
  • @cHao 如果您阅读了整个项目符号,它还会说“此外,HTML5 引入了新标签来替换常用的 div+css,例如“article”、“aside”、“footer”等。如果 div +css 是要走的路,为什么立场的作者会不鼓励使用它?”至于防守牌桌,是的,我正在保护牌桌。它们是应该在适当的地方使用的标签,而不是在所有情况下都替换为 div+css。
【解决方案2】:

在页面性能方面,我没有看到任何关于表格布局与 divs+css 的数据;老实说,我相信无论有什么不同,微优化都不值得你花时间,除非你是像谷歌这样的主要参与者。话虽这么说,有几个场景我可以设想表格布局具有更好的性能,这与它不需要 CSS 进行布局这一事实有关,因此可以减少整体带宽消耗(这将仅当删除的大量 css 定位代码超过表格布局所需的添加量时才有效)。此外,如果您可以完全消除 CSS(并嵌入剩下的任何内容),您可以消除单个 GET 请求(同样,只有像 Google 这样的人可能会关心的微优化)。

但是,就像您对 2009 年链接问题的答案一样,我所能做的就是推测 Google 使用表格布局的真正原因。性能甚至可能不是他们决定的因素!您必须记住,早在 2009 年,向 divs+css 的运动仍在进行中,有大量的主要网站尚未适应,由于大量的错误和,并不是每个人都完全相信这是值得的。兼容性问题。

据我们所知,Google 选择使用表格可能只是为了保持与存在大量 CSS 问题的古老浏览器的兼容性(例如 IE5/6)。在我看来,这而非性能似乎更有可能。 请记住,我从来没有凭经验证明表格更快,只是理论上在某些情况下。

【讨论】:

  • 2009 年 div+CSS 的迁移还在进行中?在那一点上,我认为 CSS 在 10 年内一直是优于表格的首选布局方法。
  • @Chuck 如果它是今天的首选布局,你不会听到这么多人声称 CSS 会死,因为 IE8 将引入 display:table。人们对基于表格布局的想法如此执着,SitePoint 写了一本书,称赞使用display:table 来实现不使用 html 表格的表格结构(这可以说比开始使用 html 表格更糟糕)!跨度>
【解决方案3】:

不要读成

为什么 CSS 中较少的代码行比 HTML 中的大量代码要慢 比如桌子?

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

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-03-15
    • 1970-01-01
    • 2015-01-25
    • 2015-12-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多