您的位置：首页 > 其它

用 Ext.Net 程序演示 IE 的 F5/Ctl-R、Ctl-F5、地址栏回车的区别

2012-01-01 14:18 399 查看

本文内容

概述
测试用例
用HttpWatch演示几种刷新界面的区别
参考资料

概述

当我们初次访问一个页面后，刷新该页面的方式有很多，包括F5、Ctl-R、Ctl-F5和直接在地址栏按回车。这几种方式是不同的。

测试用例

本文测试用例使用Ext.Net_在程序集中自定义TreePanel控件中的演示。

用HttpWatch演示几种刷新界面的区别

为保证测试准确性，先用HttpWatch清除浏览器缓存，如图1所示：

图1用HttpWatch清除浏览器缓存

初次访问Default.aspx页面后，分别以四种方式请求该页面，结果如下所示：

图2用四种方式请求Default.aspx页面——初次请求、F5、Ctl-R、Ctl-F5、地址栏回车

从上到下分别是：

初次访问
F5、
Ctl-R、
Ctl-F5
直接在地址栏按回车
说明：

“初次访问”时，HTTP状态码返回200；
用F5 和Ctl-R刷新界面时，页面资源HTTP状态码返回200；除了tip-sprite.gif是从缓存获得外，其他资源的HTTP状态码均返回304。F5 和Ctl-R刷新界面相同；
用Ctl-F5刷新界面时，除了tip-sprite.gif是从缓存获得外，所有资源的HTTP状态码都返回200；
直接在地址栏按回车时，所有资源都是从缓存获得的。
下面将分别说明，尤其是你会注意到一些细节，比如，图像tip-sprite.gif，还有有些图像资源，无论你采用哪种方式刷新，都不会向服务器请求等等，这些细节对在开发Web应用程序中，提高其性能很有帮助。

初次访问先看下“初次访问”页面的情况，如下图所示：

图3初次访问

说明：

红色垂直线表示PageLoad阶段，主要获得了Ext.Net嵌入资源的脚本和CSS文件，以及在程序集中自定义的一个脚本myTreePanel.js。
绿色垂直线表示RenderStart阶段，在PageLoad基础上，就可以呈现页面了。
灰色垂直线表示HTTPLoad阶段，在RenderStart阶段，页面呈现时，以“渐进增强”的方式，向服务器请求资源，在该演示中主要是图像。例如，请求了按钮图片，不能拖拽的图片，还有树形结构的文件夹和箭头图标等。
参考博文"以Ext.Net为例了解网页测试工具HttpWatch"。

按F5

图4初次访问后按F5

说明：

[code]publicoverridevoidProcessRequest(HttpContextcontext)

this.context=context;

stringfile=this.context.Request.RawUrl;

boolisInitScript=file.Contains("extnet/extnet-init-js/ext.axd?");

if(!ResourceHandler.IsSourceModified(context.Request)&&!isInitScript)

context.Response.SuppressContent=true;

context.Response.StatusCode=304;

context.Response.StatusDescription="NotModified";

context.Response.AddHeader("Content-Length","0");

return;

……

[/code]
[/code]

当客户端再次请求资源时，Ext.Net会判断自己的相关嵌入资源（即!ResourceHandler.IsSourceModified(context.Request)&&!isInitScript，不是用户自定义脚本且没有被修改）是否被修改，如果没有被修改，就直接返回给客户端304。下面代码是Ext.Net如何判断自己的资源是否被修改：


[code]
[code]privatestaticboolIsSourceModified(HttpRequestrequest)

booldateModified=false;

stringrequestIfModifiedSinceHeader=request.Headers["If-Modified-Since"]??string.Empty;

DateTimerequestIfModifiedSince;

DateTime.TryParse(requestIfModifiedSinceHeader,outrequestIfModifiedSince);

DateTimeresponseLastModified=newDateTime(ResourceHandler.GetAssemblyTime(typeof(ResourceHandler).Assembly)).ToUniversalTime();

if(requestIfModifiedSince!=DateTime.MinValue&&responseLastModified!=DateTime.MinValue)

requestIfModifiedSince=requestIfModifiedSince.ToUniversalTime();

if(responseLastModified>requestIfModifiedSince)

TimeSpandiff=responseLastModified-requestIfModifiedSince;

if(diff>TimeSpan.FromSeconds(1))

dateModified=true;

else

dateModified=true;

returndateModified;

[/code]
[/code]

从代码中看出，requestIfModifiedSince是客户端中资源的最后修改时间，responseLastModified是服务器端中程序集嵌入资源的最后修改时间。当responseLastModified>requestIfModifiedSince，且responseLastModified–requestIfModifiedSince>TimeSpan.FromSeconds(1)时，说明服务器端的资源已经被修改，需要重新把该资源发送给客户端。

[/quote]

按Ctl-F5

图6初次访问后按Ctl-F5

说明：

[align=left]除重新请求了Default.aspx页面外，还重新请求了页面中的其他资源，就像客户端初次访问一样。[/align]

[align=left]但是，我们知道，本文四种刷新界面的方式是连续进行的。因此，当执行Ctl-F5时，浏览器已经有缓存了该页面的相关资源，但是Ctl-F5没有使用，而是直接向服务器重新请求。[/align]

[align=left]可是图像tip-sprite.gif仍然是从缓存获得的。[/align]

直接在地址栏按回车

图7初次访问后在地址栏按回车

说明：

无论是Default.aspx页面，还页面中的其他资源，都是从缓存中获得的。

备注

这四种刷新方式：F5、Ctl-R、Ctl-F5和直接在地址栏按回车。当页面被初次访问后，F5和Ctl-R的操作和效果相同，虽然也发送了请求，但服务器在对客户端发送的HTTP请求中的脚本和CSS文件的最后修改日期与自己比较后，告诉客户端，资源没有任何改变，可以直接其本地缓存中获得；Ctl-F5不访问缓存，重新请求页面，及其中的资源，包括脚本和CSS，就像初次访问页面一样；直接在地址栏按回车，不向服务器发送请求，直接从缓存中获得。

但是，既然Ctl-F5不访问本地缓存，但是为什么资源tip-sprite.gif图像还是从本地缓存中获得的？F5和Ctl-R也是如此。

不仅如此，与初次访问页面相比，F5、Ctl-R、Ctl-F5和直接在地址栏按回车发出HTTP请求的次数要少一半。这些重新请求的资源主要是CSS文件和脚本，而好几个图像都没再请求了。

没再请求的资源应该得益与HTTPExpire头。试想，有这样一个资源，它几乎不会被修改。因此，如果设置它“永不过期”的话，那么在初次访问后，这样的资源就不会HTTP请求。

参考资料

InternetExplorerKeyboardShortcuts

http://www.updatexp.com/internet-explorer-keyboard-shortcuts.html

http://windows.microsoft.com/en-US/windows7/Internet-Explorer-keyboard-shortcuts

Wikipedia:Bypassyourcachehttp://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache#cite_note-0

UsingCtrl+F5inIE7http://blog.httpwatch.com/2007/10/19/using-ctrlf5-in-ie-7/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航