网站所用中的ETag格式为Filetimestamp:ChangeNumber的机制相似

　　网站所用中的ETag格式为Filetimestamp:ChangeNumber的机制相似

　　ETag 的问题在于，它是根据唯一的属性生成的，可以区分网站 所在的服务器。当浏览器从一台服务器获取页面内容，然后在另一台服务器上验证时，ETag 将不匹配。这种情况对于使用服务器组和处理请求的网站 来说非常常见。默认情况下，Apache 和 IIS 都会在 ETag 中嵌入数据，这将显着减少多台服务器之间的文件验证冲突。

　　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配置，你的用户访问页面会比较慢，服务器会传输更多的内容，占用更多的带宽。 , 代理不会有效缓存你的网站 内容。即使您的内容有 Expires 标头，只要用户点击“刷新”或“重新加载”按钮，就会发送相应的 GET 请求。

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

　　FileETag 无

　　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 页面是进程指针。当浏览器有序加载顶部的文件头、导航栏和标志时，可以作为等待页面加载的用户的视觉反馈。这从整体上改善了用户体验。

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

　　HTML规范明确规定样式表应该收录在页面区域内：“不同的是，它只能出现在文档区域内，虽然可以多次使用。”无论是导致空白屏幕还是出现无样式的内容，都不值得尝试。最好的解决方案是根据 HTML 规范在文档中加载您的样式表。

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

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

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

　　表达式的问题在于它的计算频率比我们想象的要高。它不仅在页面显示和缩放时重新计算，而且在页面滚动时，甚至在鼠标移动时也会重新计算。在 CSS 表达式中添加一个计数器来跟踪表达式的计算频率。通过在页面上的任意位置移动鼠标，您可以轻松实现 10,000 多个计算。

　　减少 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、Reduce JavaScript 和 CSS

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

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

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

　　在PHP中，可以通过创建一个叫做insertScript的方法来代替：

　　为了防止脚本被多次重复引用，这种方法还应该使用其他机制来处理脚本，比如检查所属目录，在脚本文件名中为Expire的头部添加一个版本号文件等

　　25、减少DOM访问

　　使用 JavaScript 访问 DOM 元素很慢，所以为了获得更多的页面，你应该这样做：

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

　　离线更新节点后，将它们添加到文档树

　　避免使用 JavaScript 修改页面布局

　　有关这方面的更多信息，请查看 YUI 主题中 Julien Lecomte 的 文章“高性能 Ajax 应用程序”。

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

　　有时我们觉得页面没有响应。这是因为 DOM 树元素附加了太多的事件处理程序，并且一些事件语句被频繁触发。这就是为什么说使用事件委托是一个好方法。如果一个 div 中有 10 个按钮，则只需为 div 附加一个事件句柄一次，而不是为每个按钮添加一个句柄。当事件冒泡时，您可以捕获该事件并确定发出哪个事件。

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

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

　　27、减小 Cookie 大小

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

　　有关更多信息，请参阅 Tenni Theurer 和 Patty Chi 的 文章“当饼干碎了”。这些研究主要包括：

　　删除不必要的cookie

　　使coockie尽可能小，以减少对用户响应的影响

　　注意在自适应级别域名上设置coockie，不影响子域名

　　设置合理的过期时间。提前过期，不要过早清除coockie会提高用户的响应时间。

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

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

　　如果您的域名是，则可以在其上放置静态内容。但是，如果您设置的是 coockie 而不是顶级域名，那么所有对 coockie 的请求都收录 coockie。在这种情况下，您可以购买一个新的域名来存储静态内容，并使该域名不受 coockie 的影响。雅虎！正在使用，YouTube 正在使用，亚马逊正在使用等等。

　　使用非 coockie 域来拥有静态内容的另一个优点是某些代理（服务器）可能会拒绝缓存 coockie 内容请求。一个相关的建议是，如果你想确定是应该使用它还是作为你的主页，你必须考虑 coockie 的影响。忽略 www 将使您别无选择，只能将 coockie 设置为 *。 （*是泛域名解析，代表所有子域翻译者dudo note），所以出于性能考虑，最好使用www。子域并在其上设置 coockie。

　　29、优化图片

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

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

　　identify -verbose image.gif

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

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

　　转换 image.gif image.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、Optimize CSS Spirite

　　在 Spirite 中水平排列图片，垂直排列会稍微增加文件大小；

　　可以通过在 Spirite 中将更接近的颜色组合在一起来减少颜色的数量。理想情况下，它应该少于 256 色才能应用 PNG8 格式；

　　移动方便，不要在Spirite形象中间留大空隙。虽然这不会增加文件大小，但它需要更少的内存供用户代理将图像解压缩为像素图。 100x100 的图片是 10,000 像素，1000x1000 的图片是 100 万像素。

　　31、不要在 HTML 中缩放图像

　　不要使用大于必要的图像来设置 HTML 中的长度和宽度。如果您需要：

　　

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

　　32、favicon.ico 应该很小并且可以缓存

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

　　因此，为了减少favicon.ico带来的弊端，我们必须：

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

　　在适当的时候（也就是当你不打算改变favicon.ico，因为改变到新文件时它不能重命名），为其设置Expires文件头。您可以安全地将 Expires 文件头设置为接下来的几个月。可以通过查看当前favicon.ico的最后编辑时间来判断。

　　Imagemagick 可以帮助您创建一个小图标。

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

　　这个限制主要是因为 iPhone 不能缓存大于 25K 的文件。注意这里指的是解压后的大小。由于单独的gizp压缩可能无法满足要求，因此精简文件非常重要。

　　有关更多信息，请参阅 Wayne Shea 和 Tenni Theurer 撰写的文档“性能研究，第 5 部分：iPhone 可缓存性 - 使其保持不变”。

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

　　将页面内容打包成复合文本就像一封带有多个附件的Email，可以让你在一个HTTP请求中获取多个组件（记住：HTTP请求是非常奢侈的）。使用这个规则时，首先要判断用户代理是否支持（iPhone不支持）。