Key-based fragment caching in Rails is a great way to improve server-side response times. The cache_rocket gem provides a few simple techniques to make html rendering even faster and more efficient. Discussed: usage, performance, and trade-offs of key-based caching techniques.

1. How

2. I

3. learned
to

4. stop

5. worrying
and

6. love
key-based

7. HTML

8.
fragment

9. caching

10. TEE PARHAM
@teeparham

13. 1
Do

14. not

15.
expire

16.
keys

17. 2
Model

18.
associations
govern
expiry

19. 3
Nested
caching
is

20. best

21. class Project
has_many :todo_lists
class TodoList
belongs_to :project, touch: true
has_many :todos
class Todo
belongs_to :todo_list, touch: true

22. cache_key
todo = Todo.first
= #Todo id: 1,
updated_at: 2013-11-19 00:24:01
todo.cache_key
= todos/1-20131119002401851149000

23. cache_key
todo = Todo.first
= #Todo id: 1,
updated_at: 2013-11-19 00:24:01
todo.cache_key
= todos/1-20131119002401851149000

24. Project
TodoList
Todo

25. view

26. keys
todo.cache_key
= todos/1-20131119002401851149000
cache(‘todo_item’, todo)
= todo_item/todos/1-20131119002401851149000

27. - @projects.each do |project|
- cache [‘project’, project] do
...project...
- project.todo_lists.each do |todo_list|
- cache [‘todo_list’, todo_list] do
...todo_list...
- todo_list.todos.each do |todo|
- cache [‘todo’, todo] do
...todo...

28. YO

29. DAWG

30. has_many

32. :arrows

33. a
different
hammer

34. User*
City
User
Idea*
*

35. *YO

36. DAWG?

37. .stream-item
.item-rail
.avatar-stream
= avatar(idea.user)
.mobile-meta.show-for-small
Suggested by #{user_link(idea.user)}
%br/
= l idea.created_at, format: :short_year
.item-pointer
.item-content
.bubble-stream{class: activity_class(idea)}
.item-main{class: ('has-media' if idea.has_stream_media?)}
- if idea.has_stream_media?
.stream-media
= link_to stream_image(idea), idea_path(idea)
- if idea.stream_media_video?
= link_to #9654;.html_safe, idea_path(idea)
.text
.text-body
= want_link(idea)
.sub
%span.actions
= solution_count(idea)
= me_too_link(idea)

38. hit

39. rate?
- cache [‘stream’,
idea,
current_user] do
.all-the-codez
= me_too_link(idea)

40. hit

41. rate
key:

42. [idea,

43. user]
hit

44. rate:

45. 1

46. /

47. Idea.count*User.count

48. why

49. hit

50. rate

51. matters

52. cache_rocket
= render_cached 'stream/idea',
idea: idea,
replace: {me_too_link: me_too_link(idea)}
stream/_idea.html.haml
- cache [‘stream’, idea] do
.all-the-codez
= cache_replace_key :me_too_link

53. cache [‘stream’, idea]
:me_too_link

54. div class=stream-item
div class=item-rail
div class=avatar-stream
a href=/neighbors/abarad class=avatar-lnk data-username=abaradimg alt=Amy Barad height=65 src=https://
d30wms7jgjmff8.cloudfront.net/avatars/190/streama5e1bed52918ac859ed988618e7a2bad.jpg width=65/a
/div
div class=mobile-meta show-for-small
Suggested by a href=/neighbors/abaradAmy Barad/abr
Jun 11, 2011
/div
/div
div class=item-pointer/div
div class=item-content
div class=bubble-stream main-item
div class=has-media item-main
div class=stream-media
a href=/ideas/nola-the-ability-to-recycle-glimg alt=image height=159 src=https://d30wms7jgjmff8.cloudfront.net/
images/107/streamf97520b5053a463e8465195222e98a07.jpg width=212/a
/div
div class=text
div class=text-body
a href=/ideas/nola-the-ability-to-recycle-gl398 neighbors want the ability to recycle glass in New Orleans./a
/div
div class=sub
span class=actionsa href=/ideas/nola-the-ability-to-recycle-gl#actions class=btn white-border
largestrong2/strong actions/a/span
me_too_link
form action=/votes/803 class=button_to method=post
div
span class=actions
input name=_method type=hidden value=delete
input class=btn mint large type=submit value=Undo
input name=authenticity_token type=hidden value=vi66rEYBUkiqZVqss7DT/JhDbaN4GSdadEtk34ijRBg=
/span
/div
/form
/div
/div
/div
div class=rule-mint-xlt/div
div class=bubble-head new-supporters
spanNew Supporters/span a href=/neighbors/brittwright class=tiny-avatar-lnkimg alt=Britt Wright height=22 src=https://
d30wms7jgjmff8.cloudfront.net/assets/avatar_medium_8.png width=22/a a href=/neighbors/rosemary class=tiny-avatar-lnkimg alt=Rosemary height=22
src=https://d30wms7jgjmff8.cloudfront.net/avatars/25636/thumb0d559f628e6e05c8f32a179ba44e80a6. width=22/a a href=/neighbors/willmarshall class=tiny-avatarlnkimg alt=Will M. height=22 src=https://d30wms7jgjmff8.cloudfront.net/avatars/26049/thumb2ae0e8a2760bcec545ae2655c497e2b1. width=22/a a href=/
neighbors/alex5 class=tiny-avatar-lnkimg alt=Alex height=22 src=https://d30wms7jgjmff8.cloudfront.net/avatars/26707/
thumb511139a75432ee1b6dc9ad6f90b06ca2.jpg width=22/a a href=/neighbors/mike3 class=tiny-avatar-lnkimg alt=Mike height=22 src=https://
d30wms7jgjmff8.cloudfront.net/avatars/24145/thumbc9a0b03a4f25bcbb9f37de0486e4df10.png width=22/a a href=/neighbors/jaba4017 class=tiny-avatar-lnkimg
alt=Bill Arceneaux height=22 src=https://d30wms7jgjmff8.cloudfront.net/avatars/3891/thumb6d95461aad25696fc0b4d69a4685f2f8.jpg width=22/a a href=/
neighbors/faubourgstjohn class=tiny-avatar-lnkimg alt=Charlie London height=22 src=https://d30wms7jgjmff8.cloudfront.net/avatars/203/
thumb9872b2f76cdbcd64893f8855f73129cb.jpg width=22/a a href=/neighbors/andrewjameson class=tiny-avatar-lnkimg alt=Andrew Jameson height=22
src=https://d30wms7jgjmff8.cloudfront.net/avatars/25316/thumb17689e5da8b64a01fc585438679037d4.jpg width=22/a a href=/neighbors/jenaoh1 class=tiny-avatarlnkimg alt=Jena Oh height=22 src=https://d30wms7jgjmff8.cloudfront.net/avatars/25255/thumb1da559a045c471284e83cfded82f6e82. width=22/a a href=/
neighbors/rosemeistr class=tiny-avatar-lnkimg alt=rosemeistr height=22 src=https://d30wms7jgjmff8.cloudfront.net/assets/avatar_medium_1.png width=22/a
/div
div class=bubble-unit top-shadow hide-for-small bottom
span class=city-flaga href=/cities/nolaNew Orleans/a/span Suggested by a href=/neighbors/abaradAmy Barad/a on Jun 11,
2011
/div
div class=progress-flag/div
/div
/div
HTML

55. on

56. page

57. div class=stream-item
div class=item-rail
div class=avatar-stream
a href=/neighbors/abarad class=avatar-lnk data-username=abaradimg alt=Amy Barad height=65 src=https://
d30wms7jgjmff8.cloudfront.net/avatars/190/streama5e1bed52918ac859ed988618e7a2bad.jpg width=65/a
/div
div class=mobile-meta show-for-small
Suggested by a href=/neighbors/abaradAmy Barad/abr
Jun 11, 2011
/div
/div
div class=item-pointer/div
div class=item-content
div class=bubble-stream main-item
div class=has-media item-main
div class=stream-media
a href=/ideas/nola-the-ability-to-recycle-glimg alt=image height=159 src=https://
d30wms7jgjmff8.cloudfront.net/images/107/streamf97520b5053a463e8465195222e98a07.jpg width=212/a
/div
div class=text
div class=text-body
a href=/ideas/nola-the-ability-to-recycle-gl398 neighbors want the ability to recycle glass in New
Orleans./a
/div
div class=sub
span class=actionsa href=/ideas/nola-the-ability-to-recycle-gl#actions class=btn white-border
largestrong2/strong actions/a/span
me_too_link
cr me_too_link
/div
/div
/div
div class=rule-mint-xlt/div
div class=bubble-head new-supporters
spanNew Supporters/span a href=/neighbors/brittwright class=tiny-avatar-lnkimg alt=Britt Wright height=22
src=https://d30wms7jgjmff8.cloudfront.net/assets/avatar_medium_8.png width=22/a a href=/neighbors/rosemary class=tiny-avatar-lnkimg
alt=Rosemary height=22 src=https://d30wms7jgjmff8.cloudfront.net/avatars/25636/thumb0d559f628e6e05c8f32a179ba44e80a6. width=22/a a href=/
neighbors/willmarshall class=tiny-avatar-lnkimg alt=Will M. height=22 src=https://d30wms7jgjmff8.cloudfront.net/avatars/26049/
thumb2ae0e8a2760bcec545ae2655c497e2b1. width=22/a a href=/neighbors/alex5 class=tiny-avatar-lnkimg alt=Alex height=22 src=https://
d30wms7jgjmff8.cloudfront.net/avatars/26707/thumb511139a75432ee1b6dc9ad6f90b06ca2.jpg width=22/a a href=/neighbors/mike3 class=tiny-avatarlnkimg alt=Mike height=22 src=https://d30wms7jgjmff8.cloudfront.net/avatars/24145/thumbc9a0b03a4f25bcbb9f37de0486e4df10.png width=22/a a
href=/neighbors/jaba4017 class=tiny-avatar-lnkimg alt=Bill Arceneaux height=22 src=https://d30wms7jgjmff8.cloudfront.net/avatars/3891/
thumb6d95461aad25696fc0b4d69a4685f2f8.jpg width=22/a a href=/neighbors/faubourgstjohn class=tiny-avatar-lnkimg alt=Charlie London
height=22 src=https://d30wms7jgjmff8.cloudfront.net/avatars/203/thumb9872b2f76cdbcd64893f8855f73129cb.jpg width=22/a a href=/neighbors/
andrewjameson class=tiny-avatar-lnkimg alt=Andrew Jameson height=22 src=https://d30wms7jgjmff8.cloudfront.net/avatars/25316/
thumb17689e5da8b64a01fc585438679037d4.jpg width=22/a a href=/neighbors/jenaoh1 class=tiny-avatar-lnkimg alt=Jena Oh height=22
src=https://d30wms7jgjmff8.cloudfront.net/avatars/25255/thumb1da559a045c471284e83cfded82f6e82. width=22/a a href=/neighbors/rosemeistr
class=tiny-avatar-lnkimg alt=rosemeistr height=22 src=https://d30wms7jgjmff8.cloudfront.net/assets/avatar_medium_1.png width=22/a
/div
div class=bubble-unit top-shadow hide-for-small bottom
span class=city-flaga href=/cities/nolaNew Orleans/a/span Suggested by a href=/neighbors/abaradAmy Barad/
a on Jun 11, 2011
/div
div class=progress-flag/div
/div
/div
/div
HTML

58. in

59. memcache

60. cache_rocket
replace_key = ‘cr me_too_link’
html = ‘formdivetc.../div/form’
fragment.gsub! replace_key, html
def replace_from_hash(hash)
hash.each do |key, value|
gsub! cache_replace_key(key), value.to_s
end
end

61. gsub!

62. render_cached 'top',
replace: 'inner'
a

63. partial
top.html.haml
= render ‘inner’
= cache_replace_key :inner

64. render_cached 'top',
replace: ['inner', ‘footer’]
partials
top.html.haml
#here
= cache_replace_key :inner
#there
= cache_replace_key :footer

65. render_cached 'top',
replace: {key: a_helper(x)}
value
top.html.haml
= cache_replace_key :key

66. render_cached 'item',
collection: objects,
replace:
{key: -(o){a_helper(o)}}
Proc

67. for

68. each

69. item
item.html.haml
= cache_replace_key :key

70. def replace_item_hash(item, replace_hash)
item_fragment = self.value.dup
replace_hash.each do |key, proc|
item_fragment.gsub! cache_replace_key(key),
proc.call(item)
end
item_fragment
end

71. gsub!

72. cost
extra

73. string

74. replacement
different

75. render

76. syntax
adds

77. a

78. dependency

79. benefit
cache

80. more

81. stuff

82. more

83. hits

84. faster

85. pages
less

86. stuff

87. in

88. cache

89. more

90. hits

91. less

92. RAM

93. speed
No Caching
123 ms
Russian Doll*
67 ms
CacheRocket
113 ms
CacheRocket collection 82 ms

94. efficiency
Russian Doll
CacheRocket
Hits
1400
14
Misses
100
1

95. efficiency
Russian Doll
CacheRocket
Items
100
1
Size
120.9k
0.9k

96. Cat

97. references
https://github.com/neighborland/cache_rocket
https://github.com/teeparham/cache_benchmark
http://guides.rubyonrails.org/caching_with_rails.html
http://37signals.com/svn/posts/3113-how-key-based-cache-expiration-works
http://ninjasandrobots.com/rails-faster-partial-rendering-and-caching/
http://www.pal-blog.de/entwicklung/perl/memcached-statistics-stats-command.html
https://github.com/n8/multi_fetch_fragments
https://github.com/rails/cache_digests