Your SlideShare is downloading. ×
Devon 2011-f-4-improve your-javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Devon 2011-f-4-improve your-javascript

499
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
499
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Improve your Javascript Performance Devon2011 DAUMWednesday, November 23, 11
  • 2. About Me Web Programmer 2002 ~ 2009 Frontend Programmer 2009 ~ FT Projects Cafe Tistory T-Edition Daum Editor Frontend Research / SupportWednesday, November 23, 11
  • 3. Wednesday, November 23, 11
  • 4. Why SlowWednesday, November 23, 11
  • 5. Javascript is an “interpreted” languageWednesday, November 23, 11
  • 6. ‘No’ Compiler OptimizationWednesday, November 23, 11
  • 7. But, JIT Compilers in Modern BrowserWednesday, November 23, 11
  • 8. JS Engine Benchmarks IE9 Chrome13 Opera11.5 Firefox7 Safari5.1 0ms 750ms 1500ms 2250ms 3000ms SunSpider Score in ms (lower is better) http://www.pcmag.com/article2/0,2817,2349496,00.asp#fbid=ce57IR_ZxrYWednesday, November 23, 11
  • 9. JS Engine Benchmarks IE7 IE9 Chrome13 Opera11.5 Firefox7 Safari5.1 0ms 750ms 1500ms 2250ms 3000ms SunSpider Score in ms (lower is better) http://www.pcmag.com/article2/0,2817,2349496,00.asp#fbid=ce57IR_ZxrYWednesday, November 23, 11
  • 10. Wednesday, November 23, 11
  • 11. Life of Javascript Connect Download Parse Execute DOM Interaction UI UpdatesWednesday, November 23, 11
  • 12. JS Engine cares only... Connect Network Latency Download Blocking Browser Parse Execute DOM Interaction DOM Interaction Cost UI Updates Rendering IssueWednesday, November 23, 11
  • 13. IE
  • 14.   Empire HTML5Wednesday, November 23, 11
  • 15. Usage Share of Web Browsers 2010/10 2011/4 2011/9 2011/10 IE8 IE6 IE7 IE9 Chrome Safari Firefox 2011/10/03 www.daum.net 기준Wednesday, November 23, 11
  • 16. Wednesday, November 23, 11
  • 17. Old Browsers Usage Share Mobile Environment Other BottlenecksWednesday, November 23, 11
  • 18. Code Tuning TechniqueWednesday, November 23, 11
  • 19. Scope ChainsWednesday, November 23, 11
  • 20. function initUI() { var body = document.body, links = document.getElementsByTagName("a"), i = 0, len = links.length; while (i < len) { update(links[i++]); } document.getElementById("go-btn").onclick = function() { start(); } bd.className = "active"; }Wednesday, November 23, 11
  • 21. function initUI() { var doc = document, body = doc.body, links = doc.getElementsByTagName("a"), i = 0, len = links.length; while (i < len) { update(links[i++]); } doc.getElementById("go-btn").onclick = function() { start(); } bd.className = "active"; }Wednesday, November 23, 11
  • 22. function initUI() { var doc = document, body = doc.body, links = doc.getElementsByTagName("a"), i = 0, len = links.length; while (i < len) { update(links[i++]); } doc.getElementById("go-btn").onclick = function() { start(); } bd.className = "active"; }Wednesday, November 23, 11
  • 23. Nested MembersWednesday, November 23, 11
  • 24. function toggle(element) { if (daum.util.dom.hasClass(element, "selected")) { daum.util.dom.removeClass(element, "selected"); } else { daum.util.dom.addClass(element, "selected"); } }Wednesday, November 23, 11
  • 25. function toggle(element) { var domutil = daum.util.dom; if (domutil.hasClass(element, "selected")) { domutil.removeClass(element, "selected"); } else { domutil.addClass(element, "selected"); } }Wednesday, November 23, 11
  • 26. L∞pWednesday, November 23, 11
  • 27. for (var i = 0; i < items.length; i++) { process(items[i]); }Wednesday, November 23, 11
  • 28. var k = items.length - 1; do { process(items[k]); } while (k--);Wednesday, November 23, 11
  • 29. Wednesday, November 23, 11
  • 30. Scope Chain Nested Member LoopWednesday, November 23, 11
  • 31. Scope Chain Nested Member LoopWednesday, November 23, 11
  • 32. Scope Chain FA IL Nested Member LoopWednesday, November 23, 11
  • 33. Real World BottleneckWednesday, November 23, 11
  • 34. Wednesday, November 23, 11
  • 35. DOM Reflow UI ThreadWednesday, November 23, 11
  • 36. Daum Top DOM visualization - http://www.aharef.info/static/htmlgraph/Wednesday, November 23, 11
  • 37. DOM Daum Top DOM visualization - http://www.aharef.info/static/htmlgraph/Wednesday, November 23, 11
  • 38. ‘The Document Object Model (DOM) is an application programming interface (API) for HTML and XML documents’Wednesday, November 23, 11
  • 39. ‘The Document Object Model (DOM) is an application programming interface (API) for HTML and XML documents’Wednesday, November 23, 11
  • 40. DOM is not part of javascript engine Javascript Engine DOM Engine JScript (jscript.dll) Trident (mshtml.dll) Nitro WebCore V8 WebCore TraceMonkey GeckoWednesday, November 23, 11
  • 41. ‘Give
  • 42.   me
  • 43.   your
  • 44.   money’Wednesday, November 23, 11
  • 45. DOM is Expensive Minimize DOM Access Avoid HTMLCollectionWednesday, November 23, 11
  • 46. Wednesday, November 23, 11
  • 47. Wednesday, November 23, 11
  • 48. ReflowWednesday, November 23, 11
  • 49. UI Updates = Reflow + RepaintWednesday, November 23, 11
  • 50. Parsing HTML to Render tree Layout of the Painting the construct the construction render tree render tree DOM treeWednesday, November 23, 11
  • 51. Parsing HTML to Render tree Layout of the Painting the construct the construction render tree render tree DOM treeWednesday, November 23, 11
  • 52. Parsing HTML to Render tree Layout of the Painting the construct the construction render tree render tree DOM tree { width, height, x, y } { width, height, x, y } { width, height, x, y } { width, height, x, y } { width, height, x, y } { width, height, x, y }Wednesday, November 23, 11
  • 53. Parsing HTML to Render tree Layout of the Painting the construct the construction render tree render tree DOM treeWednesday, November 23, 11
  • 54. Wednesday, November 23, 11
  • 55. Causing Reflow Page renders initially Window is resized Visible DOM elements are added or removed Element change position Element change size margin, padding, border, width, height text changes, image replaced with different sizeWednesday, November 23, 11
  • 56. Reflow is Expensive Batch Style Changes Use Flow-Off Technique Avoid Geometry AccessWednesday, November 23, 11
  • 57. Wednesday, November 23, 11
  • 58. Wednesday, November 23, 11
  • 59. UI ThreadWednesday, November 23, 11
  • 60. UI Thread Draw UI Updates Execute JavascriptWednesday, November 23, 11
  • 61. Wednesday, November 23, 11
  • 62. Only one job can happen at a timeWednesday, November 23, 11
  • 63. Jobs for UI Updates and Javascript Execution are added to a UI QueueWednesday, November 23, 11
  • 64. button.addEventListener("click", function handleClick() { doHeavyJob(); resultDIV.innerHTML = "Finish!"; });Wednesday, November 23, 11
  • 65. UI Thread UI Queue User clicks UI Update Button Javascript handleClick() TimeWednesday, November 23, 11
  • 66. UI Thread UI Update Button UI Queue User clicks UI Update Javascript Button handleClick() Javascript handleClick() TimeWednesday, November 23, 11
  • 67. UI Thread UI Update Javascript Button handleClick() UI Queue User clicks UI Update Javascript Button handleClick() Javascript handleClick() TimeWednesday, November 23, 11
  • 68. UI Thread UI Update Javascript Button handleClick() UI Queue User clicks UI Update Javascript Button handleClick() Javascript handleClick() TimeWednesday, November 23, 11
  • 69. UI Thread UI Update Javascript Button handleClick() UI Queue User clicks User clicks UI Update Javascript UI Update Button handleClick() Button Javascript Javascript handleClick() otherLogic() TimeWednesday, November 23, 11
  • 70. UI Thread UI Update Javascript Button handleClick() UI Queue User clicks User clicks User clicks UI Update Javascript UI Update UI Update Button handleClick() Button Javascript Javascript Javascript handleClick() handleClick() UI Update Javascript TimeWednesday, November 23, 11
  • 71. UI Thread UI Update Javascript Button handleClick() User clicks User clicks UI Queue User clicks User clicks User clicks User clicks User clicks UI Update Javascript UI Update UI Update UI Update Button handleClick() Button Javascript Javascript Javascript Javascript handleClick() handleClick() UI Update UI Update Javascript TimeWednesday, November 23, 11
  • 72. Wednesday, November 23, 11
  • 73. “Javascript that executes in whole seconds is probably doing something wrong...” - Brendan Eich, Creator of Javascript One SecondWednesday, November 23, 11
  • 74. How Long Is Too Long? “0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.” - Jakob Nielsen, 1968Wednesday, November 23, 11
  • 75. Yield control to UI UpdateWednesday, November 23, 11
  • 76. Yielding with TimersWednesday, November 23, 11
  • 77. Wednesday, November 23, 11
  • 78. Wednesday, November 23, 11
  • 79. ConclusionWednesday, November 23, 11
  • 80. 1. Digg the low level JS Perf. characteristics But, premature optimization is evilWednesday, November 23, 11
  • 81. 2. Don’t touch the SLOW PART! DOM Reflow UI ThreadWednesday, November 23, 11
  • 82. Make the Web Faster Make the Web ResponsiveWednesday, November 23, 11
  • 83. Thank YouWednesday, November 23, 11