Faster
Web

Cache me
if you can

Javascript

Speed

Cache

Cache (/ˈkæʃ/) is a component that transparently stores data so that future requests for that data can be served faster.

Memory

• RAM fastest, not persistent
• Disk slower, persistent
• Network slowest

Practice

Browser Cache

• Expires & Cache-Control: max-age
• Last-Modified & ETag

There can be only one

Cookies

• 20 records per domain
• 4KB per record

Java/Flash/Google Gears

• Have to be installed
• May be blocked by AdBlock
• INSECURE

AppCache

        CACHE MANIFEST
        #2012-11-17:v1
        CACHE:
        /favicon.ico
        index.html
        stylesheet.css
        main.js
        NETWORK:
        /login
        /api
        FALLBACK:
        /main.сgi/static.html
        images/large/images/offline.jpg
        *.html/offline.html
      

• checking, downloading, progress, cached
• noupdate, updateready
• .swapCache()

• 4
• 4
• 3.5
• 10.6
• 10

WAT? It doesn't

• work w History.pushState()
• treat Query String as same URI
• have dynamic caching

FileSystem API

• Persistent uploader
• Video game with lots of media assets
• Audio/Photo editor

• Reading and manipulating files: File/Blob, FileList, FileReader
• Creating and writing: Blob, FileWriter
• Directories and file system access: DirectoryReader, FileEntry/DirectoryEntry, LocalFileSystem

        window.requestFileSystem(
          type, // TEMPORARY || PERSISTENT
          size, // storage size in bytes
          successCallback,
          errorCallback
        )
      

• 22

Web Storage

• length storage size
• key(index) returns key by index
• getItem(key) returns item by key
• setItem(key, value) sets/updates
• removeItem(key) removes item by key
• clear() flushes storage

        window.addEventListener(
        "storage", function(
          key,
          oldValue,
          newValue,
          url
        ){}, false)
      

• 4
  200x
• 4
  2x
• 3.5
  170x
• 10.5
  400x
• 8
  80x

Use

• twitter: WebStorage, AppCache
• Gmail: WebStorage, AppCache, IndexedDB?
• facebook: WebStorage

Thanks