1. High Performance JavaScript
Nicholas C. Zakas
Principal Front End Engineer, Yahoo!
jQuery Conference – SF Bay Area, April 24 2010

3. Principal Front End Engineer

4. Contributor

5. Author

7. Things I Know About
JavaScript
Professional
Wrestling
YUI
jQuery

11. Does this matter?

12. Old computers ran slow applications
Small amounts of CPU power and memory

13. New computers are generally faster but
slow applications still exist
More CPU + more memory = less disciplined application development

14. It's still possible to write slow
JavaScript on the new, faster
JavaScript engines

15. How can I improve JavaScript
performance?

16. How can I improve JavaScript
performance?
How can I make this fast???

17. How can I improve JavaScript
performance?
How can I make this fast???
Why is this so slow?????

19. Many aspects conspire to make JavaScript slow
Awareness is the first step to solution

20. The UI Thread
The brains of the operation

21. The browser UI thread is responsible for
both UI updates and JavaScript execution
Only one can happen at a time

22. Jobs for UI updates and JavaScript execution are
added to a UI queue if the UI thread is busy
Each job must wait in line for its turn to execute

23. <button id="btn" style="font-size: 30px; padding: 0.5em
1em">Click Me</button>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").bind("click",function(){
//do something
});
});
</script>

24. Before Click
UI Thread
time
UI Queue

25. When Clicked
UI Thread
time
UI Queue
UI Update
onclick
UI Update

26. When Clicked
UI Thread
UI Update
time
UI Queue
onclick
Draw down state
UI Update

27. When Clicked
UI Thread
UI Update onclick
time
UI Queue
UI Update

28. When Clicked
UI Thread
UI Update onclick UI Update
time
UI Queue
Draw up state

29. No UI updates while JavaScript is
executing!

30. JavaScript May Cause UI Update
<button id="btn" style="font-size: 30px; padding: 0.5em
1em">Click Me</button>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").bind("click",function(){
$("body").append("<div class="tip">You " +
"clicked me!</div>”);
});
});
</script>

31. A UI update must use the latest
info available

32. Long-running JavaScript
=
Unresponsive UI

33. Responsive UI
UI Thread
UI Update JavaScript UI Update
time

34. Unresponsive UI
UI Thread
UI Update JavaScript UI Update
time

35. The runaway script timer prevents JavaScript
from running for too long
Each browser imposes its own limit (except Opera)

36. Internet Explorer

37. Firefox

38. Safari

39. Chrome

40. Runaway Script Timer Limits
• Internet Explorer: 5 million statements
• Firefox: 10 seconds
• Safari: 5 seconds
• Chrome: Unknown, hooks into normal crash
control mechanism
• Opera: none

41. How Long Is Too Long?
“0.1 second [100ms] 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

42. Translation:
No single JavaScript job should
execute for more than 100ms to
ensure a responsive UI

43. Recommendation:
Limit JavaScript execution to no more
than 50ms

44. function processArray(items, process, callback){
for (var i=0,len=items.length; i < len; i++){
process(items[i]);
}
callback();
}

45. Timers to the rescue!

46. JavaScript Timers
• Created using setTimeout()
• Schedules a new JavaScript execution job for
some time in the future
• When the delay is up, the job is added to the
UI queue
– Note: This does not guarantee execution
after the delay, just that the job is added
to the UI queue and will be executed when
appropriate

47. JavaScript Timers
• For complex processing, split up into timed
functionality
• Use timers to delay some processing for later

48. function timedProcessArray(items, process, callback){
//create a clone of the original
var todo = items.concat();
setTimeout(function(){
var start = +new Date();
do {
process(todo.shift());
} while (todo.length > 0 &&
(+new Date() - start < 50));
if (todo.length > 0){
setTimeout(arguments.callee, 25);
} else {
callback(items);
}
}, 25);
}

49. When Clicked
UI Thread
time
UI Queue
UI Update
onclick
UI Update

50. When Clicked
UI Thread
UI Update
time
UI Queue
onclick
UI Update

51. When Clicked
UI Thread
UI Update onclick
time
UI Queue
UI Update

52. When Clicked
UI Thread
UI Update onclick UI Update
time
UI Queue

53. After 25ms
UI Thread
UI Update onclick UI Update
time
UI Queue
JavaScript

54. After 25ms
UI Thread
UI Update onclick UI Update JavaScript
time
UI Queue

55. After Another 25ms
UI Thread
UI Update onclick UI Update JavaScript
time
UI Queue
JavaScript

56. After Another 25ms
UI Thread
UI Update onclick UI Update JavaScript JavaScript
time
UI Queue

57. Web Workers to the rescue!

59. Web Workers
• Asynchronous JavaScript execution
• Execution happens in a separate process
– Not on the UI thread = no UI delays
• Data-driven API
– Data is serialized when sending data into
or out of Worker
– No access to DOM, BOM
– Completely separate execution
environment

60. //in page
var worker = new Worker("process.js");
worker.onmessage = function(event){
useData(event.data);
};
worker.postMessage(values);
//in process.js
self.onmessage = function(event){
var items = event.data;
for (var i=0,len=items.length; i < len; i++){
process(items[i]);
}
self.postMessage(items);
};

61. When Clicked
UI Thread
time
UI Queue
UI Update
onclick
UI Update

62. When Clicked
UI Thread
UI Update
time
UI Queue
onclick
UI Update

63. When Clicked
UI Thread
UI Update onclick
time
UI Queue
UI Update

64. When Clicked
UI Thread
UI Update onclick
time
Worker Thread UI Queue
UI Update

65. When Clicked
UI Thread
UI Update onclick UI Update
time
Worker Thread UI Queue
JavaScript

66. Worker Thread Complete
UI Thread
UI Update onclick UI Update
time
UI Queue
onmessage

67. Worker Thread Complete
UI Thread
UI Update onclick UI Update onmessage
time
UI Queue

68. Web Workers Support
3.5 4.0 4.0

69. Repaint and Reflow
UI update jobs

70. Long UI updates
=
Unresponsive UI

71. Unresponsive UI
UI Thread
UI Update JavaScript UI Update
time

72. Long UI updates
=
Unresponsive UI
=
Frustrated users

73. JavaScript can cause
long UI updates

74. A repaint occurs when a visual change doesn't
require recalculation of layout
Changes to visibility, colors (text/background), background images, etc.

75. Repaint
<button id="btn" style="font-size: 30px; padding: 0.5em
1em">Click Me</button>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").bind("click",function(){
$(this).css({ color: "#f00" });
});
});
</script>
Repaint!

76. A reflow occurs when a visual change
requires a change in layout
Initial page load ▪ browser resize ▪ DOM structure change ▪ layout style change
layout information retrieved

77. Reflow
<button id="btn" style="font-size: 30px; padding: 0.5em
1em">Click Me</button>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").bind("click",function(){
$("body").append("<div class="tip">You " +
"clicked me!</div>”);
});
});
</script> Reflow!

78. Repaints and reflows are queued
up as JavaScript executes

79. Reflow
var list = $("ul.items");
for (var i=0; i < 10; i++){
list.append("<li>Item #" + i + "</li>");
}
Reflow x 10!

80. Limiting repaints/reflows
improves overall performance

81. Solution #1
Perform DOM manipulations
off-document

82. Off-Document Operations
• Fast because there's no repaint/reflow
• Techniques:
– Remove element from the document, make
changes, insert back into document
– Set element's display to “none”, make
changes, set display back to default
– Build up DOM changes on a
DocumentFragment then apply all at once

83. DocumentFragment
• A document-like object
• Not visually represented
• Considered to be owned by the document from
which it was created
• When passed to appendChild(), appends all
of its children rather than itself

84. No
reflow!
Reflow!

85. Solution #2
Group Style Changes

86. Repaint! Reflow!
$("span.example").css({ color: "red" });
$("span.example").css({ height: "100px" });
Reflow!
$("span.example").css({ fontSize: "25px" });
$("span.example").css({ backgroundColor: "white" });
Repaint!

87. Grouping Style Changes
.active {
color: red;
height: 100px;
fontSize: 25px;
background-color: white;
}
$("span.example").addClass("active");
Reflow!

88. Grouping Style Changes
var item = document.getElementById("myItem");
item.style.cssText = "color:red;height:100px;" +
"font-size:25px;background-color: white");
Reflow!

89. Solution #3
Avoid Accidental Reflow

90. Accidental Reflow
$("div.example").css({ width: "100px"});
var width = $("div.example").width();
Reflow!

91. What to do?
• Minimize access to layout information
– offsetTop, offsetLeft, offsetWidth, offsetHeight
– scrollTop, scrollLeft, scrollWidth, scrollHeight
– clientTop, clientLeft, clientWidth, clientHeight
– Most computed styles
• If a value is used more than once, store in
local variable

92. Recap

94. Things I Know About
JavaScript
Professional
Wrestling
YUI
jQuery

95. The browser UI thread is responsible for
both UI updates and JavaScript execution
Only one can happen at a time

96. Responsive UI
UI Thread
UI Update JavaScript UI Update
time

97. Unresponsive UI
UI Thread
UI Update JavaScript UI Update
time

98. Unresponsive UI
UI Thread
UI Update JavaScript UI Update
time

99. Avoid Slow JavaScript
• Don't allow JavaScript to execute for more
than 50ms
• Break up long JavaScript processes using:
– Timers
– Web Workers

100. Avoid Long UI Updates
• Be careful of repaint and reflow
• Perform complex DOM operations off-
document
– Remove elements and re-add them
– Use DocumentFragment objects
• Group style changes together
• Avoid accidental reflow

101. Questions?

102. Etcetera
• My blog: www.nczonline.net
• My email: nzakas@yahoo-inc.com
• Twitter: @slicknet

103. Creative Commons Images Used
• http://www.flickr.com/photos/lrargerich/3115367361/
• http://www.flickr.com/photos/photomonkey/93277011/
• http://www.flickr.com/photos/hippie/2406411610/
• http://www.flickr.com/photos/55733754@N00/3325000738/
• http://www.flickr.com/photos/eurleif/255241547/
• http://www.flickr.com/photos/off_the_wall/3444915939/
• http://www.flickr.com/photos/wwarby/3296379139/
• http://www.flickr.com/photos/derekgavey/4358797365/
• http://www.flickr.com/photos/mulad/286641998/