<br />
Gzip压缩所有可能的文件类型是减少文件体积增加用户体验的简单方法。</p>
<p><strong>14、配置ETag</strong></p>
<p>Entity
tags（ETags）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（“实体”就是所说的“内
容”，包括图片、脚本、样式表等）。增加ETag为实体的验证提供了一个比使用“last-modified
date（上次编辑时间）”更加灵活的机制。Etag是一个识别内容版本号的唯一字符串。唯一的格式限制就是它必须包含在双引号内。原始服务器通过含有
ETag文件头的响应指定页面内容的ETag。<br />
HTTP/1.1 200 OK<br />
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT<br />
ETag: “10c24bc-4ab-457e1c1f”<br />
Content-Length: 12195<br />
稍后，如果浏览器要验证一个文件，它会使用If-None-Match文件头来把ETag传回给原始服务器。在这个例子中，如果ETag匹配，就会返回一 个304状态码，这就节省了12195字节的响应。 GET /i/yahoo.gif HTTP/1.1<br />
Host: us.yimg.com<br />
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT<br />
If-None-Match: “10c24bc-4ab-457e1c1f”<br />
HTTP/1.1 304 Not Modified<br />
ETag
的问题在于，它是根据可以辨别网站所在的服务器的具有唯一性的属性来生成的。当浏览器从一台服务器上获得页面内容后到另外一台服务器上进行验证时
ETag就会不匹配，这种情况对于使用服务器组和处理请求的网站来说是非常常见的。默认情况下，Apache和IIS都会把数据嵌入ETag中，这会显著
减少多服务器间的文件验证冲突。<br />
Apache 1.3和2.x中的ETag格式为inode-size-timestamp。即使某个文件在不同的服务器上会处于相同的目录下，文件大小、权限、时间戳等都完全相同，但是在不同服务器上他们的内码也是不同的。<br />
IIS
5.0和IIS
6.0处理ETag的机制相似。IIS中的ETag格式为Filetimestamp:ChangeNumber。用ChangeNumber来跟踪
IIS配置的改变。网站所用的不同IIS服务器间ChangeNumber也不相同。
不同的服务器上的Apache和IIS即使对于完全相同的内容产生的ETag在也不相同，用户并不会接收到一个小而快的304响应；相反他们会接收一个正
常的200响应并下载全部内容。如果你的网站只放在一台服务器上，就不会存在这个问题。但是如果你的网站是架设在多个服务器上，并且使用Apache和
IIS产生默认的ETag配置，你的用户获得页面就会相对慢一点，服务器会传输更多的内容，占用更多的带宽，代理也不会有效地缓存你的网站内容。即使你的
内容拥有Expires文件头，无论用户什么时候点击“刷新”或者“重载”按钮都会发送相应的GET请求。<br />
如果你没有使用ETag提供的灵活的
验证模式，那么干脆把所有的ETag都去掉会更好。Last-Modified文件头验证是基于内容的时间戳的。去掉
ETag文件头会减少响应和下次请求中文件的大小。微软的这篇支持文稿讲述了如何去掉ETag。在Apache中，只需要在配置文件中简单添加下面一行代
码就可以了：<br />
FileETag none</p>
<p><strong>15、尽早刷新输出缓冲</strong></p>
<p>当用户请求一个页面时，无论如何都会花费200到500毫秒用于后台组织HTML文件。在这期间，浏览器会一直空闲等待数据返回。在PHP中，你可
以使用
flush()方法，它允许你把已经编译的好的部分HTML响应文件先发送给浏览器，这时浏览器就会可以下载文件中的内容（脚本等）而后台同时处理剩余的
HTML页面。这样做的效果会在后台烦恼或者前台较空闲时更加明显。<br />
输出缓冲应用最好的一个地方就是紧跟在<head />之后，因为HTML的头部分容易生成而且头部往往包含CSS和JavaScript文件，这样浏览器就可以在后台编译剩余HTML的同时并行下载它们。 例子：<br />
… <!– css, js –><br />
</head></p>
<p><body><br />
… <!– content –></p>
<p>为了证明使用这项技术的好处，Yahoo!搜索率先研究并完成了用户测试。</p>
<p><strong>16、使用GET来完成AJAX请求</strong></p>
<p>Yahoo!Mail团队发现，当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发
送数
据。因此使用GET最为恰当，因为它只需发送一个TCP包（除非你有很多cookie）。IE中URL的最大长度为2K，因此如果你要发送一个超过2K的
数据时就不能使用GET了。<br />
一个有趣的不同就是POST并不像GET那样实际发送数据。根据HTTP规范，GET意味着“获取”数据，因此当你仅仅获取数据时使用GET更加有意义（从语意上讲也是如此），相反，发送并在服务端保存数据时使用POST。</p>
<p><strong>17、把样式表置于顶部</strong></p>
<p>在研究Yahoo!的性能表现时，我们发现把样式表放到文档的<head />内部似乎会加快页面的下载速度。这是因为把样式表放到<head />内会使页面有步骤的加载显示。<br />
注
重性能的前端服务器往往希望页面有秩序地加载。同时，我们也希望浏览器把已经接收到内容尽可能显示出来。这对于拥有较多内容的页面和网速较慢的用户来说
特别重要。向用户返回可视化的反馈，比如进程指针，已经有了较好的研究并形成了正式文档。在我们的研究中HTML页面就是进程指针。当浏览器有序地加载文
件头、导航栏、顶部的logo等对于等待页面加载的用户来说都可以作为可视化的反馈。这从整体上改善了用户体验。<br />
把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。<br />
HTML
规范清楚指出样式表要放包含在页面的<head />区域内：“和<a />不同，<link
/>只能出现在文档的<head
/>区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文
档<head />内加载你的样式表。</p>
<p><strong>18、避免使用CSS表达式（Expression）</strong></p>
<p>CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：<br />
background-color: [removed] (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );<br />
如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。 expression方法在其它浏览器中不起作用，因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。
本文地址:
http://www.it300.com/article-1124.html
评论