使用表和CSS的网页呈现速度

分享于 

8分钟阅读

Web开发

  繁體

介绍

使用CSS布置网页有些宣传者,并且有一些使用 <table> for布置网页的宣传者。 这两个阵营可能从这。

Background

我感兴趣确定 User Agent 所需的时间是否在使用 <table> 和使用CSS布局的web页面之间显著不同。 现在似乎有很多关于渲染时间的争论,但似乎没有很多目标数据。 同时,我想确定一些最小的CSS来创建三列"液体"网页。 液体设计允许网页在给定的任何空间中显示。 通常这样一个网页的宽度指定为百分比。

我决定建立三列网页。 在由 <table> 定义的布局中,这是相对简单的。 然而,在CSS定义的布局中,这种简单性是由复杂性的增加所。 主要原因:除非采取特殊步骤,每列都彼此独立。 这又意味着列的background 可以能不会扩展到页面上的同一个"底部"。 在下图中,body 有一个淡紫色的background,每个列都有不同的颜色,因这里描述了。

380 x"alt="错误的CSS布局"src="https://www.codeproject.com/KB/HTML/TablesVersusCSS/3ColumnCSSOriginal.png">

一种避免这个问题的方法是在等高度列的等高度列中用 Matthew James。 当应用到上一个网页时,它变成:

478 x"alt="固定CSS布局"src="https://www.codeproject.com/KB/HTML/TablesVersusCSS/3ColumnCSSOriginalFixed.png">

这就是我想要的,所以我使用泰勒的方法来生成实验的CSS网页。

一个读者指出,我没有说,CSS布局不仅仅是为了提供液流而提高搜索引擎优化。 前者是使用百分比宽度实现的。 后者是通过将中间列的内容放在 HTML ( 显然,搜索引擎在它遇到的第一个文本上放置更大的导入) 中的相当复杂的CSS实现的。

实验

为了执行实验,我执行了以下步骤:

  • 从使用泰勒方法派生的CSS网页,我使用 <table> s 派生了网页。 我注意到它们都是同样的视觉元素。

220像素"alt="css布局"src="https://www.codeproject.com/KB/HTML/TablesVersusCSS/3ColumnCSS.png"> 220像素"alt="table 布局"src="https://www.codeproject.com/KB/HTML/TablesVersusCSS/3ColumnTable.png">

  • 每个网页都由一对文件组成: HTML文件和CSS文件。 每个文件都使用适当的W3C验证服务( 例如。标记CSS ) 进行了验证。
  • 验证网页时,我使用压缩器 ( 具体版本 1.0 ) 压缩了HTML和CSS文件。 压缩后,两对HTML和CSS文件被放在我还没有发布的网站上。
  • 我使用 NetRenderer 因特网站点来测量页面渲染时间。 工具提供了位于我的网站上的HTML文件的网页地址。 工具运行了twelve次,并且在Excel电子表格中记录了( 以秒为单位)的呈现时间。

结果

原始数据和删除的异常数据为:

原始数据移除的异常值
TableDivTableDiv
1.8561.9771.6681.686
3.4451.8441.7121.705
4.6461.8331.7591.725
9.4202.7261.7721.740
1.6681.6861.7961.801
1.7721.7251.8561.826
1.7592.3521.8571.833
6.8311.8011.9961.844
1.7121.705
1.7961.826
1.8574.262
1.9961.740
3.2302.1231.8021.770

尝试使用互联网时可能会由于加载而随机增加值。 为了消除这个偏差,我删除了4 个最大值( 异常值)。

结束语

从"移除的异常值"列的平均( 粗体值),看来呈现使用 <table>的页面所需的时间和使用CSS布局布局的时间几乎没有差异。

一个观察

在开发本文的网页时,我得到了以下源代码长度:

字符
3ColumnCSS.htm1776
3ColumnCSS.css1007
2783
3ColumnTable.htm1867
3ColumnTable.css588
2455

这些源代码长度不重要。 但是,3ColumnCSS.css 文件的内容是。 考虑 3ColumnCSSWithComments.css 文件( 包含在可以下载的项目文件中)的内容。

* {
 margin:0;padding:0;border:0;/* This removes the border around *//* the viewport in old versions of IE */ }body {
 width:100%;background-color:#FFFFF0;/* Ivory */min-width:600px;/* Minimum width of layout - remove *//* line if not required The min-width *//* property does not work in old *//* versions of Internet Explorer */font-size:90%; }h1 {
 width:100%;float:left;margin:0.8em 0 0.2em 0; }p {
 margin:0.4em 0 0.8em 0;padding:0; }/* Header styles */.header {
 clear:both;float:left;width:100%;height:100px;border-bottom:#c00 solid 3px; }
.headerh1,
.headerh2,
.headerh3 {
 padding:0.4em 15px 0 15px; }/* page content container */.content {
 position:relative;/* This fixes the IE7 overflow hidden bug */clear:both;float:left;width:100%;/* width of whole page */overflow:hidden;/* This chops off any overhanging divs */ }/* common column settings */.left_column,
.center_column,
.right_column {
 float:left;width:100%;/* width of page */position:relative; }
.load_first,
.load_second,
.load_third {
 float:left;position:relative;padding:0 0 1em 0;/* no left and right padding on columns, *//* we just make them narrower instead *//* only padding top and bottom is *//* included here, make it whatever *//* value you need */overflow:hidden;/* This chops off any overhanging content */ }/* 3 Column settings */.three_column {
 background:#FFB6C1/* LightPink */
 }.three_column. center_column {
 right:25%;/* width of the right column */background:#FFDAB9;/* PeachPuff */ }
.three_column. left_column {
 right:50%;/* width of the middle column */background:#AFEEEE;/* PaleTurquoise */ }
.three_column. load_first {
 width:46%;/* width of center column content (column *//* width minus padding (2%) on either *//* side) */left:102%;/* 100% plus left padding (2%) of center *//* column */ }
.three_column. load_second {
 width:21%;/* Width of left column content (column *//* width minus padding (2%) on either *//* side) */left:31%;/* width of (right column) plus (center *//* column left and right padding (2%) ) *//* plus (left column left padding (2%) ) */ }
.three_column. load_third {
 width:21%;/* Width of right column content (column *//* width minus padding (2%) on either *//* side) */left:85%;/* Please make note of the brackets here:*//* (100% - left column width) plus *//* (center column left and right padding *//* (2%) ) plus (left column left and *//* right padding (2%) ) plus (right *//* column left padding (2%) ) */ }/* Footer styles */.footer {
 clear:both;float:left;width:100%;border-top:#c00 solid 3px; }
.footerp {
 padding:10px;margin:0; }
.footer. W3C_image {
 padding-left:25px;height:31px;width:88px; }

我相信,这些评论是保留,显示,我相信,一个重大的复杂性justifiably引起的。 然而,那些考虑使用CSS进行网页布局的用户应该事先。

引用

浏览器已经测试

Google ChromeFirefoxInternet ExplorerOperaSafari

所有的浏览器都为 table 和CSS布局产生了预期的结果。

历史记录

  • 05/19/2011 - 原始文档
  • 06/11/2011增加了一个回应读者评论的段落

WEB  tab    speed  tables  
相关文章