Click to edit Master title style

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.

Smart tags, smarter marketing

JavaScript and other elements

Script Loading Case Study 2011

Click to edit Master title stylePurpose

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

Click to edit Master title styleMethodology

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

Click to edit Master title styleWhat we 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

Click to edit Master title styleHow scripts used to load

Private and confidential, copyright TagMan 2009

FF 3.5 IE7 CR6

• Browsers used to download scripts sequentially• Chrome was the first browser to download scripts in advance

4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s

Downloading Executing Onload event DOM Loaded

Click to edit Master title styleSyncronous script loading now

Private and confidential, copyright TagMan

FF 5 IE 9 CR 12

• Browsers now look ahead and download what is in the HTML• Load times in FF & IE now match those of legacy Chrome

4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s

Downloading Executing Onload event DOM Loaded

Click to edit Master title styleAsyncronous scripts don’t block

Private and confidential, copyright TagMan

FF 5 IE 9 CR 12

• Chrome and Firefox support async scripts that do not block• Not guaranteed to executed in original order (see FF above)

4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s

Downloading Executing Onload event DOM Loaded

Click to edit Master title styleNeither do defered ones

Private and confidential, copyright TagMan 2009

FF 5 IE 9 CR 12

• Script defer is similar to async but only works in IE & Safari 4+• Scripts are loaded after DOM ready and executed in order

4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s

Downloading Executing Onload event DOM Loaded

Click to edit Master title styleBut CSS and scripts don’t play nice

Private and confidential, copyright TagMan

FF 5 IE 9 CR 12

• Would expect above example to take 1s to “loaded”• FF5 appears to downloads CSS 4 & 6 twice

4 external css (.5s) download time, 2 inline scripts, code blocks page for .5s

Downloading Executing Onload event DOM Loaded

Click to edit Master title styleDynamic load turns the clock back

Private and confidential, copyright TagMan

FF 5 IE 9 CR 12

• Dynamically loading scripts prevents the browser preloading them• Performance is similar to legacy script loading, even in chrome

4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s

Downloading Executing Onload event DOM Loaded

Click to edit Master title styleDynamic Async Scripts work fine

Private and confidential, copyright TagMan

FF 5 IE 9 CR 12

• Dynamic appending of async scripts negates the issue• Results equivalent to native async script injection

4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s

Downloading Executing Onload event DOM Loaded

Click to edit Master title styleDynamic CSS with in-line scripts

Private and confidential, copyright TagMan

FF 5 IE 9 CR 12

• Firefox performance when CSS inserted dynamically• IE & Chrome CSS blocks scripts and back to full blocking

4 external CSS (.5s) download time, 2 inline scripts, code blocks page for .5s

Downloading Executing Onload event DOM Loaded

Click to edit Master title styleIframes are not good either

Private and confidential, copyright TagMan

FF 5 IE 9 CR 12

• Iframes are the slowest HTML element to create & block partially• Big delays between loading and page completion, hard to render

4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s

Downloading Executing Onload event DOM Loaded

Click to edit Master title styleJavaScript is not executed in parallel

Private and confidential, copyright TagMan

FF 5 IE 9 CR 12

• Async means run independently to other browser processes• But only one JavaScript process can execute at a time

5 inline scripts, code blocks page for .5s

Downloading Executing Onload event DOM Loaded

Click to edit Master title styleWeb Workers allow parallel scripts

Private and confidential, copyright TagMan

FF 5 IE 9 CR 12

• Part of HTML5 spec, will be supported in IE 10 (Fall 2011)• Scripts execute independently of each other and Dom creation

4 web workers, 2 inline scripts, code blocks page for .5s

Downloading Executing Onload event DOM Loaded

Click to edit Master title styleIE4 supported preloading

Private and confidential, copyright TagMan

FF 5 IE 9 CR 12

• IE aborts download of external 1 when element is destroyed• Scripts in IE execute on append, other browsers start loading then

3 external scripts (.5s) download time, 1 inline script- 0.5s code block, Script 2 & 3 appended after inlines

Downloading Executing Onload event DOM Loaded

Click to edit Master title styleSmart Loading sync scripts

Private and confidential, copyright TagMan

FF 5 IE 9 CR 12

• Similar to how browsers now pre-load hardcoded synchronous scripts • Best of both worlds, dynamic scripts and enhanced performance

4 external scripts (.5s) download time, 2 inline scripts, code blocks page for .5s

Downloading Executing Onload event DOM Loaded

Click to edit Master title styleCode 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