smart tag loading script loading case study 2011
DESCRIPTION
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.TRANSCRIPT
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