We Keep Coding

Load remote script only if cached, fallback to local

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?

jQuery .load() with Relative Path - XMLHttpRequest Cannot Load - Workaround?

I have a locally-stored project whose directory structure is the following (I minimized non-relevant folders):
What I want to do is that in an HTML file, like index.html, to add a <header> such that its contents would be loaded from an external HTML file, so all of what I'll have to write in index.html would be <header>, and my solution would load the content automatically.
To do this, I'd like to use JavaScript (preferably jQuery, but I'll accept other solutions if they work and jQuery doesn't, or if they work and executed faster than jQuery).
I don't think that I should use an <iframe> due to the fact that it'd probably increase loading times more than using jQuery/JavaScript (which, like I said, is what works now, when the website is live).
Right now, I'm using the jQuery .load() function. I don't know much about jQuery, but I've been told that it should work locally - and it doesn't, for me.
My browser's console shows me the problem:
jquery-3.1.1.min.js:4 XMLHttpRequest cannot load file:///C:/Users/GalGr/Desktop/eiomw/header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
And I'm trying to overcome it.
This code works on my live website - it might not be updated to the code of the files that I linked to below, but it doesn't matter - their code matters.
This is the index.html file:
index.html
This is the header.html file:
header.html
This is `main_script.js:
main_script

The reason you're having a problem with this locally is mainly down to security measures in your browser.
Essentially whenever you're using jQuery's load() function it makes a separate HTTP request (approach known as AJAX) for the file or URL you give it.
Modern browsers enforce that the URL you request using AJAX methods is from the same origin (server) as a security feature to stop pages randomly loading content from anywhere on the internet in the background. In your case it seems like this shouldn't affect you because you're browsing your pages locally and the request you're making using load() is also for a local file (header.html).
However, I am assuming you're just opening up the page directly in your browser, so your browser's URL will look something like 'file:///C:/Users...' (similar example in the error message you gave). This means your browser is directly reading the file from disk and interpreting it as HTML to display the page. It seems likely you don't actually have a local HTTP server hosting the page, otherwise the URL would start with 'http://'. It is for this reason that the browser is giving the security error, even though your AJAX request for header.html is technically from the same source as the page it is executed on.
Your server will have an HTTP server which it's using to host the pages, and so everything works fine as you're then using HTTP as normal, and this security feature does not get in your way.
I would suggest that you simply install an HTTP server locally on your dev machine. You don't even need to 'install' one per-se, there are loads of development HTTP servers that just run standalone, so you start them up when you want to browse your local HTML files. As you appear to be on Windows, I'd check out either IIS (Windows' HTTP server) or IIS Express (like IIS but runs standalone). There are also many others available like Apache, Nginx, etc. etc.
If you do this, you can host your pages on something like 'http://localhost/index.html'. Then, any AJAX requests you make for local files will work fine, just like your server.
Hope that makes sense, and I'm not telling you something you already know?

Why not using something more straight foreword like mustache.js ?

I found a solution:
Using phpStorm's built-in localhost, I was able to emulate a server that handles my requests and responses.

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.