0
Click to edit Master title style           JavaScript and other elements           Script Loading Case Study 2011         ...
Purpose edit Master title styleClick to  To explore the topics first raised by Steve Sounders in his book  Even Faster Web...
Methodology Master title styleClick to edit 20 standalone test pages so far and rising Tests look at impact of coding elem...
What we edit Master title styleClick to found  Browsers have got a lot better since Steve’s book  But they still can’t dea...
Click scripts Master title styleHow to edit used to load 4 external scripts (.5s) download time, 2 inline scripts, code bl...
Click to edit Master title styleSyncronous script loading now 4 external scripts (.5s) download time, 2 inline scripts, co...
Click to edit Master title styleAsyncronous scripts don’t block 4 external scripts (.5s) download time, 2 inline scripts, ...
Click to edit Master ones styleNeither do defered title 4 external scripts (.5s) download time, 2 inline scripts, code blo...
Click to edit Master title style niceBut CSS and scripts don’t play 4 external css (.5s) download time, 2 inline scripts, ...
Click to edit Master title clock backDynamic load turns the style 4 external scripts (.5s) download time, 2 inline scripts...
Click to edit Master titlework fineDynamic Async Scripts style 4 external scripts (.5s) download time, 2 inline scripts, c...
Click to edit Masterin-line scriptsDynamic CSS with title style 4 external CSS (.5s) download time, 2 inline scripts, code...
Click to edit Master title styleIframes are not good either 4 external scripts (.5s) download time, 2 inline scripts, code...
Click to edit Master title style parallelJavaScript is not executed in 5 inline scripts, code blocks page for .5s         ...
Click Workers allow title styleWeb to edit Master parallel scripts 4 web workers, 2 inline scripts, code blocks page for ....
Click to edit Master title styleIE4 supported preloading 3 external scripts (.5s) download time, 1 inline script- 0.5s cod...
Click to edit Master title styleSmart Loading sync scripts 4 external scripts (.5s) download time, 2 inline scripts, code ...
Click to edit Master title styleCode examples  Native / hardcoded sync script   – <script src=“myscript.com”></script>  In...
Upcoming SlideShare
Loading in...5
×

Smart tag loading Script loading case study 2011

1,743

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,743
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Smart tag loading Script loading case study 2011"

  1. 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. 2. Purpose edit Master title styleClick 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. 3. Methodology Master title styleClick 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. 4. What we edit Master title styleClick 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. 5. Click scripts Master title styleHow 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. 6. Click to edit Master title styleSyncronous 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. 7. Click to edit Master title styleAsyncronous 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. 8. Click to edit Master ones styleNeither 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. 9. Click to edit Master title style niceBut 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. 10. Click to edit Master title clock backDynamic 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. 11. Click to edit Master titlework fineDynamic 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. 12. Click to edit Masterin-line scriptsDynamic 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. 13. Click to edit Master title styleIframes 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. 14. Click to edit Master title style parallelJavaScript 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. 15. Click Workers allow title styleWeb 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. 16. Click to edit Master title styleIE4 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. 17. Click to edit Master title styleSmart 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. 18. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×