1. Improve your
Javascript
Performance
Devon2011 DAUM
Wednesday, November 23, 11

2. About Me
Web Programmer 2002 ~ 2009
Frontend Programmer 2009 ~
FT Projects
Cafe
Tistory T-Edition
Daum Editor
Frontend Research / Support
Wednesday, November 23, 11

3. Wednesday, November 23, 11

4. Why Slow
Wednesday, November 23, 11

5. Javascript is an
“interpreted” language
Wednesday, November 23, 11

6. ‘No’ Compiler
Optimization
Wednesday, November 23, 11

7. But, JIT Compilers
in Modern Browser
Wednesday, 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_ZxrY
Wednesday, 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_ZxrY
Wednesday, November 23, 11

10. Wednesday, November 23, 11

11. Life of Javascript
Connect
Download
Parse
Execute
DOM Interaction
UI Updates
Wednesday, November 23, 11

12. JS Engine cares only...
Connect Network Latency
Download Blocking Browser
Parse
Execute
DOM Interaction DOM Interaction Cost
UI Updates Rendering Issue
Wednesday, November 23, 11

13. IE

14. Empire
HTML5
Wednesday, 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 Bottlenecks
Wednesday, November 23, 11

18. Code Tuning Technique
Wednesday, November 23, 11

19. Scope Chains
Wednesday, 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 Members
Wednesday, 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∞p
Wednesday, 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
Loop
Wednesday, November 23, 11

31. Scope Chain
Nested Member
Loop
Wednesday, November 23, 11

32. Scope Chain
FA IL
Nested Member
Loop
Wednesday, November 23, 11

33. Real World Bottleneck
Wednesday, November 23, 11

34. Wednesday, November 23, 11

35. DOM
Reflow
UI Thread
Wednesday, 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 Gecko
Wednesday, November 23, 11

41. ‘Give

42. me

43. your

44. money’
Wednesday, November 23, 11

45. DOM is Expensive
Minimize DOM Access
Avoid HTMLCollection
Wednesday, November 23, 11

46. Wednesday, November 23, 11

47. Wednesday, November 23, 11

48. Reflow
Wednesday, November 23, 11

49. UI Updates = Reflow + Repaint
Wednesday, November 23, 11

50. Parsing HTML to
Render tree Layout of the Painting the
construct the
construction render tree render tree
DOM tree
Wednesday, November 23, 11

51. Parsing HTML to
Render tree Layout of the Painting the
construct the
construction render tree render tree
DOM tree
Wednesday, 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 tree
Wednesday, 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 size
Wednesday, November 23, 11

56. Reflow is Expensive
Batch Style Changes
Use Flow-Off Technique
Avoid Geometry Access
Wednesday, November 23, 11

57. Wednesday, November 23, 11

58. Wednesday, November 23, 11

59. UI Thread
Wednesday, November 23, 11

60. UI Thread
Draw UI Updates
Execute Javascript
Wednesday, November 23, 11

61. Wednesday, November 23, 11

62. Only one job can happen at a time
Wednesday, November 23, 11

63. Jobs for UI Updates and Javascript Execution
are added to a UI Queue
Wednesday, 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()
Time
Wednesday, November 23, 11

66. UI Thread
UI Update
Button
UI Queue
User clicks
UI Update Javascript
Button handleClick()
Javascript
handleClick()
Time
Wednesday, November 23, 11

67. UI Thread
UI Update Javascript
Button handleClick()
UI Queue
User clicks
UI Update Javascript
Button handleClick()
Javascript
handleClick()
Time
Wednesday, November 23, 11

68. UI Thread
UI Update Javascript
Button handleClick()
UI Queue
User clicks
UI Update Javascript
Button handleClick()
Javascript
handleClick()
Time
Wednesday, 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()
Time
Wednesday, 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
Time
Wednesday, 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
Time
Wednesday, 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 Second
Wednesday, 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, 1968
Wednesday, November 23, 11

75. Yield control to
UI Update
Wednesday, November 23, 11

76. Yielding with Timers
Wednesday, November 23, 11

77. Wednesday, November 23, 11

78. Wednesday, November 23, 11

79. Conclusion
Wednesday, November 23, 11

80. 1. Digg the low level JS Perf. characteristics
But, premature optimization is evil
Wednesday, November 23, 11

81. 2. Don’t touch the
SLOW PART!
DOM
Reflow
UI Thread
Wednesday, November 23, 11

82. Make the Web Faster
Make the Web Responsive
Wednesday, November 23, 11

83. Thank You
Wednesday, November 23, 11