这是一篇关于 <u>如何加快网站访问速度</u> 的译文，原文出自 雅虎开发者网站，原标题为 Best Practices for Speeding Up Your Web Site。
以下为译文：
加速网站访问的最佳实践
卓越的绩效团队已经确定了一些使网页快速的最佳做法。该清单包括分为7个类别的35个最佳做法。
Content
- 最小化 HTTP 请求
最终用户响应时间的80％用于前端。大部分时间都是下载页面中的所有组件：图像，样式表，脚本，Flash等。减少组件数量又减少了呈现页面所需的HTTP请求数量。这是更快页面的关键。
减少页面中组件数量的一种方法是简化页面的设计。但是，有没有办法构建更丰富内容的页面，同时也能实现快速的响应时间？以下是减少HTTP请求数量的一些技术，同时仍然支持丰富的页面设计。
组合文件 是通过将所有脚本组合到单个脚本中以及将所有CSS组合到单个样式表中的方式来减少HTTP请求的数量。当脚本和样式表从页到页不同时，组合文件更具挑战性，但使这部分版本过程能够改善响应时间。
CSS Sprites是减少图像请求数量的首选方法。将您的背景图像合并为一个图像，并使用CSS background-image和background-position 属性来显示所需的图像段。
图像映像将多个图像组合成单个图像。总体大小大致相同，但减少HTTP请求数量会加快页面速度。如果图像在页面中是连续的，则图像映射只能工作，例如导航栏。定义图像映射的坐标可能很繁琐，容易出错。
使用导航图像映射也不可访问，因此不推荐使用。
内联图像 使用data:URL方案将图像数据嵌入到实际页面中。这可以增加HTML文档的大小。将内联图像组合到（缓存）样式表中是减少HTTP请求并避免增加页面大小的一种方法。所有主流浏览器都不支持内联图片。
减少页面中HTTP请求的数量是开始的地方。这是提高首次访问者效能的最重要的指导方针。如Tenni Theurer的博客文章中所述浏览器缓存使用 - 暴露！，您网站的每日访问者中有40-60％的空白缓存。
使您的页面快速为这些第一次访问者是更好的用户体验的关键。
-
减少DNS查询
域名系统（DNS）将主机名映射到IP地址，就像电话簿将人员姓名映射到他们的电话号码一样。当您在浏览器中输入www.yahoo.com时，浏览器联系的DNS解析器会返回该服务器的IP地址。DNS有一个成本。DNS通常需要20-120毫秒来查找给定主机名的IP地址。在完成DNS查找之前，浏览器无法从此主机名下载任何内容。
缓存DNS查找以获得更好的性能。这种缓存可以在由用户的ISP或局域网维护的特殊缓存服务器上发生，但是也存在在个人用户的计算机上发生的缓存。DNS信息保留在操作系统的DNS缓存（Microsoft Windows中的“DNS客户端服务”）中。大多数浏览器都有自己的缓存，与操作系统的缓存分开。只要浏览器将DNS记录保存在自己的缓存中，就不会对操作系统造成记录请求的麻烦。
默认情况下，Internet Explorer会缓存DNS查找30分钟，由 DnsCacheTimeout注册表设置指定。Firefox缓存DNS查找1分钟，由network.dnsCacheExpiration配置设置控制。（Fasterfox将其更改为1小时。）
当客户端的DNS缓存为空（对于浏览器和操作系统）时，DNS查找的数量等于网页中唯一主机名的数量。这包括在页面的URL，图像，脚本文件，样式表，Flash对象等中使用的主机名。减少唯一主机名的数量减少了DNS查找的数量。
减少唯一主机名的数量有可能减少页面中发生的并行下载量。避免DNS查找减少响应时间，但减少并行下载可能会增加响应时间。我的准则是将这些组件分成至少两个但不超过四个主机名。这导致减少DNS查找并允许高度并行下载之间的良好折中。 -
避免重定向
使用301和302状态代码完成重定向。以下是301响应中HTTP头的示例：
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
浏览器自动将用户带到该Location字段中指定的URL。重定向所需的所有信息都在头文件中。响应的身体通常是空的。尽管他们的名字，在实践中也不会缓存301和302的响应，除非额外的标题，例如 Expires或者Cache-Control表明它应该是。元刷新标签和JavaScript是将用户引导到其他URL的其他方法，但如果必须执行重定向，首选技术是使用标准的3xx HTTP状态代码，主要是为了确保后退按钮正常工作。
要记住的是重定向会减慢用户体验。在用户和HTML文档之间插入重定向会延迟页面中的所有内容，因为页面中的任何内容都不能被渲染，并且在HTML文档到达之前不会开始下载任何组件。
最浪费的重定向之一是频繁发生的，Web开发人员通常不会意识到这一点。当URL中缺少尾部斜线（/）时，会发生这种情况，否则应该有一个。
例如，去 http://astrology.yahoo.com/astrology 得到一个包含重定向到 http://astrology.yahoo.com/astrology/ （注意添加的尾部斜杠）的301响应。如果您使用Apache处理程序，则使用Aliasormod_rewriteor DirectorySlash指令在Apache中进行修复。
将旧网站连接到新的网站是重定向的另一个常见用途。其他包括连接网站的不同部分，并根据某些条件（浏览器类型，用户帐户类型等）指导用户。使用重定向连接两个网站很简单，只需要很少的附加编码。尽管在这些情况下使用重定向会降低开发人员的复杂性，但会降低用户体验。这种使用重定向的替代方案包括使用Alias和mod_rewrite如果两个代码路径托管在同一台服务器上。如果域名变化是使用重定向的原因，一种替代方法是创建一个CNAME与组合（即建立了一个从域名指向另一个别名DNS记录）Alias或mod_rewrite。
- 使用 Ajax Cacheable
Ajax的一个引人注意的好处是它为用户提供即时反馈，因为它从后端Web服务器异步请求信息。但是，使用Ajax不能保证用户不会等待他们等待异步JavaScript和XML响应返回的大拇指。在许多应用中，用户是否保持等待取决于Ajax的使用方式。例如，在基于Web的电子邮件客户端中，用户将不断等待Ajax请求的结果来查找与其搜索条件匹配的所有电子邮件。重要的是要记住，“异步”并不意味着“瞬时”。
为了提高性能，重要的是优化这些Ajax响应。提高Ajax性能的最重要的方法是使响应可缓存，如添加到期或缓存控制头。
一些其他规则也适用于Ajax：
- Gzip组件
- 减少DNS查找
- 缩小JavaScript
- 避免重定向
- 配置ETag
我们来看一个例子。
Web 2.0电子邮件客户端可能会使用Ajax下载用户的自动完成地址簿。
如果用户上次使用电子邮件网络应用程序后用户没有修改她的地址簿，如果Ajax响应可以使用未来的Expires或Cache-Control标头进行缓存，则可以从缓存读取以前的地址簿响应。必须通知浏览器何时使用先前缓存的地址簿响应，而不是请求新的地址簿响应。这可以通过向地址簿Ajax URL添加一个时间戳来表示，例如，用户最后一次修改她的地址簿&t=1190241612。如果地址簿自上次下载以来没有被修改，则时间戳将是相同的，并且地址簿将从浏览器的缓存中读取，从而消除额外的HTTP往返。
即使您的Ajax响应是动态创建的，并且可能仅适用于单个用户，但仍可缓存它们。这样做会使您的Web 2.0应用程序更快。
- 后负载组件
你可以仔细看看你的页面，问问自己：“为了最初渲染页面绝对需要什么？” 其余的内容和组件可以等待。
JavaScript是在onload事件之前和之后拆分的理想候选者。
例如，如果您有JavaScript代码和库进行拖放和动画，那么可以等待，因为在初始呈现之后拖动页面上的元素。
其他寻找候选人进行后期加载的地方包括隐藏的内容（用户操作后出现的内容）以及下方的图像。
帮助您解决问题的工具：YUI Image Loader允许您将图像延迟到折叠位置，YUI Get实用程序是一个简单的方法，可以即时包括JS和CSS。举个例子，在野外看看
Yahoo!主页与Firebug的网络面板打开了。
当性能目标与其他Web开发最佳实践相一致时，这是很好的。
在这种情况下，渐进增强的想法告诉我们，当JavaScript被支持时，可以改善用户体验，但是您必须确保页面的工作即使没有JavaScript。
所以在确定页面工作正常之后，您可以使用一些后加载脚本来增强它，从而为您提供更多铃声和口哨，如拖放和动画。
- 预加载组件
预加载可能看起来与后期加载相反，但实际上具有不同的目标。通过预加载组件，您可以利用浏览器空闲的时间，并请求将来需要的组件（如图像，样式和脚本）。这样当用户访问下一页时，您可以将大部分组件放在缓存中，并且您的页面将为用户加载更快。
实际上有几种类型的预加载：
- 无条件预 加载 - 一旦加载启动，您就可以继续提取一些额外的组件。
检查google.com，了解如何请求一个精灵图像的加载。
这个精灵图片不需要在google.com主页上，但在连续的搜索结果页面上是需要的。 - 有条件的预加载 - 基于用户操作，您做出有根据的猜测，用户在哪里下一步，并相应地预加载。在search.yahoo.com上，您可以看到在输入框中输入后，如何请求一些额外的组件。
- 预计预加载 - 在启动重新设计之前提前预加载。
经常重新设计后，您会发现：“新网站很酷，但比以前更慢”。
问题的一部分可能是用户正在使用完整缓存访问您的旧站点，但新的站点始终是空缓存体验。您可以在启动重新设计之前预先加载某些组件来减轻这种副作用。您的旧网站可以使用浏览器空闲的时间，并请求新网站将使用的图像和脚本
- 减少DOM元素的数量
复杂的页面意味着更多的字节下载，也意味着JavaScript中的DOM访问速度较慢。如果您想要添加事件处理程序，例如，如果循环访问500或5000个页面上的DOM元素，这将有所作为。
大量的DOM元素可能是一些症状，应该使用页面的标记进行改进，而不必删除内容。您是否使用嵌套表进行布局？你是否<div>只投入更多的东西来解决布局问题？也许有更好的和更语义上正确的方式来做你的标记。
对于布局来说，很大的帮助是YUI CSS实用程序：grids.css可以帮助您整体布局，fonts.css和reset.css可以帮助您剥离浏览器的默认格式。这是一个机会，开始新鲜和思考你的标记，例如，<div>只有当它有意义的语义，而不是因为它呈现一个新的行。
DOM元素的数量很容易测试，只需输入Firebug的控制台：
document.getElementsByTagName('*').length
DOM元素有多少？检查其他具有良好标记的类似页面。例如，Yahoo!主页是一个非常繁忙的页面，仍然低于700个元素（HTML标签）。
- 分割跨域的组件
分割组件允许您最大程度地并行下载。由于DNS查询损失，请确保您使用的不超过2-4个域。例如，您可以承载你的HTML和动态内容www.example.org之间分裂静电元件static1.example.org和static2.example.org
有关更多信息，请参阅Tenni Theurer和Patty Chi的“最大化拼车车道中的并行下载 ”。
- 最小化iframe的数量
iframe允许在父文档中插入一个HTML文档。了解iframe的工作原理，以便有效的使用非常重要。
-
<iframe> 优点：
帮助缓慢的第三方内容，如徽章和广告
安全沙箱
并行下载脚本 -
<iframe> 缺点：
成本高，即使空白
阻止页面加载
非语义
- 没有404s
HTTP请求是昂贵的，所以发出HTTP请求并获得无用的响应（即404 Not Found）是完全不必要的，并且会减慢用户体验，没有任何好处。
一些网站有帮助404s“你的意思是X？”，这对用户体验非常好，但也会浪费服务器资源（如数据库等）。特别糟糕的是当链接到外部JavaScript是错误的，结果是404.首先，这个下载将阻止并行下载。接下来，浏览器可能会尝试解析404响应体，就像它是JavaScript代码，试图找到可用的东西。
网友评论