34
Browser Caching & You (a love story) Mark Nottingham / mnot.net

Browser Caching and You: A Love Story

Embed Size (px)

DESCRIPTION

Exploration of the state of browser caching, as well as speculation on the future.

Citation preview

Page 1: Browser Caching and You: A Love Story

Browser  Caching  &  You(a  love  story)

Mark  Nottingham    /  mnot.net

Page 2: Browser Caching and You: A Love Story

At  First  Sight:The  Honeymoon

Page 3: Browser Caching and You: A Love Story

EMPTY

FULL

http://www.yuiblog.com/blog/2007/01/04/performance-research-part-2/

Page 4: Browser Caching and You: A Love Story
Page 5: Browser Caching and You: A Love Story

Relationship  Trouble

Page 6: Browser Caching and You: A Love Story

http://www.websiteoptimization.com/speed/tweak/average-web-page/

Page 7: Browser Caching and You: A Love Story

Mozilla:  50MBIE:  10%  (max  1G)

Safari:  ??Chrome:  8-­‐250M?

Page 8: Browser Caching and You: A Love Story

Mozilla:  100  pages

Page 9: Browser Caching and You: A Love Story

Mozilla:  16384  entries 89 // Min and max values for the number of records in the DiskCachemap 90 #define kMinRecordCount 512 91 92 #define kSeparateFile 0 93 // #define must always be <= 65535KB, or overflow. See bug 443067 Comment 8 94 #define kMaxDataFileSize 5 * 1024 * 1024 // 5 MB (in bytes) 95 #define kBuckets (1 << 5) // must be a power of 2!

(~230 pages)

Page 10: Browser Caching and You: A Love Story

Cache-Control: max-age=0, ! no-cache, no-store, ! private, pre-check=0, ! post-check=0

Page 11: Browser Caching and You: A Love Story

“Maybe  we  should  start  seeing  other  

people...”

Page 12: Browser Caching and You: A Love Story

HTML5  AppCache

Page 13: Browser Caching and You: A Love Story
Page 14: Browser Caching and You: A Love Story

• privacy  concerns  (“EverCookie”)• relationship  with  HTTP  caching  is  poorly  de]ined

• designed  for  of]line  use

Page 15: Browser Caching and You: A Love Story

Getting  to  knoweach  other

Page 16: Browser Caching and You: A Love Story
Page 17: Browser Caching and You: A Love Story

max-­‐age  /  expiresC

hrom

e 6

IE7

Page 18: Browser Caching and You: A Love Story

max-­‐age  /  expiresSa

fari

5.0

.2

Take-away: Cache timing is OK, but not exact

Page 19: Browser Caching and You: A Love Story

no-­‐cache  no-­‐store

Take-away: no-store is enough

Page 20: Browser Caching and You: A Love Story

AgeIE

8

Page 21: Browser Caching and You: A Love Story

DateSa

fari

5.0

.2IE

(an

y)

Page 22: Browser Caching and You: A Love Story

pre-­‐check,  post-­‐check

Take-away: max-age=0, pre-check=0, post-check=0is a really bad idea.

IE (

mos

t)

Page 23: Browser Caching and You: A Love Story

Where  is  this  thing  going?(“the  talk”)

Page 24: Browser Caching and You: A Love Story

• Fixing  Bugs• Sizing  Caches  Appropriately• Replacement  Algorithms

Page 25: Browser Caching and You: A Love Story

stale-­‐while-­‐revalidate

cache

Page 26: Browser Caching and You: A Love Story

stale-­‐if-­‐error

Page 27: Browser Caching and You: A Love Story

Cache  Invalidation

Page 28: Browser Caching and You: A Love Story

RFC  2616:

the internets

Cache

origin server

POST/PUT/DELETE/etc.

Invalidations  after  Updates  or  Deletions

Request-URIContent-LocationLocation

Page 29: Browser Caching and You: A Love Story

Problem:  Related  Responses

POST /articles/123/new_comment

/newest_comments

/articles/123/comments

/comment_feed

Page 30: Browser Caching and You: A Love Story

Link:  rel=invalidated-­‐by

POST /articles/123/new_comment

/newest_comments

/articles/123/comments

/comment_feed

Link: </articles/123/new_comment>; rel=”invalidated-by”

Link: </articles/123/new_comment>; rel=”invalidated-by”

Link: </articles/123/new_comment>; rel=”invalidated-by”

Page 31: Browser Caching and You: A Love Story

Problem  3:  Dynamic  Relations

POST /articles/123/new_comment

/newest_comments

/articles/123/comments

/comment_feed

Link: </articles/123/new_comment>; rel=”invalidated-by”

Link: </articles/123/new_comment>; rel=”invalidated-by”

Link: </articles/123/new_comment>; rel=”invalidated-by”

/bob/comments

/cat/vuvuzela

Page 32: Browser Caching and You: A Love Story

Link:  rel=invalidates

POST /articles/123/new_comment

/newest_comments

/articles/123/comments

/comment_feed

Link: </articles/123/new_comment>; rel=”invalidated-by”

Link: </articles/123/new_comment>; rel=”invalidated-by”

Link: </articles/123/new_comment>; rel=”invalidated-by”

/bob/comments

/cat/vuvuzela

Link: </cat/vuvuzela>; rel=”invalidates”Link: </bob/comments>; rel=”invalidates”

Page 33: Browser Caching and You: A Love Story

LinkedCacheInvalidation

“side effect” invalidation + link relations =

Page 34: Browser Caching and You: A Love Story

Further  Out(“there’s  still  life  in  this  thing”)

• Cache  API  for  invalidation• Revisiting  of]line  caching• Forward  Cache  Digests• Explicit  Cache  Key