Best Practices for Speeding Up Your Web Site(3)

九、

Reduce DNS Lookups

tag: content

减少DNS查询

标签：内容

        域名系统（DNS）建立主机名到IP地址的映射，就像电话簿映射人名到其电话号码一样。当你键入www.yahoo.com到你的浏览器（地址栏）中，浏览器所连接到的DNS解析器会返回服务器的IP地址。DNS也会有开销。DNS大概会花费20-120毫秒的时间为给定的主机名查询IP地址。浏览器不能从这个域名中下载任何东西，直到DNS查询完全结束。

        DNS会缓存结果以为了更好性能。这个缓存可能存在于一个特殊的缓存服务器，该服务器由用户的ISP提供商或者局域网来维护，但是在用户的个人PC机中也会存在缓存的发生。DNS信息会保存在操作系统中的DNS缓存中（DNS Client Service on Microsoft Windows）。大多数的浏览器有自己的缓存，独立于操作系统中的缓存。只要浏览器在自己的缓存中保存DNS记录，就不会向操作系统发送记录请求了。

        默认情况下IE将DNS查询结果缓存30分钟，这是在DnsCacheTimeout注册设置中规定的。FIrefox会将DNS查询结果缓存1分钟，这可以通过network.dnsCacheExpiration配置进行控制。（Fasterfox 将时间改为1个小时）

        当客户端的缓存是空白（对于浏览器缓存和操作系统缓存）时，DNS查询的（请求）数量等同于在web页面中包含的唯一主机名称的数量。这些包含网页URL，图片，脚本，样式表，Flash对象等等所用到的主机名称。减少唯一的主机名称会减少DNS的查询数量。

         减少唯一主机名的数量，会潜在的减少网页中的并发下载数量。避免DNS查询缩短了响应时间，但是减少并发下载会增加响应时间。我的指导是将这些组件分隔在大于2个但小于4个的主机名称中。这会在减少DNS查询和允许一个较高并发下载之间达到一个较好的折衷。

十、

Minify JavaScript and CSS

tag: javascript, css

缩减Javascript和CSS

标签：Javascript，css

        缩减操作指的是移除代码中不必要的字符来缩小体积进而改善加载时间的操作。代码缩减后，所有的注释将被移除，不必要的空白字符（space, newline, and tab）将被移除。对于Javascript来说，这改善了响应时间效果，因为所下载的文件大小缩减了。两个比较流行的Javascript代码缩减工具是 JSMin和 YUI Compressor，

YUI Compressor同样也能缩减CSS代码。 

        除了可以减小外部的脚本和样式外，内联的<script>和<style>块也能够并且应该被减小。尽管你可以压缩（gzip）你的脚本和样式，但是减小它们仍就能缩减5%甚至更多的大小。随着你的Javascript和CSS的使用和大小的增加，代码获得的缩减量也会增加。

十一、

Avoid Redirects

tag: content

避免重定向

标签：内容

        重定向可以通过使用状态码301和302完成。以下是一个包含301的HTTP响应头的例子：

        HTTP/1.1 301 Moved Permanently

        Location: http://example.com/newuri

        Content-Type: text/html

        浏览器会自动将用户带到Location所指明的URL中去。所有重定向所需的信息都在头部。响应体通常是空的。不管它们的名字是什么，不论是301还是302响应，在实际中都不会被缓存，除了包含额外的头信息，例如Expires or Cache-Control，来指示它们将被缓存。meta标签的refresh和Javascript是其它可以将用户引向不同链接的方法，但是如果你必须要做一个重定向时，优先选择的技术是利用标准的3xx HTTP状态码，主要是保证后退按钮能正常工作。

        主要要记住的是重定向会降低用户体验。在用户和HTML文档之间插入一个重定向，会延迟页面中的所有东西，因为页面中的任何东西都不会被渲染并且任何组件都不会被立即下载，直到HTML文档到来。

        其中一个最浪费的重定向经常发生并且开发者们多数不会注意到它。它发生在一个在URL中本来应该存在的反斜杠（/）被丢失的情况下。例如：访问 http://astrology.yahoo.com/astrology 导致一个包含301响应的重定向到http://astrology.yahoo.com/astrology/ （请注意尾部增加的反斜杠）如果你使用Apache handler，这可以通过使用Alias或者mod_rewrite进行修复，或者用DirectorySlash 指令。

        连接一个老的站点到一个新的站点是重定向的另一个比较普遍的用处。其它的用处是连接站点的不同部分或者基于特定条件(浏览器的类型,用户账户的类型,等等 etc.)来引导用户。使用重定向来连接两个站点是简单的并且只需要很少的额外代码。虽然在这些情况下利用重定向会减轻开发者的开发复杂度，但是却使用户体验降低了。如果你的两条代码路线都在同一台服务器上提供，那么可以使用Alias 和 mod_rewrite来替代以上方法。如果是域名变换引起的重定向，一个可选的办法是创建一个CNAME（一个DNS记录，用来创建一个别名从指向一个域名到另一个域名）来联合Alias 或者 mod_rewrite.

十二、

Remove Duplicate Scripts

tag: javascript

删除重复的脚本

标签：Javascript

        在一个页面中两次包含相同的脚本会影响性能。这不会像你想象的那样常见。一个对美国前十名网站的评审显示其中两个站点都包含了重复的脚本。在一个单文档中引发重复脚本机率增加的两个主要因素是：团队的大小和脚本的数量。当重复脚本的情况确实发生时，它会通过创建不必要的HTTP请求和浪费掉的Javascript的执行来影响性能。

        

        不必要的HTTP请求发生在IE中，在Firefox中却不会发生。在IE中，如果一个外部的脚本文件被包含两次并且没有被缓存，在页面的加载过程中会产生两次的HTTP请求。尽管脚本是可缓存的，但是当用户重新加载页面时额外的HTTP请求又会产生。

        

        除了产生浪费掉的HTTP请求外，时间也会由于多次解析脚本而被浪费掉。这些多余的脚本执行操作在IE和Firefox中都会存在，无论你的脚本是不是可缓存的。

 

         一个解决偶尔发生的包含两次相同脚本的办法是在你的模板系统中实现脚本管理模块。典型的方式是在你的HTML页面中，在script标签包含你要使用的脚本。

         <script type="text/javascript" src="menu_1.0.17.js"></script>

    在PHP中的可选办法是创建一个叫做insertScript的函数。

       

        <?php insertScript("menu.js") ?>

         除了防止相同脚本在同一页面中插入多次，这个函数能处理其它的脚本问题，例如依赖检测和增加脚本文件名版本号来支持未来的Expires 头。