Load remote script only if cached, fallback to local - javascript

I'm guessing this is impossible, but maybe someone has thought of something smart already:
Would it be possible to load jQuery using the version that's in the browser cache (from some major CDN, say) if it's cached, and otherwise load it from my site? This way, users would never make a request to the CDN because of reaching our site, but the site would stay fairly fast for most users.
Ideally one would do <script src="./jquery.min.js" same-as-cached="https://thecdn/jquery.min.js" integrity="sha-…"/>, but since AFAIK nothing like that exists, is there a way to get the script from cache without making a request?

Related

php or JavaScript check if a user has visited google [duplicate]

Is there anyway to check on a client if jQuery was loaded before from a CDN? I mean to have code like this:
if (jQuery.isLoadedFromCDN)
//DoNothing
else
//load from internal resource
NOTE that I don't want to check that jQuery is loaded, but specifically if it was loaded from a CDN.
The context is that I have an internal LAN web app that uses jQuery, loading jQuery from the LAN is definitely faster but if it already was downloaded before from a CDN (which is probably the case) then I just want to use that otherwise I want to get it from our internal resource not the cdn. The bandwidth saving is definitely not huge, but I am more curious to know if that's technically possible.
I'm guessing you're checking to see if jQuery was loaded from the Google Libraries API?
Your browser will cache jQuery whether it's from the CDN or from your LAN. If it's already in the cache from a previous retrieval from the CDN, it'll load faster than from your LAN. If it's not already in your cache from either a previous visit to your site, or another site using the same CDN, it'll only need to load once: subsequent visits will load from the cache.
Splitting the URL for jQuery between the CDN and your LAN will just cause two copies to get cached. Let the browser cache do what it was meant to do. :)
This should do it:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.4.js"%3E%3C/script%3E'))</script>
You need to adapt the path for the fallback, which should be located at your domain.
to my knowledge, that's not really possible.
2 things jump to mind however that can help you:
Use Etags: Identify your resources on the webserver side. This way, your browser does that work for you: identify if a resource is already loaded, regardless from the domain it was loaded from
If you really want to know which domain jQuery was loaded from, you can do dummy AJAX requests. You can only do AJAX requests from the same domain your library was loaded from (except ofcourse when doing a JSONP request). So if your jQuery was loaded from your LAN resource, you will get trplies to AJAX requests to your LAN webserver, and that rules out the CDN.
Hope it helps,
Bart

Load js files from the web or serve them yourself?

I have had this question for awhile and am surprised that I have yet to come across a good/complete answer to it.
The question is essentially this:
When it comes to loading js files, in what situations should you load them from the web if available versus serving them up yourself? What case typically allows for the lowest latency?
E.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
vs.
<script src="js/jquery-1-11-3.min.js"></script>
Complete answer: Both.
Loading it off of the web will benefit you in a couple of ways:
1) There is a limit to the number of maximum open HTTP requests a browser can have. However, this limit is per domain. So reaching out to google's servers will not prevent you from loading your CSS/images.
2) It's very likely that the user will already have that file cached, so they will get an HTTP 304 not changed response, and not have to download the file.
Now, with that said, sometimes the server will be down, or network issues will otherwise stop you from loading that file. When that happens, you need a workaround, which we can do like so:
<script>
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-2.0.0.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
Put this tag AFTER loading JQuery from the CDN, if the load failed, jQuery will be undefined and proceed to load it from the local source. If the load from the CDN worked, then this block will be skipped over.
Including from own server pros:
Technically google servers can be down, and your website won't load correctly.
people, that dont trust google and have it blocked, script blocked etc.
These ppl too wouldnt want to include the file from google directly.
connections to google can have higher latency. if you have your audience in your own country and a good provider, your connec can be faster than googles.
contra:
higher webserver traffic
more connections
higher CPU impact
You have to decide for yourself, which one is better for you. For smaller sites I'd go for local stored file.

Add unused javascript file on login page

I have a web application where many jquery files needed after login page. Can i include it on the login page so that on the next page the browser don't make a request for the file.
Means the files are used from the browser cache. Is it possible?
Yes, you can (as #Juhana already mentioned).
You can also use a CDN like Google to deliver jQuery or other common libraries. If someone already visited another site including jQuery via Google CDN, it would be already cached by his browser when logging in to your site (if you are also using the CDN of Google).
Yes, it is possible. Since you don't want to slow down login page, it is better to dynamically insert it on the page after it is loaded and rendered so user can interact with it without any delays that loading of this file might impose. Also note that this doesn't give you 100% guarantee that file will be in cache, since browser might choose not to store it or delete it before user visits your next page according to its policies and space limitations.
You can request file anywhere with jquery $.getScript() method. If server caching is ON everything will be fine.

Versioning Javascript Files to Prevent Unnecessary Cache Clearing

I version all of my client side JS files like "/js/myfile.js?v=3903948" so that my clients don't need to clear their browser cache to ensure they get the updated files. But every time I push an update, without fail, at least one person runs into a problem where they are running the old version and get some kind of error. I used to think that this was just them having already been on the page during the release and just needing to reload the browser, but this happened to me today when I was definitely not previously on the page. I browsed to the live site and was running the old code. I needed to do a browser refresh on that page to get the new file.
What can cause this?
PS I was using Chrome on Win7, but I have seen clients report this before on all different browsers.
If your main web page can also be cached, then the old version of that page can be requesting the old version of the JS file. JS file versioning works best if the page that actually refers to the JS file cannot be cached or has very short caching time.
I agree with jfriend00 about the webpage itself being cashed and thus requesting the old javascript version.
To prevent this, you can have the javascript file loaded by an ajax (Post) request, either requesting the server what is the accurate(latest) version number to download, or requesting the javascript itself and inserting it, e.g. in the head of the page.
Edit: see for example here
I make a quick AJAX request to the server for the version it expects them to have, then force them to refresh the page if the client's script is old.
Seems that proxy or some load balancer is serving old content instead of new. Also check IIS/webserver settings how are these files cached/expired.
You can check what is going on on the wire with tools like Fiddler.

How does one detect a browser’s cache settings (on/off)

How does one detect a browser’s cache settings either client side or server side (ASP.NET). Basically trying detect if the users browser has caching on or off. If it's off, I'd like to either redirect them to a page with error message to tell them to turn it on. Is this possible?
You can't reliably detect cache settings as this information is not passed on from the browser.
If resources that should be cached are being requested repeatedly from the browser, this may be an indication that caching is turned off, but that might not be the case.
As for wanting to redirect to an error page - some browsers and environments simply do not have caching, do you want to penalize these users?
Caching is a mechanism to reduce load by reducing the number of requests, don't use it for anything else.
A browser doesn't send out its cache setting to the server.
Maybe you are trying to make some of your page components (images, scripts, etc.) load / interact smoother? If it is, maybe you could try to optimize your page (e.g. sprite, minimized JavaScript) so you don't have to worry too much whether the browser decides to cache your page.
Also, in general, rather than redirecting to a different page, you might also consider simply showing a message on the same page (i.e. 1 less HTTP request).

Categories