Comments on: Loading Scripts Without Blocking

By: Steve Souders

Steve Souders — Fri, 16 Sep 2011 15:16:55 +0000

@Kail: Thanks for that update. It’s very significant and perhaps breaks some of my older examples. I know it broke other JS loaders, such as labjs.

By: Kail

Kail — Fri, 16 Sep 2011 04:40:21 +0000

Hi Steve,

I noticed that FF did not ensure order using “Script DOM Element” since its version 3.6.

thx,
Kail

By: Steve Souders

Steve Souders — Tue, 24 May 2011 03:51:36 +0000

@seaverbo: You have to read the entire page in EFWS. It says "In Firefox, the stylesheet and iframe download in parallel, but the iframe’s resources are blocked by the stylesheet." That's also stated again in the example from that page in EFWS.

By: seaverbo

seaverbo — Tue, 24 May 2011 02:57:23 +0000

EFWS 13.3.2 stylesheet before iframe said that in IE and FF stylesheet before iframe would block ifame.but in your first waterfall chart “Scripts block downloads in IE6&7, Firefox 2&3.0, Safari 3, Chrome 1, and Opera”, the iframe and stylesheet are downloaded in parallel,why??

By: Clark

Clark — Sat, 05 Feb 2011 02:49:34 +0000

Steve,

I am not sure what exactly I am missing, but I can not seem to get order of script execution preserved. I have read this blog as well as your book “Even Faster Websites”. I looked at the example you gave for “FF Ensured Order Execution” and did see that your scripts were loaded in the order called. I replaced your default scripts with my own and I don’t seem to get order of execution preserved. I have a line at the top of each script that writes out the innerHTML of a div tag, and when I refresh the page, they will write out in random orders, no matter which order they are called to load in.

Am I missing something, does “FF Ensured Order Execution” mean the scripts will be executed in the order they are loaded, so if one script is dependent on code in another script I can be sure the first called will be the first executed?

Any insight would be greatly appreciated. I put the url where I placed the demo in the website input field.

By: Steve Souders

Steve Souders — Tue, 24 Aug 2010 17:19:11 +0000

@Ramakrishnan: If these are inline scripts, it’s less of an issue. If these are external scripts, you could modify how telerik works so that it inserts scripts using an async technique. If you have more questions, please contact me directly.

By: Ramakrishnan

Ramakrishnan — Tue, 24 Aug 2010 07:01:54 +0000

Hi Steve Souders,
We are working on a web site which monitors the work flow of documents in an organization,
In this project we use telerik controls,which affects the performance of our site because it(Controls) generates scripts while rendering,
what should i do in order to achive high performance.

Thanks in advance.

By: Tim

Tim — Mon, 10 May 2010 14:45:12 +0000

Hi Steve,

There seems to be a lot of disagreement on StackOverflow about asynch JavaScript downloading.

http://stackoverflow.com/questions/2803305/javascript-how-to-download-js-asynchronously

Would you mind looking into this post and commenting.

You’re awesome. Many thanks.

By: Steve Souders

Steve Souders — Fri, 16 Apr 2010 03:41:11 +0000

@Tim: As I mentioned in the blog post, you can use Cuzillion to see all the techniques. One of the things I love about Cuzillion is that you can create test cases and share them easily. Here's a test page that shows 2 external scripts and an image. In FF 3.6 they all download in parallel.

By: Tim

Tim — Fri, 16 Apr 2010 01:47:30 +0000

@Steve

Am I doing something wrong, because using Firebug/WebInspect when I use the example code below – yes, my JavaScript downloads in parallel but my images are still blocked from download until the JavaScript has completed.

##################
var head = document.getElementsByTagName(“head”)[0];
var sTag1 = document.createElement(“script”);
sTag1.type = sTag1.type = “text/javascript”;
sTag1.src = “one.js”;
var sTag2 = document.createElement(“script”);
sTag2.type = sTag2.type = “text/javascript”;
sTag2.src = “two.js”;
head.appendChild(sTag1);
head.appendChild(sTag2);
##################

Would you mind posting the code to accomplish your Script Dom Element example.

Thanks