4

Say I've got this script tag on my site (borrowed from SO). 

<script type="text/javascript" async="" 
      src="http://edge.quantserve.com/quant.js"></script>

If edge.quantserve.com goes down or stops responding without returning a 404, won't SO have to wait for the timeout before the rest of the page loads? I'm thinking Chaos Monkey shows up and blasts a server that my site is depending on, a server that isn't part of a CDN and has a poor failover.

What's the industry standard way to handle this issue? I couldn't find a dupe on SO, maybe I'm searching for the wrong terms.

Update: I should have looked a bit more closely at the SO code, there's this at the bottom: 

<script type="text/javascript">var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-5620270-1']);
        _gaq.push(['_setCustomVar', 2, 'accountid', '14882',2]); 
_gaq.push(['_trackPageview']);
    var _qevents = _qevents || [];
    (function(){
        var s=document.getElementsByTagName('script')[0];
        var ga=document.createElement('script');
        ga.type='text/javascript';
        ga.async=true;
        ga.src='http://www.google-analytics.com/ga.js';
        s.parentNode.insertBefore(ga,s);
        var sc=document.createElement('script');
        sc.type='text/javascript';
        sc.async=true;
        sc.src='http://edge.quantserve.com/quant.js'; 
        s.parentNode.insertBefore(sc,s);
    })();
    </script>

OK, so if the quant.js file fails to load, it's creating a script tag with ga.async=true;. Maybe that's the trick.

Possible answer: https://stackoverflow.com/a/1834129/30946

Improve this question
8
  • For something like analytics, there really isn't a problem. For other application-level type scripts, you might want to alert the user of the problem, or refresh the page automatically. (Gmail does this.) Commented Jul 31, 2012 at 21:24
  • Couldn't you fallback to a local copy? Ex (using jQuery): <script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script> Commented Jul 31, 2012 at 21:26
  • Are you mostly concerned about the long wait time before the external request times out? The first answer and above comment solve the other problem. Commented Jul 31, 2012 at 21:29
  • @j08691 sure, but then you have to deal with making sure that both are the same. In the case of quant.js, it doesn't have a version number in the name, which makes it harder. Commented Jul 31, 2012 at 21:29
  • 1
    +1 for asking and caring. I've been once unable to search for flights in a major european airline because I've blocked google analytics and there was a JS error that prevented from continuing JS execution on the page (e.g. submitting <form>). Commented Jul 31, 2012 at 21:39

3 Answers 3

Reset to default
1

Generally, it's tricky to do it well and cross-browser.

Some proposals:

  1. Move the script to the very bottom of the HTML page (so that almost everything is displayed before you request that script)
  2. Move it to the bottom and wrap it in <script>document.write("<scr"+"ipt src='http://example.org/script.js'></scr"+"ipt>")</script> or the way you added after update (document.createElement('script'))
  3. A last option is to load it via XHR (but this works only for same-domain, or cross-domain only if the CORS is enabled on a third-party server); you can then use timeout property of the XHR (for IE and Fx12+), and in the other browsers, use setTimeout and check the XHR's readyState. It's kind of convoluted and very non-cross-browser for now, so the option 2 looks the best.
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I think you're right. After looking at the way that SO is loading, the first GET returns HTML that has a lazy script loader (your answer #2, with document.createElement('script'). I suspect this is the way that the rest of the 'big leagues' do it.
1

Make a copy of the file on your server and use this. it will load your copy only if the one from the server has failed to load

<script src="http://edge.quantserve.com/quant.js"></script>
    <script>window.quant || document.write('<script src="js/quant.js"><\/script>')</script>
Improve this answer

2 Comments

Doesn't this still have the 'wait for timeout' issue?
a tradeoff is always there. you can also host the file in google servers -code.google.com-
0

To answer your question about the browser having to wait for the script to load before the rest of the page loads, the answer to that would typically be no. Typical browsers will have multiple threads processing the download of the page and linked content (CSS, images, js). So the rest of the page should be loaded, though the user's browser indicator will still show the page trying to load until the final request is fulfilled or timed out.

Depending on the nature of the resource you are trying to load, this will obviously effect your page differently. Typically, if you are worried about this, you can host all your files on a common CDN (or your website if it is not that highly trafficked), that way at least if one thing fails, chances are everything is failing and you have a bigger issue to contend with :)

Improve this answer

3 Comments

It's not true that page load is not blocked by scripts. If you have a <script> in the top of the page, it blocks page rendering until the time the script is either loaded or times out (that's because browser doesn't know what the content of that script is, it may contain document.write for instance). That's why there are recommendations to either load scripts asynchronously, or place <script></script> at the very bottom of the page.
In IE it's supported from 10+, and considering IE as the biggest offender when it comes to performance, it's still good to move scripts to the bottom as much as possible :) A good book on overall HTML pages perf: NC Zakas: High Performance JavaScript
BTW you can see, that in SO, it's in fact in the very bottom + added dynamically instead of using <script></script> in the <head>. This was (scripts in the head) an "old school" and "elegant" solution, but not very good for perf.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.