如何防止外部JS阻止您的网站加载？

Question

how do I prevent slow loading external js files from blocking the loading process of the whole website (because the browser processes 2 requests only at a time)?

Let's say I want to include the sharethis button but the server is encountering heavy load and needs to long to serve my request, how can I force the rest to load anyway. Or should I add the external scripts after the site has loaded already?

I'm using RoR with jQuery.

Best, Ole

Answer 1

Personally I would load the extra items after the ones that you need.

For example add the code to bottom of the page so that jQuery has already loaded and then load them from jQuery like below

$(document).ready(function(){
  $.getScript("urlofscript");

});

Details of getScript() here

Answer 2

You should dinamycally load the external JavaScripts by using $(document).ready() function of jQuery.

You'll have to create the <script> elements and append them to your document.

Answer 3

place your javascripts the end of the page, just before < /body>

Answer 4

Definitely place this blocking script at the end of your page, before </body> .

Or if you want to lazily load it / don't actually need the script for the page to load, then the document.write() option is good.

I also recommend reading the web page optimization rules from this page: http://code.google.com/speed/page-speed/docs/rtt.html .

Or read either of Steve Souder's books: "High Performance Websites" and "Even Faster Websites"

Answer 5

Just put the <script> elements at the end of the document (just before the </body> tag).