通过示例加快您的网站速度

Assad Baig

4.89/5 (90投票s)

2008年5月26日

CPOL

13分钟阅读

182595

1007

了解如何优化网页以获得更好的用户体验。

下载示例 AllInOne.zip - 37Kb - AllInOne.zip 包含（剪切粘贴即可使用）：优化的HTML Web模板，CSS悬停效果，CSS Sprites示例等。

引言

“我们活着只为发现美，其余都是等待。纪伯伦”，如果你同意这句话，那么你就明白让你的网络受众“等待”的时间最小化意味着什么。
过去几年里，构建HTML页面、添加图片、CSS和JS已变得轻而易举，但将这些富内容以高性能地传递给客户端浏览器仍然是一项艰巨的任务。这份精炼的检查清单将帮助你审查你的网站，以最大限度地减少下载时间。

注意：本文仅描述前端工程问题，不讨论任何编程/CGI脚本/数据结构/数据库/多媒体优化技术。

背景

去年，在开发WNetwork.com和Treehousetv.com时，我决定写下我过去几年在Web开发中的经验，以及从各种来源学习到的知识，并努力养成应用它们的习惯。我整理了这些笔记，希望每位读者至少能从中获得一两个想法。

打下基础

第一部分我们将看到时间花在哪里，然后第二部分我们将看到为什么以及如何最小化这段时间，最后第三部分我们将总结一些概念并列出工具。

第一部分：幕后
第二部分：优化加载时间
第三部分：工具

第一部分：幕后

本节描述了用户键入WWW地址到看到完整的网页呈现在眼前之间所发生的一切。这将让我们了解时间花在哪里以及如何最小化它。

请注意：上图可能看起来很复杂，但DNS查找通常不到一秒，大约：100毫秒到900毫秒。详细信息是为了展示完整的流程。

现在直奔主题

第二部分：优化加载时间

以下指南基于常见知识和经验的收集，应用可能因情况而异。我建议在应用任何指南后，记录当前网站的加载统计数据并进行分析。

1. 减少HTTP请求数量

为什么？
- 与Web服务器建立连接是一个耗时且占用网络资源的过程（涉及软件/硬件握手、数据包传输、数据包丢失、重发、验证过程和关闭连接等），并且是主要耗时环节之一。
- Web客户端（浏览器）在加载主资源时，会为每个资源发送单独的请求（例如：index.htm，然后是global.css，spring.css，logo.jpg，menu1.jpg，menu2.jpg，menu3.jpg，1x1.gif，corner1.gif，common.js，validation.js等...）
- 技术上，在加载主页面（index.htm）时，浏览器会从所有src={URL}、HEAD-LINK的href={URL}和CSS的url({URL})标签中提取{URL}，然后为每个资源发送单独的请求。
- 通常，浏览器每台主机并行下载的资源仅为2到4个（取决于HTTP版本和浏览器。Firefox似乎比IE更好）。
- 结论：浏览器请求/连接越少，响应越快。
如何做到？
1. 最小化文件数量（CSS、JS、图片等）。
2. 合并文件：（尽可能）
  - 所有CSS文件合并到一个文件中。
  - 所有JavaScript文件合并到一个文件中。
  - 甚至图片文件尽可能合并到一个文件中：使用background-image和background-position来显示所需的“窗口”图像。（参见AllInOne.zip中的示例CSS-Sprites.html）
3. 使用浏览器缓存
  - 首次访问时，浏览器必须下载所有资源，但第二次访问时，为什么不让浏览器从缓存（之前加载并保存的资源）获取资源呢（估计有50%到60%的用户浏览器设置为缓存）。因此，优化你的页面以尽可能利用浏览器的缓存。
  - 使用带有未来日期的“Expires”头信息将在下次访问时节省时间。只要缓存的对象未过期或被删除，浏览器就会使用缓存版本。
    对于HTML页面
```
<html>
  <head>
    <title>Cache - Example</title>
    <meta http-equiv="Expires" content="Sat, 16 Jul 2016 18:45:00 GMT">
    .....
  </head>

  <body>
  .......
  </body>
</html>
<html>
```
    对于图片/CSS/JavaScripts，按以下方式配置Web服务器
    - IIS：在IIS中，右键单击文件夹或文件>属性>HTTP头>点击“启用内容过期”>设置为“过期日期为{设置未来日期}”>点击“应用”。请参阅下面的图像文件夹示例
    - Apache：使用mod_cache、mode_file_cache模块配置缓存。
  - 不要缓存动态HTML页面，请参阅下面的示例
```
<html>
  <head>
    <title>No Cache - Example</title>
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
    .....
  </head>

  <body>
  .......
  </body>
</html>
```
  - 缓存/挑战
    - 如果某些对象（JavaScript等）稍后更改了怎么办？那么可以尝试使用“JsFunc_5.2.3.js”这样的文件名来表示新版本（或重新配置ETags）。
    - 另一个想法：不要缓存HTML，但缓存所有其他内容。[你可以简单地重命名HTML中的对象名称（修改URL）来强制浏览器下次加载新版本]。

2. 精通 <HTML>

为什么？
- 通常，HTML只占20%的时间，而其他（脚本、CSS、图片）占80%的下载时间，这意味着我们需要减少HTML的大小，并“帮助”浏览器尽快渲染它。
- HTML是所有对象和样式的总包装器，对浏览器正确理解、解包和渲染至关重要。由于X/HTML/CSS标准实现不当和浏览器大战，浏览器有两种模式：标准（快速模式，浏览器信任HTML页面开发者）和混杂模式（浏览器需要验证HTML/CSS，查找并“原谅错误”）。
如何做到？
1. 最小化下载时间
  - 页面大小能否减小？用户可能喜欢花2秒浏览5个页面，而不是10秒浏览一个页面（即：将页面分割成更小的页面并创建到其他页面的链接）。另一方面，用户可能喜欢一次性阅读完，所以更好的方法可能是介于两者之间。
  - 消除不必要的空格、不必要的/未优化的标签和注释。实际上，空格可能对可读性和维护性是必要的，那么在将文件移到生产环境之前，可以使用一些工具来删除不必要的空格。
2. 更快的渲染
  - 通常简单的设计是最好的。Google的主页只有6KB，并且HTML非常简单，这将有助于浏览器快速解析和渲染。
  - 标准模式与混杂模式，让我们通过“建立信任”（表明我们是专业的并遵循标准）来使用优化的HTML解析。要将浏览器切换到标准模式，请使用
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
     "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>DTD - Example</title>
    .....
  </head>

  <body>
  .......
  </body>
</html>
```
  - 将内联脚本和CSS移到外部文件（减少内联脚本的数量，例如：document.write();）
    - 遵循此指南：浏览器在渲染内容、应用CSS以及运行脚本来改变布局时会感到困惑，在这种情况下，浏览器必须重绘/或暂停内容渲染。因此，使用外部文件是更好的方法。
    - 打破此指南：外部文件意味着额外的HTTP请求和缓慢的下载。对于主页来说，小的内联脚本和CSS可能更好，因为下载速度更快且HTTP请求更少。
  - 分块内容
    - 用div块替换基于table的布局，或将表格分割成更小的表格。在接收到结束标签之前，浏览器无法渲染一个元素。即，在大外层<table>中的任何对象都无法渲染，直到其</table>被接收。
    - 以块状写入HTML，使用更多的<div>s，更少地使用<table>s。
    - 参见AllInOne.zip中的示例Template1.html..to..Template5.html。

3. 精通 <IMG>

为什么？
- 图片是下载中耗费时间和带宽的大对象之一。这方面的节省将显著提高性能。

如何做到？

尽量少用图片。
使用CSS悬停效果代替链接中的图片。（参见AllInOne.zip中的示例RollOvers.html）
始终为所有IMG指定WIDTH和HEIGHT参数。即使是最小的图片。

仔细选择颜色数量和图片格式
GIF：最适合纯色和颜色之间有锐利边缘的过渡，最多256色。
JPEG：最适合许多颜色或灰度的连续渐变。

何时使用GIF示例（如下）
GIF	JPEG 质量：10%	JPEG 质量：60%	JPEG 质量：100%
字节：156	字节：379	字节：433	字节：434
颜色：2 字节：318	字节：927	字节：1,994	字节：4,037
颜色：17 字节：713	字节：987	字节：2,159	字节：4,928
颜色：3+1（透明）字节：379	字节：1,249	字节：2,823	字节：6,651

何时使用JPEG示例（如下）
GIF	JPEG 质量：10%	JPEG 质量：60%	JPEG 质量：100%
颜色：256 字节：8,693		[x] 字节：4,370
颜色：256 字节：6,952	字节：863	字节：1,962	[x] 字节：5,604

请注意：不同的程序创建的图像尺寸不同，我使用了Photoshop CS2，W100xH100，72dpi。

避免使用动画GIF和FLASH（因为加载时间长且会分散注意力）。
使用背景颜色、填充和图像（重复）代替大图片。
切勿在服务器上一个文件夹中存放相同的图片。（避免两次HTTP请求且无法获得第一次缓存图片的优势。）
分层/渐进式加载大图片。这比较棘手，可以尝试一下，可能会花费更长的时间，但用户可能会感觉更好。
单个图片大小最好小于10KB，但不要为了减小文件大小而将大图片分割成小图片，而是使用CSS sprites或图像映射。（参见AllInOne.zip中的示例CSS-Sprites.html）

4. 精通 <TABLE>

避免使用一个大的外部表格，而是为页眉、内容1、内容2、内容3……、页脚等分别使用单独的表格。（参见Table-vs-Div(1-Okay).html和Table-vs-Div(2-Better).html在AllInOne.zip中的“非示例”）
使用<div>s代替<table>s，以块状（表格或div）而不是大外部表格来开发页面。（参见AllInOne.zip中的Table-vs-Div(3-Even Better).html示例）
通过嵌套表格设计，而不是使用单元格合并和分割。尽可能使用单独的表格。
始终为表格中的每个单元格提供width。确保一行中单元格的总宽度等于表格宽度。使用CSS table-layout:fixed（参见AllInOne.zip中的示例Table-ColGroup-2.html）或使用COLGROUP标签（参见AllInOne.zip中的示例Table-ColGroup-1.html）。
当使用小于10px的Width或Height时，使用1x1.gif透明图像。（Netscape不喜欢百分比度量。）

5. 页面组件的顺序

CSS
- 将CSS放在页面顶部HEAD标签内。这有助于浏览器在开始时就知道如何样式化和显示内容，然后获取所有内容。

JavaScipt

页面顶部（避免）：只有当JavaScript是页面初始显示所必需时，才将其放在HEAD中以便首先下载；否则，将DHTML脚本放在页面底部。

页面底部（理想）：尽可能将JavaScript放在页面底部，因为浏览器可能会在下载过程中阻止渲染（或重新渲染），希望document.write()能注入HTML。否则，尝试使用DEFER属性。

<html>
  <head>
    <title>CSS and JS defer - Example</title>

    .....
    <link rel="stylesheet" type="text/css" 
         href="rich-layout.css" media="screen">
    <link rel="stylesheet" type="text/css" 
         href="simple-layout.css" media="print">
    <script type="text/vbscript" src="fval1.0.2.js" defer></script>
  </head>
  <body>

  .......
  </body>
</html>

将CSS和JS设为外部文件。
- 遵循此指南：外部文件有助于浏览器缓存供下次使用，并对多次访问有利。
- 打破此指南：为了避免额外的HTTP请求和加快响应速度，内联可能对主页有利。（这取决于您网站的每会话页面浏览量 - Google对主页的PV为1。）
下载一些基本的页面布局模板。（参见AllInOne.zip中的示例Template1.html .. 到 .. Template5.html）

6. 减少请求和响应大小

为什么？
- 通常，80%到90%的时间花在下载HTML和其他对象上，而10%到20%的时间花在渲染它们上，因此最小化下载时间（通过减小内容大小）是获得更好性能的关键。一种得到广泛支持的方法是压缩文本文件，如gzip。
- 大多数浏览器都能在请求中发送Accept-Encoding:gzip,deflate，服务器可以在响应中发送带有压缩数据的Content-Encoding:gzip。
- HTTP压缩通常比多个小请求对一个大请求更有效。
如何做到？
1. 压缩文本文件，例如：HTML、JAVASCRIPT、CSS文件。压缩可将大小减少高达70%。
  IIS：在IIS管理器中，双击本地计算机，右键单击“网站”文件夹>属性>服务>HTTP压缩部分
  
  请注意：您可能还需要配置Web服务扩展和元数据库。（您可以为某些文本文件（*.htm, *.css, *.js等）进行配置。）
  Apache：使用mod_gzip、mod_deflate模块配置压缩。
2. 最小化：删除空格、换行符、制表符、注释；缩短字符串、变量和字面量；删除重复脚本，尽可能使用CSS继承。
3. 减少开销
  COOKIE：每次请求都会附带Cookie来回传输。
  - 大小：最好小于100字节，小于500字节即可。
  - 仔细选择域名级别，例如：.mydomain.com 或 finance.mydomain.com
  - 仔细选择到期日期。不需要时将其删除。

7. 减少域名查找

减少域名查找：通常，2个比1个好（以利用浏览器的并行下载能力），而4个比2个差。
使用浏览器缓存也将减少域名查找。

8. 内容分发网络：(针对特定区域)

简单来说，关键在于尽可能靠近请求的源头。即：将Web服务器放置在靠近客户端浏览器的地方。
网络跳数最少的服务器是最好的，或者响应速度最快的服务器。
地理上分散的服务器将通过最小化拥塞和减少不可管理的流量来加快页面加载速度。
CDN通常托管静态内容，包括图像、嵌入式对象、视频、媒体文件和动态Web内容的广告。（例如：Yahoo!的美国用户将从http://us.i1.yimg.com/us.yimg.com/i/ww/t7/pa-icons2.gif获取图像pa-icons2.gif，而澳大利亚用户将从http://au.i1.yimg.com/us.yimg.com/i/ww/t7/pa-icons2.gif获取相同的图像。

9. AJAX

所有关于JavaScript的注意事项也适用于AJAX库。尽可能尝试利用缓存中的内容。
动态加载JavaScript库（$import()）或延迟加载。
如果可能，在显示您的内容后，从客户端加载第三方内容，而不是在服务器端获取。

10. 其他/杂项

使用服务器端包含文件更好，因为服务器会将它们缓存在内存中以便稍后更快地提供服务。
避免在CSS中使用“expression()”。
将大型开发注释/备注移到一个同名但扩展名为*.info的文件中。例如：index.info
尽可能缩短URL。如果需要绝对引用，请使用<base href="http://www.domainname.com">。
重要！：根据以下情况调整这些指南：（所有定量分析在不同环境中可能有所不同）
- 您的环境和Web结构。
- 主页与内部页面。
- 首次访问者与重复访问者。
- 高流量页面与低流量页面。
- 字节很重要：一些指南将节省字节，而另一些将节省千字节。
最后，衡量您的改进。

摘要

.HTML..........Simplify design.
  .HEAD
    .LINK......CSS file(s) required for page appearance.
    .SCRIPT....JS functions required during page load.
  .BODY
    ...........Small chunks (DIVs, TABLEs), minimize images.
    .SCRIPT....JS functions required after page load, validation etc.
    .PRELOAD...If required, Pre load any images here.

第三部分：工具

HTML验证 - 验证HTML页面以符合标准
NetMechanic, WebsiteOptimization - 网站免费分析
HTML Tidy - 可以删除前导空格和多余的空行
Gif Wizard - Web内容加速
Firebug - Firefox附加组件（用于测量最耗时的地方）
YSlow - Yahoo为Firebug开发的附加组件
IBM Page Detailer - 网络和性能分析
gzip - HTTP压缩
JLint, Rhino - JavaScript压缩
YUI Compressor - Yahoo的JavaScript最小化工具
Html Help - 检查损坏的链接
Browser Shots - 在各种浏览器（Linux、Mac、Windows）中查看您的网站

脚注

一些专家声称，如果您的主页加载时间超过8秒，将有多达三分之一的网站访客会感到沮丧并离开。我希望这些指南和示例能帮助您快速理解并应用改进到您的Web开发中。

资源和进一步阅读

历史

最后更新：2008年5月26日，星期一。