Cache Me If You Can

Lightning Talk at JSConf Japan 2019

Transcript

1. Maxi Ferreira JS Engineer @ Help Scout JSConf Japan ! November 30, 2019 Cache Me If You Can @charca
2. Cache is King
3. –Phil Karlton “There are only two hard things in Computer Science: cache invalidation and naming things.”
5. Service Worker Cache
6. Service Worker Cache HTTP Cache
7. Service Worker Cache HTTP Cache Proxy Cache
8. Service Worker Cache HTTP Cache Proxy Cache CDN Cache
9. HTTP Cache & Cache-Control
10. Cache-Control Directives no-store no-cache max-age s-maxage immutable no-transform public private must-revalidate proxy-revalidate stale-while-revalidate stale-if-error
11. Cache-Control Directives no-store no-cache max-age s-maxage immutable no-transform public private must-revalidate proxy-revalidate stale-while-revalidate stale-if-error
12. Cache-Control: no-store
13. Cache-Control: no-store “Don’t Cache”
14. Cache-Control: no-store
15. GET /main.js Cache-Control: no-store
16. GET /main.js 200 OK Cache-Control: no-store Cache-Control: no-store
17. GET /main.js 200 OK Cache-Control: no-store Cache-Control: no-store
18. Cache-Control: no-store
19. Cache-Control: no-store ✅ Guarantees the resource is up to date
20. Cache-Control: no-store ✅ Guarantees the resource is up to date ❌ Downloads the full resource on every request
21. Cache-Control: no-cache
22. Cache-Control: no-cache “Don’t Cache”
23. Cache-Control: no-cache “Don’t Cache” “Yes Cache, but revalidate with the server before using”
24. –Phil Karlton “There are only two hard things in Computer Science: cache invalidation and naming things.”
25. Cache-Control: no-cache
26. GET /main.js Cache-Control: no-cache
27. GET /main.js 200 OK Cache-Control: no-cache ETag: abc123 Cache-Control: no-cache
28. GET /main.js 200 OK Cache-Control: no-cache ETag: abc123 main.js no-cache abc123 Cache-Control: no-cache
29. GET /main.js 200 OK Cache-Control: no-cache ETag: abc123 main.js no-cache abc123 Cache-Control: no-cache
30. main.js no-cache abc123 Cache-Control: no-cache
31. GET /main.js main.js no-cache abc123 Cache-Control: no-cache
32. GET /main.js main.js no-cache abc123 GET /main.js If-None-Match: abc123 Cache-Control: no-cache
33. GET /main.js 304 Not Modified Cache-Control: no-cache ETag: abc123 main.js no-cache abc123 GET /main.js If-None-Match: abc123 Cache-Control: no-cache
34. GET /main.js 304 Not Modified Cache-Control: no-cache ETag: abc123 main.js no-cache abc123 GET /main.js If-None-Match: abc123 Cache-Control: no-cache
35. Cache-Control: no-cache
36. Cache-Control: no-cache ✅ Guarantees the resource is up to date
37. Cache-Control: no-cache ✅ Guarantees the resource is up to date ✅ Doesn’t download the resource unnecessarily
38. Cache-Control: no-cache ✅ Guarantees the resource is up to date ✅ Doesn’t download the resource unnecessarily ❌ Has to check with the server on every request
39. Cache-Control: max-age={x}
40. Cache-Control: max-age={x} “Keep this resource fresh in the cache for {x} seconds.”
41. Fresh <-> Stale
42. Cache-Control: max-age
43. GET /main.js Cache-Control: max-age
44. GET /main.js 200 OK Cache-Control: max-age=100 ETag: abc123 Cache-Control: max-age
45. GET /main.js 200 OK Cache-Control: max-age=100 ETag: abc123 main.js max-age=100 age=0 abc123 Cache-Control: max-age
46. GET /main.js 200 OK Cache-Control: max-age=100 ETag: abc123 main.js max-age=100 age=0 abc123 Cache-Control: max-age
47. main.js max-age=100 age=20 abc123 Cache-Control: max-age
48. GET /main.js main.js max-age=100 age=20 abc123 Cache-Control: max-age
49. GET /main.js main.js max-age=100 age=20 abc123 Cache-Control: max-age
50. Cache-Control: max-age main.js max-age=100 age=120 abc123
51. GET /main.js Cache-Control: max-age main.js max-age=100 age=120 abc123
52. GET /main.js GET /main.js If-None-Match: abc123 Cache-Control: max-age main.js max-age=100 age=120 abc123
53. GET /main.js 304 Not Modified Cache-Control: max-age=100 ETag: abc123 GET /main.js If-None-Match: abc123 Cache-Control: max-age main.js max-age=100 age=120 abc123
54. GET /main.js 304 Not Modified Cache-Control: max-age=100 ETag: abc123 GET /main.js If-None-Match: abc123 Cache-Control: max-age main.js max-age=100 age=0 abc123
55. GET /main.js 304 Not Modified Cache-Control: max-age=100 ETag: abc123 GET /main.js If-None-Match: abc123 Cache-Control: max-age main.js max-age=100 age=0 abc123
56. Cache-Control: max-age
57. Cache-Control: max-age ✅ Uses the resource directly from the cache
58. Cache-Control: max-age ✅ Uses the resource directly from the cache ✅ Doesn’t need to check with the server
59. Cache-Control: max-age ✅ Uses the resource directly from the cache ✅ Doesn’t need to check with the server How do we guarantee that the resource is up to date?
60. Cache-Control: max-age ✅ Uses the resource directly from the cache ✅ Doesn’t need to check with the server How do we guarantee that the resource is up to date? max-age=???
61. max-age=0
62. max-age=600
63. max-age=until-it-changes
64. Immutable Resources + Aggressive Caching
65. max-age=31536000
66. Revision Stamping main.js vendors.js styles.css
67. Revision Stamping main.js vendors.js styles.css
68. Revision Stamping main.js vendors.js styles.css main.ee8f28.js vendors.ab2f18.js styles.f74ee2.css
69. Cache-Control: max-age
70. GET /main.abc.js Cache-Control: max-age
71. GET /main.abc.js 200 OK Cache-Control: max-age=31536000 ETag: abc123 Cache-Control: max-age
72. GET /main.abc.js 200 OK Cache-Control: max-age=31536000 ETag: abc123 main.abc.js max-age= 31536000 age=0 abc123 Cache-Control: max-age
73. GET /main.abc.js 200 OK Cache-Control: max-age=31536000 ETag: abc123 main.abc.js max-age= 31536000 age=0 abc123 Cache-Control: max-age
74. main.abc.js max-age= 31536000 age=3600 abc123 Cache-Control: max-age
75. GET /main.abc.js main.abc.js max-age= 31536000 age=3600 abc123 Cache-Control: max-age
76. GET /main.abc.js main.abc.js max-age= 31536000 age=3600 abc123 Cache-Control: max-age
77. Cache-Control: max-age main.abc.js max-age= 31536000 age=7200 abc123
78. GET /main.def.js Cache-Control: max-age main.abc.js max-age= 31536000 age=7200 abc123
79. GET /main.def.js 200 OK Cache-Control: max-age=31536000 ETag: def456 Cache-Control: max-age main.abc.js max-age= 31536000 age=7200 abc123
80. GET /main.def.js 200 OK Cache-Control: max-age=31536000 ETag: def456 Cache-Control: max-age main.abc.js max-age= 31536000 age=7200 abc123
81. GET /main.def.js 200 OK Cache-Control: max-age=31536000 ETag: def456 Cache-Control: max-age main.def.js max-age= 31536000 age=0 def456 main.abc.js max-age= 31536000 age=7200 abc123
82. GET /main.def.js 200 OK Cache-Control: max-age=31536000 ETag: def456 Cache-Control: max-age main.def.js max-age= 31536000 age=0 def456 main.abc.js max-age= 31536000 age=7200 abc123
83. Cache-Control: max-age=31536000 + Revision Stamping
84. Cache-Control: max-age=31536000 + Revision Stamping ✅ Uses the resource directly from the cache
85. Cache-Control: max-age=31536000 + Revision Stamping ✅ Uses the resource directly from the cache ✅ Doesn’t need to check with the server
86. Cache-Control: max-age=31536000 + Revision Stamping ✅ Uses the resource directly from the cache ✅ Doesn’t need to check with the server ✅ Guarantees the resource is up to date
87. Final Notes
88. Final Notes Use the cache to prevent roundtrips to the server.
89. Final Notes Use the cache to prevent roundtrips to the server. Whenever possible, use immutable resources with caches that don’t expire
90. Final Notes Use the cache to prevent roundtrips to the server. Whenever possible, use immutable resources with caches that don’t expire Check the docs of your CDNs
91. Final Notes Use the cache to prevent roundtrips to the server. Whenever possible, use immutable resources with caches that don’t expire Check the docs of your CDNs If you need more flexibility, use a Service Worker
92. Thank you