Why is creating a window slower than reloading it

Question

Context: I'm going to explain the context of this question, but I think that the answer to the question is not very context specific.

I have a background page in chrome a chrome extension. The page does the following:

chrome.commands.onCommand.addListener(function(){
    chrome.windows.create({
        url:"page.html",
        type:'popup'
    });
});

As you can see this creates a new window loading the page.html file from within my extension, when the user triggers the command (by using a hotkey).

The page page.html is a fairly heavy page. It runs a bunch of scripts (all from the extension directory) and a bunch of images (also all from the extension directory).

Punchline of context: The important thing here, is that the page is loading entirely locally. Nothing (until user input) calls out to the internet and it loads just fine when I am offline.

Question:

• When I load the window by triggering the event, as described above, it takes some time to load, lets say maybe 1.5 seconds. If I then refresh the new window (page.html), it loads in less than .5 seconds. What is causing this difference in time?
• How could I capitalize on the faster refresh rate to make my initial page load faster? Could I load a hidden version somehow? Or prerender it somehow? Any suggestions would be appreciated.

Answer 1

Regarding the first question:

Refreshing a page doesn't cause everything (like rendering engine) to be initialized again. Depending on the implementation of the browser, the browser keeps a lot of resources in cache, and when the same URL is accessed again (page refresh in this case) the resources are loaded from cache, which is faster. Hence causing the difference in time.

Regarding the second question:

@elfin forest's answer may give you some insight.

Answer 2

If you do a right click on Reload button when developer tools are open, then you get three options.

Normal reload

It is the default(pressing F5). This will use the cache but revalidate everything during page load, looking for "304 Not Modified" response. If the browser can avoid re-downloading cached JavaScript files, images, text files, etc. then it will. That probably is the reason why you are getting the difference in speed.

Hard reload

Does not use anything in the cache when making the request. It forces the browser to re-download every JavaScript file, image, text file, etc.

Empty Cache and Hard Reload

This is the third option, and it clears the cache and then reloads.

Try the remaining two forms of reload, and then please report if the speed difference is still noticeable.