`
pumaboyd
  • 浏览: 241576 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Location.reload() 使用上的性能问题

阅读更多

本来是不想写这个的,但看到在用中文搜索得到的结果时,很是不满意。你基本得到是location.reload()是从浏览器缓存中读取。这样的答案有时真是莫名。很直接的理解成从IE缓存读取,及时原页面有更新也是这样。

最初的理解是这样,结果很自然的想到,使用location.reload(true)来重新加载页面(强制获取所有页面的元素)。而且搜索到的结果很多直接回答“使用location.reload(true)就可以解决问题了”。理论上这样是没问题的,但在实际的应用环境中,如果这个操作是经常使用的,这样的用法很明显的是降低服务器性能的,对于访问量高的网站。嘿嘿,你这样使用,是给服务器制造麻烦。

通过location.reload(false)的Http请求状况(pic1)

locationfalse

通过location.reload(true)的Http请求状况(pic2)

locationtrue

从PIC2中就很明显的看出所有的请求都是200,这样的结果就是服务器重新返回所有的数据(特别是当这个页面图片很多的时候)。而这种重新操作是没有必要的。性能问题就很明显了。

下面列出location.relaod的具体解释,个人认为这是比较标准的啦

The reload() method of the Location object reloads the document that is currently displayed in the window of the Location object. When called with no arguments, or with the argument false, it uses the If-Modified-Since HTTP header to determine whether the document has changed on the web server. If it has, it reloads the document from the server, and if not, it reloads the document from the cache. This is is the same action that occurs when the user clicks on Navigator's Reload button.

When reload() is called with the argument true, then it will always bypass the cache and reload the document from the server, regardless of the last-modified time of the document. This is the same action that occurs when the user shift-clicks on Navigator's Reload button

其实这里还可以简单的理解成(IE浏览器)

location.reload() =>  F5刷新

location.relaod(true) => Ctrl + F5 刷新

这里顺便提一下:location.href 和 location.replace

这两个也可以达到刷新页面的效果,但是不同于locatio.reload.具体大家可以看我最后列举的参考资料.

location.replace  没有历史记录,就是浏览器的前进后退按钮失效(PS:我们部落里的帖子不能前进后退功能失效可能是这个原因)

location.href       有历史记录,相当于一个页面的链接跳转。所以不会有"post"数据的问题。

 

有同事反映Location.relaod(false)在使用时有问题,但我目前在项目中的实际使用没发现。暂时只记录到这。以后有问题在更新

参考资料:

http://www.unix.com.ua/orelly/web/jscript/refp_216.html

http://www.dayanmei.com/blog.php/ID_816.htm

分享到:
评论

相关推荐

    js 页面刷新location.reload和location.replace的区别小结.docx

    js 页面刷新location.reload和location.replace的区别小结.docx

    js刷新页面location.reload()用法详解

    主要介绍了js刷新页面location.reload()用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    js location.replace与location.reload的区别

    location.reload相当于我们按F5,页面在服务器端已经存在,isPostBack页面不会从服务器端重新生成,然后返回客户端 会在浏览器的历史浏览记录中增加一条记录 location.replace 页面会从服务器端重新创建,not ...

    js 页面刷新location.reload和location.replace的区别小结

    在实际应用的时候,重新刷新页面的时候,我们通常使用: location.reload() 或者是 history.go(0) 来做。下面有一些相关的内容,大家看完了就会有更多的收获。

    [removed].reload 刷新使用分析(去对话框)

    使用[removed].reload;刷新时,如果提交数据的动作,则会出现讨厌的对话框!...window.opener.location.reload(); 这种写法就不出现那讨厌的对话框啦! 介绍JS实现刷新iframe的方法 <iframe src=”1.ht

    jsp 刷新父页面

    parent.location.reload(); 弹出子页面 window.opener.location.reload(); 子窗口刷新父窗口 self.window.opener.locaction.reload(); 刷新一open()方法打开的窗口 window.opener.location.href = window....

    Javascript刷新页面的实例

    Javascript刷新页面的实例 ...2 location.reload() 3 location=location 4 location.assign(location) 5 document.execCommand(‘Refresh’) 6 window.navigate(location) 7 location.replace(location)

    JS刷新框架外页面七种实现代码

    window.parent.frames[1].location.reload(); 语句2. window.parent.frames.bottom.location.reload(); 语句3. window.parent.frames[“bottom”].location.reload(); 语句4. window.parent.frames.item(1)....

    js刷新当前页面的几种方法(相当牛X)

    通常使用: location.reload() 或者是 history.go(0) 来做。 此方法类似客户端点F5刷新页面,所以页面method="post"时,会出现"网页过期"的提示。 因为Session的安全保护机制。 当调用 location.reload() 方法时, ...

    vue this.reload 方法 配置

    2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一...

    GitHub 读取jupyter报错Sorry, something went wrong. Reload?

    GitHub 读取jupyter报错Sorry, something went wrong. Reload?

    js刷新当前页面

    在实际应用的时候,重新刷新页面的时候,我们通常使用: location.reload() 或者是 history.go(0) 来做。因为这种做法就像是客户端点F5刷新页面,所以页面的method="post"的时候,会出现"网页过期"的提示。那是因为...

    关闭时刷新父窗口两种方法

    window.opener.location.reload()刷新父窗口window.opener.location.reload() 与 window.opener.location.href=window.opener.location.href 都是弹出窗口关闭时用来刷新父窗口。 但[removed].Reload 如果有数据提交...

    jQuery 局部div刷新和全局刷新方法总结

    parent.location.reload()刷新父亲对象(用于框架) opener.location.reload()刷新父窗口对象(用于单开窗口) top.location.reload()刷新最顶端对象(用于多开窗口) 以上就是小编为大家带来的jQuery 局部div...

    ext中store.load跟store.reload的区别示例介绍

    代码如下: reload : function(options){ this.load(Ext.applyIf(options||{}, this.lastOptions)); }, 代码如下: load : function(options) { options = Ext.apply({}, options); this.storeOptions(options); if...

Global site tag (gtag.js) - Google Analytics