网站内容更新表(网站所用中的ETag格式为Filetimestamp:ChangeNumber的机制相似)

　　网站内容更新表(网站所用中的ETag格式为Filetimestamp:ChangeNumber的机制相似)

　　ETag 的问题在于它是从标识 网站 所在服务器的唯一属性生成的。ETag 不匹配发生在浏览器从一台服务器获取页面内容并在另一台服务器上对其进行验证时，这对于 网站 使用服务器组和处理请求非常常见。默认情况下，Apache 和 IIS 都将数据嵌入到 ETags 中，这大大减少了跨多个服务器的文件验证冲突。

　　Apache 1.3 和 2.x 中的 ETag 格式是 inode-size-timestamp。即使一个文件在不同服务器上的同一个目录下，文件大小、权限、时间戳等都是一样的，但在不同的服务器上它们的内部代码是不同的。

　　IIS 5.0 和 IIS 6.0 以类似方式处理 ETag。IIS 中的 ETag 格式为 Filetimestamp:ChangeNumber。使用 ChangeNumber 跟踪 IIS 配置更改。网站ChangeNumber 因使用的不同 IIS 服务器而异。不同服务器上的 Apache 和 IIS 即使是完全相同的内容也会生成不同的 ETag，用户不会收到小而快的 304 响应；相反，他们将收到正常的 200 响应并下载整个内容。如果您的 网站 仅在一台服务器上，则不会存在此问题。但是如果你的 网站 设置在多台服务器上，并且使用 Apache 和 IIS 生成默认的 ETag 配置，你的用户获取页面会比较慢，服务器会传输更多的内容，占用更多的带宽，代理不会有效地缓存您的 网站 内容。

　　如果您不使用 ETags 提供的灵活验证模式，最好简单地删除所有 ETags。Last-Modified 标头验证基于内容的时间戳。删除 ETag 标头将减小响应和下一个请求中文件的大小。Microsoft 的此支持文档描述了如何删除 ETag。在 Apache 中，只需将以下代码行添加到配置文件中：

　　FileET 无标签

　　15、 尽早刷新输出缓冲区

　　当用户请求一个页面时，在后台组织 HTML 文件需要 200 到 500 毫秒。在此期间，浏览器将保持空闲等待数据返回。在 PHP 中，可以使用 flush() 方法，它允许你先将编译好的部分 HTML 响应文件发送到浏览器，然后浏览器可以下载文件的内容（脚本等），而后台处理剩余的HTML 页面。当背景烦人或前台空闲时，这样的效果会更加明显。

　　关于输出缓冲应用程序的最好的事情之一是遵循

　　...

　　为了展示使用这项技术的好处，Yahoo! 搜索开创了研究并完成了用户测试。

　　16、使用GET完成AJAX请求

　　雅虎！Mail 团队发现，在使用 XMLHttpRequest 时，浏览器中的 POST 方法是一个“两步”过程：先发送标头，然后发送数据。所以使用 GET 是最合适的，因为它只需要发送一个 TCP 数据包（除非你有很多 cookie）。IE中一个URL的最大长度是2K，所以如果要发送超过2K的数据，就不能使用GET。

　　一个有趣的区别是 POST 实际上并不像 GET 那样发送数据。根据 HTTP 规范，GET 表示“获取”数据，因此在获取数据时使用 GET 更有意义（在语义上），反之，在服务器上发送和保存数据时使用 POST。

　　17、将样式表放在顶部

　　在研究 Yahoo! 的性能时，我们发现将样式表放入文档中似乎可以加快页面下载速度。这是因为将样式表放在里面会导致页面逐步加载和显示。

　　注重性能的前端服务器通常希望页面以有序的方式加载。同时，我们也希望浏览器尽可能多地显示接收到的内容。这对于内容较多的页面和网速较慢的用户尤其重要。向用户返回视觉反馈（例如流程指针）已经过充分研究并正式记录在案。在我们的研究中，HTML 页面是进程指针。当浏览器有序加载文件头时，导航栏、顶部的logo等可以作为等待页面加载的用户的视觉反馈。这改善了整体的用户体验。

　　将样式表放在文档底部的问题在于，在包括 Internet Explorer 在内的许多浏览器中，它会破坏内容的有序呈现。浏览器中止渲染以避免因样式更改导致的页面元素重绘。用户必须面对一个空白页面。

　　HTML 规范明确指出样式表要收录在页面区域内：“与不同的是，它只能出现在文档区域内，尽管它可能会被多次使用”。导致白屏或无样式内容都不值得尝试。最好的解决方案是根据 HTML 规范在文档中加载样式表。

　　18、避免使用CSS表达式（Expression）

　　CSS 表达式是动态设置 CSS 属性的一种强大（但危险）的方法。Internet Explorer 从版本 5 开始支持 CSS 表达式。在以下示例中，可以使用 CSS 表达式每隔一小时切换一次背景颜色：

　　背景颜色：表达式（（新日期（））.getHours（）%2？“#B8D4FF”：“#F08A00”）；

　　如上所示，表达式中使用了 JavaScript 表达式。CSS 属性是根据评估 JavaScript 表达式的结果设置的。表达式方法在其他浏览器中不起作用，因此在跨浏览器设计中为Internet Explorer单独设置它是有用的。

　　表达式的问题在于，它们的求值频率比我们想象的要高。不仅在页面显示和缩放的时候，在页面滚动的时候，甚至在鼠标移动的时候。向 CSS 表达式添加计数器可以跟踪表达式的计算频率。只需在页面上移动鼠标即可轻松实现10000次以上的计算。

　　减少 CSS 表达式求值次数的一种方法是使用一次性表达式，在第一次运行时将结果分配给指定的样式属性，并用该属性替换 CSS 表达式。如果必须在页面循环期间动态更改样式属性，则使用事件处理程序而不是 CSS 表达式是一个可行的解决方案。如果您必须使用 CSS 表达式，请记住它们会被评估数千次，并且会对您的页面产生性能影响。

　　19、使用外部JavaScript和CSS

　　许多性能规则都是关于如何处理外部文件的。但是，在您采取这些步骤之前，您可能会问一个更基本的问题：JavaScript 和 CSS 应该放在外部文件中还是页面本身中？

　　在实践中使用外部文件可以提高页面速度，因为 JavaScript 和 CSS 文件都缓存在浏览器中。内置在 HTML 文档中的 JavaScript 和 CSS 会在每次请求时与 HTML 文档一起重新下载。这减少了 HTTP 请求的数量，但增加了 HTML 文档的大小。另一方面，如果外部文件中的 JavaScript 和 CSS 被浏览器缓存，则可以在不增加 HTTP 请求数的情况下减小 HTML 文档的大小。

　　关键是外部 JavaScript 和 CSS 文件被缓存的频率与 HTML 文档被请求的次数有关。虽然有一定的难度，但还是有一些指标可以衡量的。如果用户在一个会话中浏览 网站 中的多个页面，并且在这些页面中重复使用相同的脚本和样式表，那么缓存外部文件会更加有益。

　　许多 网站 没有构建这些指标的功能。对于这些 网站，最好的方法是引用 JavaScript 和 CSS 作为外部文件。使用内置代码的一个很好的例外是 网站 的主页，例如 Yahoo! 主页和我的 Yahoo!。主页在会话中的浏览量较少（可能只有一次），您可能会发现内置的 JavaScript 和 CSS 加快了最终用户的响应时间。

　　对于具有高页面浏览量的主页，有一种技术可以平衡内置代码减少的 HTTP 请求和通过使用外部文件进行缓存的好处。其中之一是在主页中内置了 JavaScript 和 CSS，但是在页面下载后动态下载外部文件，当这些文件用于子页面时，它们已经缓存在浏览器中。

　　20、切割JavaScript和CSS

　　细化是指通过从代码中删除不必要的字符来减少文件大小以节省下载时间。减少代码时，应删除所有注释、不必要的空白字符（空格、换行符、制表符缩进）等。在 JavaScript 中，响应时间被节省了，因为要下载的文件的大小减小了。用于简化 JavaScript 的两个最广泛使用的工具是 JSMin 和 YUI Compressor。YUI Compressor 也可用于剥离 CSS。

　　混淆是另一种可用于源代码优化的方法。这种方法比精益方法稍微复杂一些，并且在混淆过程中更容易出现问题。在对美国前 10 名 网站 的调查中发现，简化还可以将原创代码的大小减少 21%，而混淆可以达到 25%。虽然混淆可以更好地减少代码，但它对 JavaScript 的风险较小。

　　除了消除外部脚本和样式表文件之外，

　　这可以通过创建一个名为 insertScript 的方法在 PHP 中替换：

　　为了防止多次重复引用脚本，该方法还应该使用其他机制来处理脚本，例如检查所属目录并在脚本文件名中添加版本号以用于Expire文件头。

　　25、减少DOM访问

　　使用 JavaScript 访问 DOM 元素很慢，因此要获取更多页面，您应该这样做：

　　缓存已经访问过的相关元素

　　离线更新节点添加到文档树后

　　避免使用 JavaScript 修改页面布局

　　在 YUI 主题中查看 Julien Lecomte 的 文章“高性能 Ajax 应用程序”以获取更多信息。

　　26、开发智能事件处理程序

　　有时我们会觉得页面很慢，因为有太多的事件处理程序附加到 DOM 树元素并且这些事件被频繁触发。这就是为什么使用事件委托是个好主意。如果一个 div 中有 10 个按钮，则只需将事件处理程序附加到 div 一次，而不是为每个按钮添加一个处理程序。您可以在事件冒泡时捕获它并找出发出了哪个事件。

　　您也不必等待 onload 事件发生来操作 DOM 树。您需要做的就是等待要在树结构中访问的元素出现。您也不必等待所有图像加载。

　　您可能希望使用 DOMContentLoaded 事件而不是 onload，但在所有浏览器都支持之前，您可以在 YUI 事件应用程序中使用 onAvailable 方法。

　　27、减小cookie大小

　　HTTP cookie 可用于多种用途，例如授权验证和个性化身份。cookie 中的信息通过 HTTP 标头在 Web 服务器和浏览器之间进行通信。因此，保持 cookie 尽可能小以减少用户的响应时间非常重要。

　　有关更多信息，请查看 Tenni Theurer 和 Patty Chi 的 文章“当 Cookie 崩溃时”。这些研究主要包括：

　　删除不必要的 cookie

　　保持cookie大小尽可能小，以减少对用户响应的影响

　　小心在自适应级别域上设置 cookie，以免影响子域

　　设置合理的过期时间。提前到期且不过早清除 cookie 将改善用户响应时间。

　　28、页面内容使用非coockie域名

　　当浏览器请求静态图像并在请求中发送 cookie 时，服务器不会使用任何这些 cookie。因此，它们只是由于某些负面因素而创建的网络传输。您应该确保对静态内容的请求是无 cookie 请求。创建一个子域并使用它来托管所有静态内容。

　　如果你的域名是，你可以有静态内容。但是，如果您将 coockie 设置为不在顶级域上而是在顶级域上，则所有请求都收录该 coockie。在这种情况下，您可以重新购买一个新域名来保存静态内容并保持其无 cookie。雅虎！使用它，YouTube 使用它，亚马逊使用它，等等。

　　对静态内容使用无 Cookie 域名的另一个好处是某些代理（服务器）可能拒绝缓存对 Cookie 内容的请求。一个相关的建议是，如果你想决定是使用还是作为你的主页，你需要考虑 coockies 的影响。忽略 www 会让你别无选择，只能将 coockie 设置为 *。子域并在其上设置 cookie。

　　29、优化图片

　　设计师完成页面设计后，不要急于将它们上传到Web服务器，这里还有一些事情要做：

　　您可以检查 GIF 中的图像颜色数量是否与调色板规范相匹配。在 imagemagick 中使用以下命令行很容易检查：

　　识别 -verbose image.gif

　　如果你发现图片中只使用了4种颜色，调色板中显示了256种颜色的色槽，那么这张图片还有压缩的空间。

　　尝试将 GIF 格式转换为 PNG 格式，看看是否节省空间。大多数情况下是可压缩的。由于浏览器支持有限，设计人员通常不愿意使用 PNG 图像，但这已成为过去。真彩色 PNG 格式的 alpha 通道的半透明只有一个问题，但同样，GIF 不是真彩色格式，不支持半透明。那么GIF可以做什么，PNG（PNG8）也可以（*敏*感*词*除外）。这个简单的命令可以安全地将GIF转换为PNG：

　　转换 image.gif 图像.png

　　“我们要说的是：给 PNG 一个大放异彩的机会！”

　　在所有 PNG 图像上运行 pngcrush（或其他 PNG 优化器）。例如：

　　pngcrush image.png -rem alla -reduce -brute result.png

　　在所有 JPEG 图像上运行 jpegtran。这个工具可以对图片中出现的锯齿进行无损操作，也可以用来优化和去除图片中的评论等无用信息（如EXIF信息）：

　　jpegtran -copy none -optimize -perfect src.jpg dest.jpg

　　30、优化的CSS Spirite

　　在 Spirit 中水平排列图像，垂直排列会略微增加文件大小；

　　在 Spirite 中，将颜色与更接近的颜色组合可以减少颜色的数量。理想的情况是少于 256 色才能使用 PNG8 格式；

　　为了便于移动，不要在精灵的图像中间留出很大的空隙。这不会使文件大小增加太多，但它需要更少的内存供用户代理将图像解压缩为像素图。100x100 的图像是 10,000 像素，1000x1000 是 100 万像素。

　　31、不要在 HTML 中缩放图像

　　不要使用比实际需要更大的图像来设置 HTML 中的长度和宽度。如果你需要：

　　

　　那么您的图像 (mycat.jpg) 应该是 100x100 像素，而不是 500x500 像素的图像。

　　32、favicon.ico 小且可缓存

　　favicon.ico 是位于服务器根目录中的图像文件。它必须在那里，因为即使您不关心它是否有用，浏览器也会请求它，因此最好不要返回 404 Not Found 响应。由于它在同一台服务器上，因此每次请求时都会发送 cookie。这个图像文件也会影响下载顺序，例如在 IE 中，当您在 onload 中请求附加文件时，会在加载附加内容之前下载 favicon。

　　所以，为了减少favicon.ico带来的弊端，做：

　　文件尽量小，最好小于1K

　　在适当的时候（也就是说，当您不打算再次更改 favicon.ico 时，因为更改新文件时无法重命名）为其设置 Expires 标头。您可以安全地将 Expires 标头设置为未来几个月。您可以通过检查当前 favicon.ico 的最后编辑时间来判断。

　　Imagemagick 可以帮助您创建微小的网站图标。

　　33、保持单个内容小于25K

　　这个限制主要是因为 iPhone 无法缓存大于 25K 的文件。请注意，这是指未压缩的大小。由于纯gizp压缩可能达不到要求，所以压缩文件很重要。

　　有关详细信息，请参阅 Wayne Shea 和 Tenni Theurer 的论文“性能研究，第 5 部分：iPhone Cacheability - Making it Stick”。

　　34、将组件打包成复合文本

　　将页面内容打包成复合文本就像带有多个附件的电子邮件，允许您在一个 HTTP 请求中获取多个组件（请记住：HTTP 请求是一种奢侈）。使用此规则时，首先确定用户代理是否支持（iPhone 不支持）。