Question

I’m having a performance issue on my web application when the user hits the “refresh” button on my webpages. The behavior is shown below:

$("#reloadbutton").click(function(){
    location.reload();
});

It reloads all of the CSS, JS, and image files that the page needs, as it should. The only problem is that it does this for every other page request, such as clicking on a link to go to another page.

If I just hit the F5 button, it’ll reload all of the CSS, JS, and image files, and then if I go to another page, it won’t try and reload those files once I go to that other page. But if I hit the reload button on the page itself, it’ll reload all of those files on every page request, and I don’t want it to do that.

So I have a two part question:

1. How can I refresh without having the browser fetch all of the CSS, JS, and image files (because I want to minimize the time it takes to refresh each page)?

2. Why am I getting different behavior when using location.reload() as opposed to using the browser’s own reload button?

Note: I’m currently using the latest version of Firefox

Answer 1

use the

$("#reloadbutton").live("click",function(){
    location.reload();
});

and you can do this by making ajax call after every some second