Slides for my intro to JavaScript performance talk at AsyncJS Brighton.

1. A ROUGH GUIDE to
JavaScript
Performance
by Mark Perkins, July 2010

2. A *rough* guide....

3. A *rough* guide....
General principles for you to take and build
on

4. A *rough* guide....
General principles for you to take and build
on
3 tips for loadtime performance

5. A *rough* guide....
General principles for you to take and build
on
3 tips for loadtime performance
3 principles for speedy runtimes

6. A *rough* guide....
General principles for you to take and build
on
3 tips for loadtime performance
3 principles for speedy runtimes
Seconds, not milliseconds (possibly...)

7. We’re NOT going to cover (much...)

8. We’re NOT going to cover (much...)
General frontend performance topics

9. We’re NOT going to cover (much...)
General frontend performance topics
Crazy language optimisations eg.
~~( 1*‘12.34’ )

10. We’re NOT going to cover (much...)
General frontend performance topics
Crazy language optimisations eg.
~~( 1*‘12.34’ )
Advanced testing tools

14. LOADTIME

15. Steve Souders

16. “Only 10-20% of
the end user
response time is
spent downloading
the HTML
document.
The other
80-90% is spent
’ Golden Rule
Steve Souders

17. Some facts of life

18. Some facts of life
HTTP requests are expensive

19. Some facts of life
HTTP requests are expensive
Browsers are single threaded (ignoring
web workers)

20. Some facts of life
HTTP requests are expensive
Browsers are single threaded (ignoring
web workers)
2-4 resources downloaded in parallel per
host

21. Some facts of life
HTTP requests are expensive
Browsers are single threaded (ignoring
web workers)
2-4 resources downloaded in parallel per
host
<script> tags disable parallel downloads
and block all rendering below them

22. JS 1
JS 2
IMAGE 1
IMAGE 2
time

23. <script>
1. Move <script> tags to the bottom (of the
page)

27. FOUJC!!

30. 2. Concatenate, Minimise, GZip

31. Concatenation

32. Concatenation
Less HTTP requests === :-)

33. Concatenation
Less HTTP requests === :-)
But... rarely used scripts may be better off
loaded where appropriate.

34. Concatenation
Less HTTP requests === :-)
But... rarely used scripts may be better off
loaded where appropriate.
Automate: Sprockets, php-sprockets etc

35. Minification

36. Minification
Strips whitespace and comments out,
shortens variables in functions

37. Minification
Strips whitespace and comments out,
shortens variables in functions
Minify, don’t Pack!

38. Minification
Strips whitespace and comments out,
shortens variables in functions
Minify, don’t Pack!
Anything that obfuscates code and requires
eval’ing has a performance hit. Avoid!

39. GZip your JS!

40. GZip your JS!
GZip is the way forward. Use it.

41. GZip your JS!
GZip is the way forward. Use it.
Can reduce file size by up to 70%

42. GZip your JS!
GZip is the way forward. Use it.
Can reduce file size by up to 70%
No whitespace removal or variable alteration
- easy to debug

43. GZip your JS!
GZip is the way forward. Use it.
Can reduce file size by up to 70%
No whitespace removal or variable alteration
- easy to debug
Configure once and forget about it, all taken
care of by the server

44. GZip your JS!
GZip is the way forward. Use it.
Can reduce file size by up to 70%
No whitespace removal or variable alteration
- easy to debug
Configure once and forget about it, all taken
care of by the server

45. 3. Load scripts in a non-blocking
way

47. Dynamic scripts

48. Dynamic scripts
Add <script> tags via DOM methods to
avoid blocking of other page processes

49. Dynamic scripts
Add <script> tags via DOM methods to
avoid blocking of other page processes
Only FF and Opera guarantee execution
order (concatenation can help with this)

50. Dynamic scripts
Add <script> tags via DOM methods to
avoid blocking of other page processes
Only FF and Opera guarantee execution
order (concatenation can help with this)
Use onload callbacks to tell us when it’s
loaded, can nest to ensure execution order
is respected

53. A little help from your friends...

54. A little help from your friends...
Lazy Loader: http://github.com/rgrove/
lazyload/

55. A little help from your friends...
Lazy Loader: http://github.com/rgrove/
lazyload/
LabJS: http://labjs.com

56. A little help from your friends...
Lazy Loader: http://github.com/rgrove/
lazyload/
LabJS: http://labjs.com

57. Loadtime recap!

58. Loadtime recap!
1. Move <script> tags to the bottom of the
page

59. Loadtime recap!
1. Move <script> tags to the bottom of the
page
2. Concatenate, Minimise, GZip

60. Loadtime recap!
1. Move <script> tags to the bottom of the
page
2. Concatenate, Minimise, GZip
3. Load scripts in a non-blocking way

61. RUNTIME

62. 1. Be afraid of the DOM!

63. About that DOM...

64. About that DOM...
The DOM is a language independent API for
working with XML/HTML documents.

65. About that DOM...
The DOM is a language independent API for
working with XML/HTML documents.
The JS engine and the DOM are implemented
separately in browsers.

66. About that DOM...
The DOM is a language independent API for
working with XML/HTML documents.
The JS engine and the DOM are implemented
separately in browsers.
Every time you touch the DOM you incur a
performance penalty.

67. Big DOM: Scary!
Little DOM:
Not so scary.

68. Keep bridge crossings to a minimum!
DOM-LAND
JAVASCRIPT-
VILLE

70. ‘Cache’ your DOM
selection results for re-use

72. Minimise this kind of DOM
insertion wherever possible

74. Event Delegation FTW!

75. 2. Write lazy code

76. Lazy code does as little work as
possible, without repetition

77. Lazy code does as little work as
possible, without repetition

78. Lazy code does as little work as
possible, without repetition

79. Lazy code does as little work as
possible, without repetition

80. Lazy code does as little work as
possible, without repetition

81. 3. Keep your Ajax under control

82. Caching is King!!

83. Caching is King!!
Use GET requests

84. Caching is King!!
Use GET requests
Tailor URLs to the user where possible:

85. Caching is King!!
Use GET requests
Tailor URLs to the user where possible:
http://mydomain/ajax/info.php?
user_id=129473

86. Caching is King!!
Use GET requests
Tailor URLs to the user where possible:
http://mydomain/ajax/info.php?
user_id=129473
Ensure appropriate headers are sent by the
server

87. Caching is King!!
Use GET requests
Tailor URLs to the user where possible:
http://mydomain/ajax/info.php?
user_id=129473
Ensure appropriate headers are sent by the
server
(ie. a far future Expires header)

88. Caching is King!!
Use GET requests
Tailor URLs to the user where possible:
http://mydomain/ajax/info.php?
user_id=129473
Ensure appropriate headers are sent by the
server
(ie. a far future Expires header)

89. Be smart about return data

90. Be smart about return data
HTML > JSONP > JSON > XML

91. Be smart about return data
HTML > JSONP > JSON > XML
Return HTML wherever possible - templating
in JS is slow, your server is fast, use it!

92. Be smart about return data
HTML > JSONP > JSON > XML
Return HTML wherever possible - templating
in JS is slow, your server is fast, use it!
JSONP - no parse time, already in a native
format

93. Be smart about return data
HTML > JSONP > JSON > XML
Return HTML wherever possible - templating
in JS is slow, your server is fast, use it!
JSONP - no parse time, already in a native
format
JSON - needs parsing/evaluating first

94. Be smart about return data
HTML > JSONP > JSON > XML
Return HTML wherever possible - templating
in JS is slow, your server is fast, use it!
JSONP - no parse time, already in a native
format
JSON - needs parsing/evaluating first

95. Runtime recap!

96. Runtime recap!
1. Be afraid of the DOM

97. Runtime recap!
1. Be afraid of the DOM
2. Write lazy code

98. Runtime recap!
1. Be afraid of the DOM
2. Write lazy code
3. Keep your Ajax under control

99. Additional Resources
Books:
High Performance Websites: http://amzn.to/bbBTln
Even Faster Websites: http://amzn.to/a7iJmo
High Performance JavaScript: http://amzn.to/9CgsfA
JavaScript Rocks! http://javascriptrocks.com/performance/
Interwebs:
Steve Souders HPWS blog: http://stevesouders.com/
Yahoo Exceptional Performance resources: http://developer.yahoo.com/
performance/
YUI blog (performance category): http://yuiblog.com/blog/category/
performance
Understanding site load waterfalls: http://bit.ly/9KkmN1
Nokia JS Performance best practices: http://bit.ly/aYLXLU
Velocity Conference: http://en.oreilly.com/velocity2010
My ‘performance’ tag on Delicious: http://delicious.com/allmarkedup/
performance