Best Practices for Speeding Up Your Web Site(3)

9、

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查询和容许一个较高并发下载之间达到一个较好的折衷。

10、

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的使用和大小的增长，代码得到的缩减量也会增长。

11、

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.

12、

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 头。