您的位置:知识库 » .NET技术

20 种提升网页速度的技巧

作者: Marco Kotrotsos  来源: developerWorks 中国  发布时间: 2009-04-17 14:08  阅读: 4309 次  推荐: 0   原文链接   [收藏]  
摘要:您希望加快网页的加载速度吗?了解如何通过缩短加载时间来改善拨号上网用户的浏览体验,在某些情形下,加载时间最多可缩短 80%。
[1] 基本工具
[2] 常识:牢记设计规则
[3] 检查 cookie 使用情况
[4] 尽可能延迟脚本加载
[5] 使用 PNG 格式的图像
[6] 使用 YSlow 分析网页

常识:牢记设计规则

  令人惊讶的是简单的设计规则通常会被忽视,最终产生未经优化的、下载缓慢的网页。牢记以下规则,页面的加载速度将会更快。
使用良好的结构

  可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显。XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的 <start> 和 <end> 标记),这意味着浏览器要下载更多代码。所以,事情都有两面性,尝试在您的网页中使用较少的 XHTML 代码,以减小页面大小。

  如果您确实不得不使用 XHTML,试着尽可能对它进行优化。例如,删除空格并采用严格的 XHTML 编码实践,提高下载和解析速度。要严格执行 XHTML Strict 规则,向文档中添加以下 doctype 语句:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>

  XHTML 1.0 Strict 与 Strict HTML 4.01 是等效的,包含的属性和元素没有出现在 HTML 4.01 规范的反对内容中。记住,有两个标记能够在 XHTML Transitional 中使用,但不能在 XHTML Strict 中使用,例如:

  • <center>
  • <font>
  • <iframe>
  • <strike>
  • <u>

不要使布局超载

  在博客(和新的站点)流行起来之前,让页面水平滚动甚至垂直滚动被认为是糟糕的实践。页面越小,越难以(但并不是不可能)完好地填充屏幕。现在,对于博客和内容驱动的网站,不时可以看到几百 Kb 大小的长页面。是的,您需要填充更多空间,但是这并不意味着您必须使用大的背景图像、大量表格或者许多内容来填充。坚持简约原则:少即是多。页面中充斥着各种类型的图像、视频、广告等,这大大违背实用性原则,因此,在增加页面的内容时请三思。

不要使用图像来表示文本

  我们很少会控制字体在不同浏览器中的显示方式,与字体不同的是,图像总是精确地按照其设计方式来显示。但这不能当作使用图像来表示文本的借口。

  使用图像表示文本的最常见示例就是在导航栏中。美观的按钮更加具有吸引力,但是它们的加载速度很慢。此外,图像仍然不能由搜索引擎直接索引,因此,使用图像进行导航不利于搜索引擎优化(search engine optimization,SEO)。当无需图像就可以通过大量 CSS 技巧创建漂亮的按钮时,绝不使用图像来表示文本。

  一种适用于 CSS 样式的特定导航类型就是选项卡式导航,如下图 所示。

  除了体积较小之外,这种实现导航的方式也更加符合 Web 标准。

  清单 1 和 清单 2 中的代码以纯 CSS/XHTML 的形式实现基于选项卡的导航功能。

  清单 1. 基于选项卡导航的 CSS 文档

#nav {
float
:left;
width
:100%;
background
:#E7E5E2;
font-size
:95%;
line-height
:normal;
border-bottom
:1px solid #54545C;
}
#nav ul
{
margin
:0;
padding
:10px 10px 0 50px;
list-style
:none;
}
#nav li
{
display
:inline;
margin
:0;
padding
:0;
}
#nav a
{
float
:left;
background
:url("tableftK.gif") no-repeat left top;
margin
:0;
padding
:0 0 0 4px;
text-decoration
:none;
}
#nav a span
{
float
:left;
display
:block;
background
:url("tabrightK.gif") no-repeat right top;
padding
:5px 15px 4px 6px;
color
:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a span
{float:none;}
/* End IE5-Mac hack */
#nav a:hover span
{
color
:#FFF;
background-position
:100% -42px;
}
#nav a:hover
{
background-position
:0% -42px;
}
#nav a:hover span
{
background-position
:100% -42px;
}

清单 2. 基于选项卡导航的 HTML 代码

<div id="nav">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
</ul>
</div>

 

0
0
标签:Firebuy YSlow

.NET技术热门文章

    .NET技术最新文章

      最新新闻

        热门新闻