This case study is to understand how JavaScript interacts with other browser elements to cause performance issues. It highlight browser improvements since Steve Sounder’s original book and explore the challenges created via dynamic script loading.

1. Click to edit Master title style
JavaScript and other elements
Script Loading Case Study 2011
Smart tags, smarter marketing
CONFIDENTIALITY NOTICE: The information contained in this presentation is intended solely for the use of the
attendee companies and contains information that is privileged, confidential and subject to copyright.

2. Purpose edit Master title style
Click to
To explore the topics first raised by Steve Sounders in his book
Even Faster Websites
To understand how JavaScript interacts with other browser
elements to cause performance issues
To highlight browser improvements since Steve’s original book
and explore the challenges created via dynamic script loading
Private & Confidential Copyright TagMan 2011

3. Methodology Master title style
Click to edit
20 standalone test pages so far and rising
Tests look at impact of coding elements into the HTML versus
dynamic insertion by JavaScript
Core JavaScript function takes a timestamp and loops until it is
30 seconds later
Focused on latest available browser – Firefox 5, Internet
Explorer 9 and Chrome 12
Private & Confidential Copyright TagMan 2011

4. What we edit Master title style
Click to found
Browsers have got a lot better since Steve’s book
But they still can’t deal with dynamic script loading
Asynchronous script loading is the way ahead
Smart Loading can solve the problem until everyone goes async
Private & Confidential Copyright TagMan 2011

5. Click scripts Master title style
How to edit used to load
4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s
FF 3.5 IE7 CR6
Downloading Executing Onload event DOM Loaded
• Browsers used to download scripts sequentially
• Chrome was the first browser to download scripts in advance
Private and confidential, copyright TagMan 2009

6. Click to edit Master title style
Syncronous script loading now
4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s
FF 5 IE 9 CR 12
Downloading Executing Onload event DOM Loaded
• Browsers now look ahead and download what is in the HTML
• Load times in FF & IE now match those of legacy Chrome
Private and confidential, copyright TagMan

7. Click to edit Master title style
Asyncronous scripts don’t block
4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s
FF 5 IE 9 CR 12
Downloading Executing Onload event DOM Loaded
• Chrome and Firefox support async scripts that do not block
• Not guaranteed to executed in original order (see FF above)
Private and confidential, copyright TagMan

8. Click to edit Master ones style
Neither do defered title
4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s
FF 5 IE 9 CR 12
Downloading Executing Onload event DOM Loaded
• Script defer is similar to async but only works in IE & Safari 4+
• Scripts are loaded after DOM ready and executed in order
Private and confidential, copyright TagMan 2009

9. Click to edit Master title style nice
But CSS and scripts don’t play
4 external css (.5s) download time, 2 inline scripts, code blocks page for .5s
FF 5 IE 9 CR 12
Downloading Executing Onload event DOM Loaded
• Would expect above example to take 1s to “loaded”
• FF5 appears to downloads CSS 4 & 6 twice
Private and confidential, copyright TagMan

10. Click to edit Master title clock back
Dynamic load turns the style
4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s
FF 5 IE 9 CR 12
Downloading Executing Onload event DOM Loaded
• Dynamically loading scripts prevents the browser preloading them
• Performance is similar to legacy script loading, even in chrome
Private and confidential, copyright TagMan

11. Click to edit Master titlework fine
Dynamic Async Scripts style
4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s
FF 5 IE 9 CR 12
Downloading Executing Onload event DOM Loaded
• Dynamic appending of async scripts negates the issue
• Results equivalent to native async script injection
Private and confidential, copyright TagMan

12. Click to edit Masterin-line scripts
Dynamic CSS with title style
4 external CSS (.5s) download time, 2 inline scripts, code blocks page for .5s
FF 5 IE 9 CR 12
Downloading Executing Onload event DOM Loaded
• Firefox performance when CSS inserted dynamically
• IE & Chrome CSS blocks scripts and back to full blocking
Private and confidential, copyright TagMan

13. Click to edit Master title style
Iframes are not good either
4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s
FF 5 IE 9 CR 12
Downloading Executing Onload event DOM Loaded
• Iframes are the slowest HTML element to create & block partially
• Big delays between loading and page completion, hard to render
Private and confidential, copyright TagMan

14. Click to edit Master title style parallel
JavaScript is not executed in
5 inline scripts, code blocks page for .5s
FF 5 IE 9 CR 12
Downloading Executing Onload event DOM Loaded
• Async means run independently to other browser processes
• But only one JavaScript process can execute at a time
Private and confidential, copyright TagMan

15. Click Workers allow title style
Web to edit Master parallel scripts
4 web workers, 2 inline scripts, code blocks page for .5s
FF 5 IE 9 CR 12
Downloading Executing Onload event DOM Loaded
• Part of HTML5 spec, will be supported in IE 10 (Fall 2011)
• Scripts execute independently of each other and Dom creation
Private and confidential, copyright TagMan

16. Click to edit Master title style
IE4 supported preloading
3 external scripts (.5s) download time, 1 inline script- 0.5s code block, Script 2 & 3 appended after inlines
FF 5 IE 9 CR 12
Downloading Executing Onload event DOM Loaded
• IE aborts download of external 1 when element is destroyed
• Scripts in IE execute on append, other browsers start loading then
Private and confidential, copyright TagMan

17. Click to edit Master title style
Smart Loading sync scripts
4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s
FF 5 IE 9 CR 12
Downloading Executing Onload event DOM Loaded
• Similar to how browsers now pre-load hardcoded synchronous scripts
• Best of both worlds, dynamic scripts and enhanced performance
Private and confidential, copyright TagMan

18. Click to edit Master title style
Code examples
Native / hardcoded sync script
– <script src=“myscript.com”></script>
In-line script
– <script>var start=+new Date();while ( (+new Date()-start) < 500) {};</script>
Native / hardcoded css
– <link rel="stylesheet" href=“mystyle.css” type="text/css“ />
Dynamic script / css / iframe etc
– var el=document.createElement(„script‟); el.src=“myscript.js”;
document.getElementsByTagName('script')[0].parentNode. insertBefore(el,null);
Webworkers
– var worker = new Worker('waitworker.js');
worker1.addEventListener('message', function(e) { log(e.data); }, false);
worker.postMessage({ cmd: 'start', name: 'worker 1'});
Private & Confidential Copyright TagMan 2011