五招加速网页响应时间

来源：互联网发布：premium知乎编辑：程序博客网时间：2024/04/28 18:08

1. 使用Yslow概览与测量网站加载时间

在决定什么出问题之前，知道网站的加载时间是第一步。它也能让你知道你是否需要为网站加速进行更改。

在我们开始之前，如果你还没有安装YSlow, 请安装。他是Mozilla Firefox的一个扩展，你可从下面的链接找到它：https://addons.mozilla.org/en-US/firefox/addon/5369

第一，让我们浏览Six Revisions网站，我们都使用相同的例子进行测试（仅需要在新的标签或者浏览器窗口中打开）。

在浏览器的有效叫，有里程表的一栏（如图1）。在其旁边，当网页完成加载以后，你会看到"YSlow"和数字。数字代表浏览器加载网站所花费的时间(以秒计)。我们希望这个数字保持尽可能低的水平。

等级领域

让我们贯穿每个等级因素，下面是每个等级领域的简短秒速，以及如何解决这些问题实现最佳的性能。

减少HTTP请求:当网页从服务器获取文件的时候便有HTTP请求产生。范围包括脚本，CSS文件，图片以及asynchroneous客户端/服务端请求 (Ajax和其他变化的技术)。这是提及性能时的关键处，但是只需费点体力便能很容易解决。例如，尽可能的合并脚本，CSS，以及图像，在用户的机器上缓存文件常常有帮助。

添加期限头部: 80% 的页面加载时间都于下载脚本，图片以及CSS有关. 多数情况下，这些元素在用户的机器中不会发生改变，你可以通过在.htaccess中添加代码缓存在用户本地机器中（我们会在文章的后面对如何操作进行讨论）。

Gzip 部件: Gziping或者压缩JS文件，图片，HTML文档，CSS文档等等。用户可以下载较小的文件版本，增加网页的加载速度。这样可以降低服务器的消耗，但是解压缩部件也可能导致页面响应变慢，这取决于用户的浏览器。

把CSS放在顶端: 把CSS文件放在网站的顶端，可以是网站尽可能同时加载其他部件，如图像和文字。

把js放在底端: 把CSS放在文档的头部，仅需要在关闭<boby>前插入js.在这些脚本在后台加载的同时，用户先得到看似完整的页面。

避免使用CSS表达式: 我从来没有使用过CSS 表达式 (被称之为动态特性), 这仅是IE专有的一个增加编程概念（如控制/有条件的结构）的CSS特性,截止到IE8，三叉戟布局引擎（在IE中使用的）不再提供支持。反正使用他们没有一个好想法。在某种程度上，我会基于不同的条件使用PHP脚本加载不同的CSS样式规则，例如一个随机数，一天的时间，或者浏览器。

外部调用JS与CSS: 将JS和CSS文件放在外部文件中，浏览器缓存他们要比每次调用拥有更快的页面加载速度。

减少DNS查找: 只要用户在浏览器的地址栏中键入域名，浏览器总会执行DNS查找IP地址，网站拥越多的入口位置，必要的DNS查找也会越多。尽可能的保持较低的水平，平均60-100毫秒进行一次DNS查询。

缩小JS: 不同于一般的gzip压缩，缩小js文档是去除不必要的空格, tabs, 和其他跟中跟杨的选择字符，减少文件的总尺寸，较小的页面可以获得更快的加载速度，你可以使用 JSMIN来缩小JavaScript.

避免重定向:无论是服务器端头重定向，js重定向，或者HTML元素重定向。你的网站都会加载空白的页面的头，然后再加载新的一页，用户为了获得需要的页面花费越来越多的时间，所以要不惜一切代价避免这种情况。

去除重复的脚本: 浏览器加载相同的脚本会增加页面的加载时间，这是非常简单的数学问题，更多的文件等于更多的加载时间。仔细检查你的网站，确保你没有调用两次或三次jQuery或者其他的脚本。

2. 使用CSS精灵减少HTTP请求

CSS Sprites 可能是自从Tesla发明了电流以后最cool的事情。呃，我的意思是爱迪生。

嗯，不大，但是非常紧凑。

CSS sprites 可以通过合并你的css背景图片，减少页面向服务的HTTP请求，轻松的降低页面的加载时间。

3. 先加载CSS最后加载JavaScript

某些站点，你根本无法避开所有的扰乱了你的功能的HTTP请求。

在这方面，以下几个建议：

在body上的<head>标签里加载CSS
在</body>标签闭合前加载JavaScript .

会发生什事情呢？网页在用户的机器上加载显示，因此他们的眼睛就开始扫描所提供的内同，这个时候JavaScript正好迎头赶上在后台进行加载。 i

提示：如果您不想移动JavaScript标记，你认为它会搞糟网站的方式工作，我建议使用 defer 属性。用法如下：

 <script defer='defer'>

4. 使用子域名并发下载

并行下载，当你增加文件下载。如果你有打开网页在页脚的状态栏，你会发现加载其他网站的时候，会同时对static.domain.com和c1.domain.com进行请求.

这是一个非常棒的优化负载性能的方法。虽然只是简单的食用子域名，内容在同一个服务器上，但是浏览器是当作独立的服务器进行对待。

进行这样的设定:

在服务器上创建3个子域名
把图片放在在每个子域名的一个文件夹内
在新建的子域名中替换网站图片的位置路径

现在使用JavaScript文件,不会超过两个并发。

5. Adding an Expires Header

一些网站非常丰富，即使使用上述的技术后，性能似乎还可以增加更多。

一个用户访问你的网站，产生一些必要的页面，图片，脚本等HTT请求。

当你使用了Expires Header,你可以在用户的本地机器对这些元素进行缓存，不仅提高了他们的访问速度，也节省了你的带宽。 Expires header可以在所有的图片，脚本与css上使用。

只需要在你的网站根目录.htaccess文件中加入一行代码就可以轻松做到。（假如你没有，可以用文本编辑器创建一个，存为.htaccess，然后上传到根目录中。）

下面的.htaccess.为ico, .pfd, .flv (Flash类型文件), .jpg, .png等设置了2010到期的遥远的期限。

<FilesMatch "/.(ico|pdf|flv|jpg|jpeg|png|gif|js|CSS|swf)$">
  Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

请注意:如果设定过于遥远的expires header,你更新文件需要重新命名(version it) 否则使用缓存的用户将无法看到更新。

例如，如果你拥有一个avaScript文件需要更新, 使用版本号码然后更新所有的旧版本文件 (即. javascriptfile-1.0.js, javascriptfile-1.1.js)

原帖地址：http://www.20ju.com/content/V93677.htm