Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the different between Refresh vs Putting URL and pressing enter?

I have asp.net mvc application, when I use chrome it loads the home page (which has many .js links) it works fine.

but when I press F5 or refresh, it doesn't load all the .js (and more other things like .png even) links!

unless I click on the URL text box and then enter, it works fine with this.

in the console chrome shows: net::ERR_CONNECTION_RESET

enter image description here

and the header title: Provisional headers are shown

in firefox nothing happens and the app works fine with it.

like image 520
Mahmoud Hboubati Avatar asked Nov 01 '25 05:11

Mahmoud Hboubati


2 Answers

Answering based on the title of the thread. Pressing enter on the url in the address bar is the equivalent of navigating to the url for the first time but will load cached resources from any prior visits.

Pressing F5 reloads the page but will also attempt to retain any request made of the page upon accessing thus if you had submitted data to the page via a form and pressed F5 the browser should ask if you wish to resubmit the data which was submitted when accessing the page where as in this case if you pressed enter on the url the data would be lost.

If you press Ctrl+F5 on the page this would perform the same actions as F5 but in addition would ignore any local caching that had been performed and request a new copies of any resources loaded from the site e.g. it would request fresh copies of any images linked within the page rather than loading a local stored copy from the browser cache.

In addition there are variations of these conditions which will have an effect on each scenario for example if the page has a querystring (a url followed by ?[key]=[value]) then regardless of the method of page access (direct via enter on url or refresh) this data would be passed to the page also if the page uses an anchor tag in the url (# followed by a string e.g. #top) this would cause the page to navigate to that anchor regardless of the method of refresh but in both these cases the method of refresh would still effect resources being loaded from cache or pulled from the host as detailed in my above examples.

I know this doesn't resolve the additional questions asked but it will clarify the difference between navigation to a url, refreshing a page after first visit and forcing a full refresh of the page for anyone coming here for an answer to the post title question.

like image 106
IDED Avatar answered Nov 02 '25 23:11

IDED


All browsers handle caching differently. The only way to be certain that the resource will be loaded from the server each and every time is to address it by a different name. Personally with javascript files I use version numbers and increment this number each time i modify the contents to ensure the new version is loaded from the server instead of from cache. Such as

<script src="myLibrary_1.0116.js">

The other option is to keep the same JS file name and append a string to the url such as

<script src="myLibrary.js?version=1.0116">

Then if you absolutely want the script to load from the server EVERY time then you could use a script to append a random string to the end of your source name. Like such

 var scriptsList=["script1.js","script2.js","script3.js"];

    function buildKey(){
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01234567890";

        for( var i=0; i < 16; i++ )
            text += possible.charAt(Math.floor(Math.random() * possible.length));

        return text;
    }

    window.onload = function(){
    for(i=0; i<scriptsList.length; i++)
      var s=[];
      s[i] = document.createElement("script");
      var sessionKey = buildKey();
      s[i].type = "text/javascript";
      s[i].src = scriptsList[i]+sessionKey;
      $("head").append(s[i]);
      
    }

var gracePeriod=25*1000;


function isCached(){
  var currentTimeStamp= Date.now();
  var contentGeneratedTime=parseInt(document.getElementsByTagName("BODY")[0].getAttribute("generated-Time"));
  if(currentTimeStamp>contentGeneratedTime+gracePeriod)
    window.reload(true);
  }
<html><body generated-Time="UNIXTIMESTAMP"></body></html>

This last function will require PHP or asp.net to set the timestamp on the body tag. The javascript will check to make sure that the document was generated within the last 25 seconds and if not will force a reload while discarding the cache.

long epochTime = (DateTime.UtcNow.Ticks - 621355968000000000) / 10000;

This will give you your UNIX timestamp in miliseconds in asp.net

like image 44
PC3TJ Avatar answered Nov 02 '25 22:11

PC3TJ