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

20 种提升网页速度的技巧

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

检查 cookie 使用情况

  cookie 可能是很小的文件,但是浏览器仍然需要下载它们。较大的 cookie 所需的下载时间更长,进而增加了浏览器加载网页的时间。正因为如此,尽可能缩小 cookie 来最小化对浏览器响应时间的影响非常重要。

  此外,设置一个较早的 expire 日期或者根本不设置 expire 日期,会缩短响应时间。

不要包含不必要的 JavaScript 代码,尽可能将其外部化

  与 cookie 类似,JavaScript 文件的下载也需要时间,这不可避免地会降低整个页面的加载速度。因此,明智地使用 JavaScript(仅在真正必要时才使用)并优化脚本的大小和速度。

  缩短 JavaScript 下载时间的另一种方式是使用外部文件,而不是包含脚本内联。这种方法也适用于 CSS,因为浏览器会缓存外部化的文本,而(在 HTML 页面自身中)以内联方式编码的 CSS 或 JavaScript 每次都会随 HTML 一起加载。要通过在 HTML 中引用 CSS 和 JavaScript 代码来外部化它们,可以使用具有以下形式的代码:

<link href="/stylesheets/myStyle.css" media="all" rel="Stylesheet" type="text/css" />
<script src="/javascripts/myJavascript.js" type="text/javascript"></script>

删除任何不必要的元素

  可能这是所有技巧中最显而易见的一个,但是它也是最容易忘记的一个技巧。我曾经提到过 “少即是多”:这不仅是为了真正吸引更广泛的用户,还意味着需要下载和处理的东西更少。如果您真正需要在网页上放置许多内容,考虑将网页分为 2 个、3 个或更多的独立页面。

一些优化网页的技巧

  可以使用许多方法来优化您的网页,包括压缩 JavaScript 文件,使用超文本传输协议(Hypertext Transfer Protocol,HTTP)压缩,以及设置图像大小。

压缩和缩小 JavaScript 文件

  JavaScript 文件可能非常大,这意味着在某些情形中,它们的下载时间可能比所有其他组件下载时间之和还长。解决此问题的一种方法是压缩 JavaScript 文件。您可以使用 GNU zip (gzip) 来完成此任务,因为许多浏览器都支持这种压缩算法。

  另一种替代方法是缩小文件。这种方法删除代码中所有不必要的字符,比如制表符(tab)、新行和空格。它删除代码中的注释和空白,进一步缩小文件大小。外部和内部样式表都可以缩小。两种最流行的缩小工具是 JSMin 和 YUI Compressor(参见 参考资料)。

使用 HTTP 压缩,并始终使用小写的 div 和类名

  可以使用 HTTP 压缩来减少服务器与浏览器之间的通信量。可以在 Apache 中配置 HTTP 压缩(.htaccess 文件),或者可以将其包含到页面中(对于 PHP,可以使用一个 HTTP_ACCEPT_ENCODING 选项)。但是请注意:不是所有浏览器都支持压缩。即使是支持压缩的浏览器,压缩和解压缩都会加重处理器的负载。

  另外,考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩,因此您可以将压缩对象限制为 HTML、CSS 和 JavaScript 文件。

  另一种减少压缩工作的技巧是使用小写形式的 <div> 元素和类名。由于大小写敏感性,并且使用的是无损压缩,<header> 与 <Header> 不同,它们被压缩为两个不同的标记。在下面的例子中,对于压缩程序来说,Important 类与 important 类是不同的,这意味着对于压缩程序,它们表示不同的对象,因此被分别压缩为两段不同的文本。

<div class="Important">read this!</div>
<div class="important">This will cost you some valuable load time</div>

  留意细节似乎无关紧要。但是当您优化文件时,所有细微的细节都应考虑在内。

  设置图像大小

  与表格单元格、行和列一样,当您未明确设置图像大小时,浏览器需要执行计算来显示图像,这会降低处理速度。此外,在某些情形下,图像大小的计算结果可能不正确,因此图像会发生变形。

  将 CSS 图像映射用于装饰功能

  使用图像映射代替多个图像,这是另一种缩短加载时间的方式,因为同时下载图像的各个独立部分能够加快整个页面的下载进度。或者,您可以使用某种名为 CSS sprites 的工具(参见 参考资料)。CSS sprites 可帮助减少 HTTP 请求的数量。一个图像可以包含装饰或布置页面所需的所有图像元素。您使用 CSS 来选择(通过调用某些位置和维度)用于特定元素的映射。

0
0
标签:Firebuy YSlow

.NET技术热门文章

    .NET技术最新文章

      最新新闻

        热门新闻