HTTP请求数最小化

译者：milan
终端用户80%的响应时间花在前台。这些时间的大部分是被下载页面上所有组件所占用，像：图片，格式，脚本，Flash等等。依次减少这些组件的数量可以减少页面相关HTTP的请求数。这是使页面更快的关键。
减少页面组件数的一种方法是简化页面的设计。但是有没有一种使页面内容更丰富的同时又能达到较快响应时间的方法呢？这里有一些技术可以减少HTTP的请求数，同时仍支持丰富的页面设计。
合并文档是一种通过合并所有脚本为一个脚本，合并所有的CSS为一种格式来减少HTTP请求数的方法。当脚本和格式随页面不同而变化时，合并文档将变得更加有难度，但是在发布过程中这么做可以提高响应时间。
用CSS精灵来减少图片请求是个比较好的方法。合并背景图片为一种图片，使用CSS背景图片及背景位置属性来显示想要的图片段。
图片映射合并多张图片为单张图片。总尺寸虽然差不多，但是减少了HTTP请求数从而使页面访问速度加快。 只有页面中的图片连续时，图片映射才工作，比如导航栏。定义图片映射的坐标会导致错误。用图片映射做导入也不易理解，所以不推荐这么做。
内联图片使用URL镶嵌图片，这在实际页面中会增加HTML文件的大小。在格式中合并内联图片是一种减少HTTP请求数和避免增加页面大小的方法。目前并不是所有的主流浏览器都支持内联图片。
对第一次访问来说，在页面中减少HTTP请求数，这是提高性能最重要的准则。就象Tenni Theurer博客的帖子—《浏览器缓存用处的揭露》描述的，网站每天40-60%的访问是无缓存的。对于第一次访问的用户来说，加快页面访问速度是让用户得到更好体验的关键。
Minimize HTTP Requests

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.

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.

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.

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.

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.

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.

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.