Best Practices for Speeding Up Your Web Site(1)

写在前面的一些话：

       从事IT行业，英文有时总会成为咱们的硬伤，由于一些好的资料大可能是英文的，为了跨越技术门槛，有时咱们不得不先把英文搞定，这倒不是要求咱们的英文水平有多高，要咱们都能作到能拿操着一口流利的英语去和老外对骂（哈哈），可是一些起码的理解性的障碍是咱们必定要克服的！因此对于挨踢人们来讲，咱们只好忍啦！好的技术性文章值得你们细细研读，可是语言障碍总使得咱们的理解存在误差，初次翻译，有点子费力，由于英文的语言习惯和中文的仍是有很大差异的，有时很佩服那些专一于外文翻译的工做者们。   

        Web应用的设计与开发，不管什么时候，"性能"都是不能忽略的！ Yahoo  Developer Network 上提出的35条性能优化法则，十分值得每一个Web前端工程师参考和借鉴，读罢原文后，我以为有必要把其尝试性的翻译一下，一来做为本身学习的总结，二来也是和你们分享一下。 本文花费本人一个周末的时间，文章有的地方因为我的技术水平和英文能力的限制，可能翻译后和原文的做者全部表达的意思有很多差距，并且有的地儿本身都以为过于生硬，忘你们多多指证和交流！但愿本文可以帮助到你，这对我来讲是最大的欣慰！哈哈！现把本文和你们分享一下！不过仍是建议你们读一读原文！

                 Best Practices for Speeding Up Your Web Site

           站点加速的最佳实践

    经验丰富的性能团队已经发现了许多加速网页的最好实践作法。这个清单列出了35条最佳的实践，并划分为7类。

七个分类包括：

内容（Content），服务器（Server），Cookie，样式表（CSS），Javascript， 图像（Images），移动设备（Mobile）

1、

Minimize HTTP Requests

tag: content

最小化HTTP请求（Minimize HTTP Requests）

标签：内容（content）

       80%的终端用户的时间都花费在了前端（front-end）。大多数的这些时间都花在了下载页面中的全部组件上：图片，样式表，脚本，flash，等等。减小组件的数量，反过来会减小渲染页面的所必须的HTTP请求的数量。这是网页提速的关键所在。

一个减小页面中的页面组件的办法是简化页面的设计。可是有没有办法在用丰富的内容构建页面的同时，又能得到很快的响应时间呢？ 下在这有些技术用来减小HTTP请求的数量，与此同时又支持富文本设计。

       组合文件（Combined files）是一种减小HTTP请求的方式，即经过将全部的脚本组合到单一的脚本文件中，一样的将全部的CSS样式组合到一个样式文件中。当脚本和样式在不一样的页面中变化各异时，组合文件是十分富有挑战性的，可是使这种方式成为你的到你的发布处理中会提升响应时间。

       CSS精灵（CSS Sprites）是一钟减小图像请求数量很是好的办法。将你的全部背景图像加入到同一张图片中，而后利用CSS的background-image和background-position属性来展示你想要的图像片断。

      图片maps（Image maps）将全部的图片加入到单一图片文件，图片的全部大小基本是相同的，可是这减小了HTTP请求而且加快了页面速度。Image maps只有在页面中的图片 是批次临近时才会有用，例如一个导航条。定义Image maps的坐标多是冗繁和易于出错的。对于使用Image maps的导航来讲也一样是不可访问的。因此这种办法不推荐使用。

      内联图片（inline imags）利用 data: URL scheme 来嵌入图像数据到实际的图片中。这会增长你的HTML文档中的页面量。将你的内联图片组合到样式表（可缓存的）中是一个既能够减小HTTP请求也能减小你的页面量的办法。然而内联图片 并非被全部浏览器都支持。

     减小你页面中的HTTP请求的数量是起点。对于第一次访问的访问者来讲，这是提高性能的最好的指导。正如在 Tenni Theurer的博客 Browser Cache Usage - Exposed!中所说的40%-60%的平常访问者会在没有缓存的状况下访问你的站点。对于这些初次访问者，确保你的页面速度，是更佳用户体验的关键。

2、

Use a Content Delivery Network

tag: server

使用内容发布网络

标签：服务器

      用户到你的服务器的距离远近对于响应时间来讲有重大的影响。多重部署你的内容，从用户角度来讲，地理上分散的服务器会使你的页面加载速度更快。可是你如何开始呢？

       对于实现地理上分布内容的第一步来讲，不要试图从新设计你的web应用以使其可以工做在分布式的架构中。根据你的应用，改变架构云会包括使人生畏的任务，如跨服务器地点的同步session状态，复制数据库事务。尝试缩短用户和你的内容服务器的距离可能会被应用自己的架构步骤所耽误。

       记住80-90%的终端用户的响应时间都花费在了下载页面中的全部组件上了，包括：图像，样式表，脚本，flash等等。这是“性能的黄金法则”。与其十分困难的开始从新设计应用架构，倒不如分散你的静态内容（static content）。这不但得到了更短的响应时间，并且还由于分布网络而变得更加容易。

        一个内容分布网（Content Delivery Network）CDN是一个跨多地点更加高效分发内容到用户的分布式web服务器的集合。分发内容到具体用户的服务器，一般是依据网络距离的测量来选择的。例若有更少网络跳数的服务器，或者响应时间最快的服务器会被选中。

         一些大型的网络公司会拥有本身的CDN，可是使用CDN服务提供商提供的服务会划算，例如： Akamai Technologies, EdgeCast, 或者 level3。对于起步公司和私营站点来讲，CDN服务的这部分花销可能会去掉。可是随着目标用户的增加和国家化加速，一个CDN对于得到更快的响应速度来讲是十分必要的。在雅虎，将静态内容与应用所在的web服务器分隔并移动到 CDN上，缩短了20%或者更多的用户响应时间。转换到CDN在编码改变上会变得容易些而且显著的提升了你的站点速度。

3、

Add an Expires or a Cache-Control Header

tag: server

添加一个 Expires 或者一个 Cache-Control 头部信息

内容：服务器

这条原则包括两方面：

    对于静态组件：经过设置将来的Expires 信息头来实现 "Never expire"策略

    对于动态组件：经过合理的使用Cache-Control 头来帮助浏览器有选择性的请求。

Web页面的设计变得愈来愈丰富，这意味着更多的脚本，样式表，图片和flash会出如今页面中。初次访问站点的用户可能不得不发送屡次HTTP请求，可是经过使用Expires头，你可使得这些组件成为可缓存的（Cacheable）。这避免了以后页面展现总的没必要要的请求。Expires头多数用于图片上，可是它应该被用在全部的组件上，包括脚本，样式表，以及Flash。

    

        浏览器（和代理）里用缓存机制来减小以后页面展现中HTTP请求的数量和大小。一个Web服务器使用一个包含Expires头的响应来通知客户端一个组件能够被缓存多长时间。下面是一个Expires头信息，通知浏览器该响应内容直到2010年4月15日才会失效

    Expires: Thu, 15 Apr 2010 20:00:00 GMT

    

        若是你的服务器是Apache，使用ExpiresDefault 指令来设置一个相对当前时间的失效时间。

 

            ExpiresDefault "access plus 10 years"

        记住若是你使用Expires，你不得不改变组件的文件名称，只要组件发生变化。在雅虎，咱们常常使这些成为构建进程的一部分：一个版本号会被嵌入到组件的文件名中，例如： yahoo_2.0.6.js。

        只有在一个用户访问过你的站点后,才能使用Expires头来影响页面的视图。对于初次访问你站点的用户，以及那些用户浏览器缓存是空白用户，这个办法对于以上两种状况下发出的HTTP请求的数量是没有任何影响的。因此这条性能提高的影响取决于你的用户在一个“待发缓存“（待发缓存中已经包含了页面中的全部组件）下访问你站点的频率。咱们在雅虎上进行了 测试，而且发如今75%-80%的状况下用户会在有组件缓存的状况下访问站点。经过利用Expires 你能够增长被浏览器缓存的组件数量，而且在以后的页面视图中，在没有经过用户网络链接发送任何一个字节的状况下，继续重用这些组件。