版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://timoqi.blogbus.com/logs/21014628.html

 翻译自：http://developer.yahoo.com/performance/rules.html

译者:Timo

发布格式：黑色为英文原文，红色为中文翻译

发布时间：从2008年5月16日每天1个章节，共10天

发布协议：new bsd

Exceptional Performance : Best Practices for Speeding Up Your Web Site

特别性能：加速你的WEB网站最佳实践

Minimize HTTP Requests

最小化http请求

tag: content

tag: 内容

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

80%的终端用户的相应时间花在了前端上。在页面中大部分时间被占用在下载下面这些组件上：图片,风格表，脚本，flash等等。减少这些组件的数量反过来会减少http请求的数量的提交页面。这是让页面更快的关键。

One way to reduce the number of components in the page is to simplify the page's design. But is there a way to build pages with richer content while also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.

减少页面组件的数量的一个方法是简化页面的设计。但是有没有让页面含有更多的内容同时实现快速的响应时间呢？这里有一些可以减少http请求的技术，也支持富页面设计。

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

组合文件通过组合所有脚本到单独一个脚本文件中来实现较少http请求的数量，同时简化和组合所有CSS到单独的stylesheet中。当脚本和stylesheets在页和页之间有很大改变的时候将是一个很大的挑战，但是这个部分还是会让你增加响应的时间。

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

css脚本是减少图片请求数量的首选方法。组合你的所有背景图片到单独的一个图片中，同时使用css backgroud-image和backgroud-position属性来显示需要的图片部分。

Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be tedious and error prone. Using image maps for navigation is not accessible too, so it's not recommended.

图片地图(image map)组合多个图片到一个单独的图片中。整体的大小应该差不多相同，但是减少了http请求的数量加速了页面。图片地图只能使用在当页面中的图片邻近的时候，比如导航栏。定义图象地图座标是繁琐和易出错的。 导航栏使用image map是不容易接近的，所以是不被推荐的。

Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.

内联图片(inline images)使用data: url scheme把图片内嵌到真实页面中。这个会增加HTML文档的大小。组合内联图片到样式表(stylesheets)是一种减少Http请求和避免增加页面大小的方法。内联图片并不被所有主流浏览器支持。

Reducing the number of HTTP requests in your page is the place to start. This is the most important guideline for improving performance for first time visitors. As described in Tenni Theurer's blog post Browser Cache Usage - Exposed!, 40-60% of daily visitors to your site come in with an empty cache. Making your page fast for these first time visitors is key to a better user experience.

减少http请求的数量在你的页面上只是一个开始。这个对于首次访问用户提升性能的最重要的法则。在Tenni Theurer的博客Browser Cache Usage - Exposed中描述，40％－60％的日访问者来自空的缓存。让你的页面更快速显示对于这些首次访问者的用户体验是非常关键的。