Yahoo对Web前端优化的14条经验拔萃(3)

发布时间：2021-07-12 17:49 所属栏目：21 来源：互联网

导读：终的结果是，对于完全相同的组件，从一台服务器到另一台，Apache和IIS产生的ETag是不会匹配的。如果ETag不匹配，用户就不会按照ETag的设计计划那样接收到更小更快的304响应；相反，它们会收到普通的200响应以及组件

终的结果是，对于完全相同的组件，从一台服务器到另一台，Apache和IIS产生的ETag是不会匹配的。如果ETag不匹配，用户就不会按照ETag的设计计划那样接收到更小更快的304响应；相反，它们会收到普通的200响应以及组件的所有数据。如果只在一台服务器上部署网站，这通常不会产生问题；但如果使用了服务器集群，同时使用Apache或者IIS进行默认的ETag配置，用户响应将变慢，服务器负载将变高，将消耗更多的带宽，同时代理缓存的效率也会下降。即使组件具有长久的Expires头，一旦用户单击了Reload或Refresh按钮，依然会产生条件GET请求。
如果组件必须通过最新修改日期之外的一些东西来进行验证，则ETag是一种强大的方法；如果无须自定义ETag，则最好将其移除。Last-Modified头基于组件的时间戳进行验证，可以提供完全等价的信息，而且移除ETag可以减少响应和后续请求的HTTP头的大小。在Apache中，只要向Apache配置文件中简单地添加下面一行配置就能移除ETag：
FileETag none

规则14——使Ajax可缓存（Make Ajax Cacheable）
Ajax的一个最重要的优点就是向用户提供即时反馈，因为它异步的从后台Web服务器请求信息。但是，使用Ajax并不保证用户不会等到异步的JavaScript和XML返回响应。在很多应用程序中，用户是否需要等待取决于如何使用Ajax。用户是否需要等待的关键因素在于Ajax请求是主动的还是被动的。主动请求是基于用户的当前操作而发起的，被动请求则是为了将来使用而预先发起的。我们需要注意的是，“异步”并没有暗示“实时”。

为了提升性能，最重要的是优化Ajax响应。而改善这些主动Ajax请求的最重要的方式就是使响应可缓存。如同在“添加Expires头”中讨论的，一些其他规则也适用于Ajax，包括：压缩组件、减少DNS查找、精简JavaScript、避免重定向、配置Etag。

PS：具体的关于优化的知识点或问题

1. 为什么网页设置缓存后仍然有请求（304响应）？

浏览器刷新是conditional request，所以如果通过刷新来看缓存是否有效肯定是304。可以试试输入网址按回车或者回退键来看效果。另外由于HTML文档很少设置完全缓存（一般要和服务器验证），可以看静态组件的缓存效果（200 ok (from cache)）。

2. expirationTime = responseTime + freshnessLifetime - currentAge

freshnessLifetime具体怎么算可以参考https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching_FAQ。

3. Flash of unstyled content（无样式内容闪烁）

Flash of unstyled content（FOUC）就是在加载外部样式表之前，浏览器按默认样式显示了内容，这是因为浏览器在所有资源都下载好前就开始渲染页面了。一旦外部样式被加载，浏览器就会修正样式，但这种修正可能是可见的，也就是FOUC。

怎么避免？在<head>中通过<link>引入样式，避免使用@import。

（编辑：ASP站长网）