I have several different sites in different hosts and I use the same JS file in all of them which is loaded from one and only remote host. For instance,
One single JS filename my.js is stored at someotherhost.net.
This filename is loaded in several different pages (sites):
somedomain1.net/home.html
somedomain2.net/home.html
somedomain3.net/home.html
Browsing through these sites browser caches my.js. But will it use the same cache for all different sites?
Or maybe it doesn't matter whether the requested filename is named the same, stored in single remote host and loaded in different pages, browser will have different caches?
How browser caching works?
Yes. The browser will cache each unique url, provided there are no headers that tell it not to.
Your file should have one entry in the browser cache even if it is requested from a number of referring pages. Once cached from one site the browser will use the cached version for all the others so speeding up the page load.
This is the idea behind loading JavaScript libraries from a CDN (content delivery network). If you load jquery from http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js there's a good chance the user already has it in their browser cache so it will load instantly.
Related
I am developing a web app where I need to cache images so that it does not take time to load if user closes and opens website again.
By opening website again, images should be loaded from cache instead of reloading again.
Is this possible to implement with Angular?
I searched a lot online but I did not find proper solution for that yet.
You can use - HTML manifest Attribute
The manifest attribute specifies the location of the document's cache manifest.
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed resources from the server
The manifest attribute should be included on every page of your web application that you want cached.
The manifest file is a simple text file that lists the resources the browser should cache for offline access.
Detail understanding read this blog: https://www.html5rocks.com/en/tutorials/appcache/beginner/
My aim is - whenever the client requests a html page or a pdf file, javascript should check if the file has been requested before and is therefore cached.
If it is cached and does not match the current one on the server (checksum?), the cached file should be cleared.
This must be done with Javascript only, no PHP or .htaccess magic.
This is not javascript programmer task to do things like that. This is the browsers responsibility to manage cache.
Your only responsibility as a programmer (in this case server side programmer) is to make it possible for the browser to distinguish file versions. Most common way to do so is to add a random string to the resource url and change it each time the resource changes. When the browser sees a new url it downloads the resource.
We have a client with thousands of users (who all use Internet Explorer) and a large amount of javascript files that enhance their user experience with our product.
The problem I'm having is that any time we update one of these scripts there is no way to know whether the client is seeing the latest version. What we're having to do is tell our client to do a hard refresh (ctrl+f5) before viewing any changes. Obviously this approach is not ideal.
I know that browsers cache based on the url, so one could use something like
<script src='myScript.js?ver=1.2'>
to get around the issue, but this is not an option for us.
I was hoping that there's some kind of header property or something similar that we could use to tell IE not to cache these scripts.
Any ideas?
You can also version the filename itself like jQuery does:
<script src='myScript-v1-2.js'>
Then, each time you revise the script, you bump the version number and modify the pages that include it to point to the name of the new script. This is foolproof vs. caching, yet still allows your viewers to receive the maximum benefit of caching and requires no server configuration changes for the .js file.
A full solution will typically include setting a relatively short cache lifetime for your host web page and then allow the various resources (stylesheet files, JS files, images, etc...) to have longer cache lifetimes for maximum caching. Anything that is fingerprinted can have a very long cache lifetime. See the reference that fabianhjr posted about for ways to set the cache lifetime of the host web page. It can be done in the web page itself (<meta> settings) or in the http headers via the server.
If you turn off caching for your script file (which would likely have to be done at the web server level for a script file) then all your viewers will lose the performance benefit of caching and you will lose the bandwidth and load-saving benefit of caching. If you use a common .JS file across many pages (a common design pattern), your viewers will see slower performance on every page.
Everything you need to know about cache http://www.mnot.net/cache_docs/
http://www.mnot.net/cache_docs/#CACHE-CONTROL <-- HTTP Headers
i was wondering - when using jQuery (or any other javascript include) in my web,
does the browser cache it after the first download for all all pages (i assume yes) or will it download it every time?
2nd, when the user quits the browser and starts it again (for loading my website), will the jquery js file still be cached or will it completely download again?
thx
This depends on the browser and on how your server is set up. Have a look at the headers sent by the server along with the file (you can use a tool like Firebug to look at the headers). A good idea is to use the jQuery file hosted by google, since many other sites (including stackoverflow) use the same file. Then the browser can cache that file and never download it from your server. This page has a list of files hosted by google, and this page explains how to properly set your server up to (tell your browser to) cache files.
1: Yes, the browser caches all jscript/css includes
2: If the user does not clear his/her cache. Yes it will still be in the cache of the browser, even after closing and reopening it.
If your webserver serves jquery.js using a proper expires header, then yes, the browser will cache it.
http://developer.yahoo.com/performance/rules.html#expires
Yes the scripts will get cached between page views, along with the CSS files and images.
Yes as well, in general. The cache is normally maintained between browser restarts.
It will typically not be downloaded again, but unless your server explicitly tells the browser to cache it for a while, then it will send a request on each page load asking "was jquery.js updated?" which is almost as slow as just downloading it again.
You can test how it works on your site with Google's Page Speed or Yahoo's YSlow.
We have multiple pages on a website which require many of the same Javascript and CSS files.
How do we avoid those files being downloaded again if it has already been downloaded by the user browsing some other page?
If the file is in the same path, the browser should automatically cache it. You may want to explicitly specify the cache expiry time, if possible via your web server or programming environment.
If you use an HTTP traffic analyzer like Fiddler you should see that requests for JavaScript and CSS resources return an HTTP code 304 (Not Modified). This tells the browser "the version of the resource you have in your cache is the same as the one on the server so you don't need to download it again".
For even better performance you can explicitly set caching headers for these resources.
This caching tutorial has great info.
You should explicitly set caching headers if you want caching. www.fiddler2.com/redir/?id=httpperf