Menu
First, I needed a way to force browser always load .css and .js files. I solved it by putting a sufix in the files:
Before:
<script type="text/javascript" src="file.js"></script>
After:
<script type="text/javascript" src="file.js?v=1"></script>
That aparently worked.
Now, I need to know if that really worked. Sure, I can edit the file and check the changes in my browser but I need a way more specific, something like an option in the browser that show "File loaded from the cache" / "New file loaded from the folder".
Can you help me?
583
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.
Right click on your site and choose inspect. It will open a new window of chrome developer tools. In that go to console and type document. It display the entire document structure including your javascript (Internal code or external link).
When it comes to ordering your CSS and JavaScript, you want your CSS to come first. The reason is that the rendering thread has all the style information it needs to render the page. If the JavaScript includes come first, the JavaScript engine has to parse it all before continuing on to the next set of resources.
It works, all the time, for everyone. But, if you're not using it, and you just need to reload that one CSS or JS file occasionally in your own browser... just open it in its own tab and hit SHIFT-reload (or CTRL-F5)!
In a Chromium/Chrome browser open the Developer tools (alt + cmd/ctrl + I, or right click the window and hit inspect element), and then click the Network Tab it is the Size and Status properties that tell you if the asset came from browser cache, and whether a request was made to the server to check if the asset was stale.
The reason people may mistake 304 for the ideal in browser caching is if you check the response by sending a request via refreshing, the browser adds a header that forces a check against the server.
So if the asset/resource is saved in your browser, you'll always check the server for staleness and thus get a 304.
If you open up developer tools beforehand, then instead of refresh just click the address bar and hit enter, you should get a status: 200 OK size: (from cache).
If for any reason you don't see a column with size then right click the window and select it from the list of properties.
** NOTE: newer versions of Chrome look like they no longer send the forced revalidate header, if you refresh during the same browser session. Instead you'll see a 200: from memory cache.
108
It is browser responsibility area to load resources from server or take it from cache. From client code you cannot determine the source that was actually used (if you don't load resources dynamically using ajax). Only you can is look at the Network tab in Developer Tools (or Firebug).
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
