如何检查我的JavaScript是否正确缓存

Question

I have a script in my JSP page.The script code was very large and I came to know it's not a best practice to have such huge amount of script code in JSP code.

I have separated the script to a js file and included that js file in JSP page. I have the following questions:

1. How can I verify whether my js file is cached? Is there any browser tool available to check whether my js file is getting cached or not?
2. Should I write any piece of code to cache the js file?

Answer 1

First, I would look at my server logs, and if the .js file is not being loaded every time the main page is loaded, then your script is probably cached. But to be more direct to your question -

I would put some dynamic code inside my .JS file that creates a function to do a callback to the server and send the date/time stamp of when it was loaded last. Since I dont know which language you are writing in, I will use some conceptual notation where <<timeloaded>> is replaced with a url friendly date/time value:

in yourfile.js include something like this...

function (){
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", "lastload.htm?<<timeloaded>>", false );
}()

so when the browser requests yourfile.js the first time, the time is inserted into the js file dynamically by your server side app code. Then each time the browser "loads" the file, it will call your server to look for a file called lastload.htm and pass the time that .js file was loaded.

Inserting that time value into your file can be done many different ways which is beyond the scope of your question.

Answer 2

If you have Chrome, open the Inspector (right-click, "Inspect Element"), then click the Network tab. Now reload the page. You should see a list of all of the elements that were loaded for the page.

To determine if the Javascript (or any element) was cached, what you want to look for is the "Size" column. Data that is browser-cached will show "(from cache)" as the Size value. If you see anything else for Size, that means it was loaded over the network and wasn't loaded from the browser cache.

To answer the second part of your question, yes it's definitely a good idea to make sure you're sending headers to make things browser cache anything on your website that is static. You can't use Javascript to set the cache headers, that would need to be done by the web server. How you do that entirely depends on your environment, but it can be done by either editing your web server configuration, or by a script if you're using a server-side language such as PHP.