Skip to content

Instantly share code, notes, and snippets.

@pixelthing
Created March 14, 2015 01:30
Show Gist options
  • Save pixelthing/8a33f3f783d7d3eca1ca to your computer and use it in GitHub Desktop.
Save pixelthing/8a33f3f783d7d3eca1ca to your computer and use it in GitHub Desktop.
VHN: local storage json speed-up
Using local storage and webworkers to speed up the UX for the homepage ajax requests, and possibly local caching of search results.
- Why use local storage? For subsequent page loads, it makes the homepage load feel instant if the ajax calls don't need to happen (but are instead deferred)
- Why use webworkers? It offloads the ajax calls to another thread (minor win), plus the intensive work of diffing cached and new json data to see if it's been updated is offloaded and doesn't slow the main thread (major win - I guess).
** Angular controller (eg recommendedController)
- wants a json feed of items.
- calls getcacheitems() on a promise
- getcacheitems() returns error or data
- does angular stuff to display data
** getcacheitems()
- is the browser webworkers and localstorage friendly?
- if no
- do "vanilla" ajax request and use json
- if yes
- start webworker script (if not already started)
- look for json in localstorage
- if localstorage cache not found:
- message webworker request to ajax
- if this is a one-off (eg startpage recommended feed), message webworker request to kill itself after running
- if localstorage cache found:
- use json from localstorage
- message webworker existing json
- message webworker request to ajax
- if this is a one-off (eg startpage recommended feed), message webworker request to kill itself after running
- event for recieving message with json from webworker
- store in local storage
- does the data already exist (ie, was a cached version already?)
- if yes
- add UI to say "new stuff, do you want to refresh this bit?"
- if someone clicks yes
- use json
- if no
use json
** Webworker.js
- importScripts() (for ajax framework, eg jquery, angular)
- event for recieving messages about existing json
- event for recieving messages about if this is a one-off request
- event for recieving messages about requesting ajax
- do ajax call, retrieve json
- are we asked to compare with old json?
- if yes
- webworker compares old and new json
- if new json is different
- send message with json
- if no
- send message with json
- if this is a one-off request, kill webworker.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment