SlideShare a Scribd company logo
DIY Scriptable Cache
    Guy	
  Podjarny,	
  CTO	
  
     guypo@blaze.io	
  
    twi;er:	
  @guypod	
  
Agenda
•  Caching 101
•  Mobile & Desktop Scriptable Cache
        –  Concept
        –  6 Steps to Building a Scriptable Cache
        –  Advanced Optimizations
•  Q&A




2	
  
The Value of a Scriptable Cache
•  A dedicated cache, not affected by other sites
•  A robust cache, not cleared by power cycles
•  Better file consolidation
        –  Works in more cases
        –  Cache Friendly
        –  Less requests without more bytes
•  Enable Advanced Optimizations
        –  Robust Prefetching, Async CSS/JS…
•  The Secret to Eternal Youth

3	
  
Not For The Faint of Heart!
•  DIY Scriptable Cache isn’t simple
        –  No magic 3 lines of code
•  Requires HTML & Resource modifications
        –  Some of each
•  The code samples are pseudo-code
        –  They don’t cover all edge cases
        –  They’re not optimized
        –  They probably have syntax errors


4	
  

Recommended for you

Building Hybrid data cluster using PostgreSQL and MongoDB
Building Hybrid data cluster using PostgreSQL and MongoDBBuilding Hybrid data cluster using PostgreSQL and MongoDB
Building Hybrid data cluster using PostgreSQL and MongoDB

This document describes building a hybrid data cluster with MongoDB and PostgreSQL. It discusses using PostgreSQL's Foreign Data Wrapper (FDW) to allow PostgreSQL to query and join data stored in MongoDB collections. The document provides steps to set up a sharded MongoDB cluster, install the MongoDB FDW extension in PostgreSQL, and create foreign tables in PostgreSQL that map to MongoDB collections to allow complex SQL queries on MongoDB data. Live demonstrations are provided of inserting, updating, querying data across the hybrid cluster.

postgresqlforeign data wrapperfdw
Memcached Study
Memcached StudyMemcached Study
Memcached Study

Memcached is a high-performance, distributed memory caching system that is used to speed up dynamic web applications by caching objects in memory to reduce database load. It works by storing objects in memory to allow for fast retrieval, improving response times significantly. Major companies that use memcached include Facebook, Yahoo, Amazon, and LiveJournal. It provides features like consistent hashing for object distribution, multithreading, and replication.

memcachedmemcachedmemcached
Fluent 2012 v2
Fluent 2012   v2Fluent 2012   v2
Fluent 2012 v2

This document discusses how bookmarklets can function as applications by interacting with web pages in a secure manner. It describes how the bookmarklet uses elementFromPoint for fast hit detection, resets CSS to robustly render its UI, and transmits data to a server through signed cross-domain POST messages for security. Examples of embedding the bookmarklet code on a page and customizing its appearance are also provided.

Caching 101
What is a Cache?
•  Storage of previously seen data

•  Reduces costs
•  Accelerates results

•  Sample savings:
        –  Computation costs (avoid regenerating
           content)
        –  Network costs (avoid retransmitting content)


6	
  
Cache Types
                                          Gateway	
  
                                          -­‐	
  Server	
  resources	
  from	
  the	
  faster	
  intranet	
  
                                          -­‐	
  Shared	
  per	
  organizaHon	
  


Browser	
                                                           CDN	
  Edge	
  
-­‐	
  Eliminates	
  network	
  Hme	
                               -­‐	
  reduces	
  roundtrip	
  Hme	
  –	
  latency	
  
-­‐	
  Shared	
  by	
  one	
  user	
                                -­‐	
  Shared	
  by	
  all	
  users	
  




                                            Server-­‐Side	
  
                                            -­‐	
  Reduces	
  server	
  load	
  
                                            -­‐	
  Faster	
  turnaround	
  for	
  response	
  
                                            -­‐	
  Shared	
  by	
  all	
  users	
  
       7	
  
Caching - Expiry
•  Cache Expiry Controlled by Headers
        –  HTTP/1.0: Expires
        –  HTTP/1.1: Cache-Control


•  ETAG/Last-Modified Enables Conditional GET
        –  Fetch Resource “If-Modified-Since”


•  CDN/Server Cache can be manually purged




8	
  

Recommended for you

Postgres connections at scale
Postgres connections at scalePostgres connections at scale
Postgres connections at scale

PostgreSQL connections at scale was the presentation by our external speaker at our 8th opensource database meetup. The presentation helps you comprehend on database connections with its cost, gauge the need for a connection pooler, Pgbouncer overview with its features, monitoring, and deployment best practices.

#postgresql#scaling#database
Clug 2012 March web server optimisation
Clug 2012 March   web server optimisationClug 2012 March   web server optimisation
Clug 2012 March web server optimisation

These slides show how to reduce latency on websites and reduce bandwidth for improved user experience. Covering network, compression, caching, etags, application optimisation, sphinxsearch, memcache, db optimisation

webserveroptimisationmysql
Web Optimization Level: Paranoid
Web Optimization Level: ParanoidWeb Optimization Level: Paranoid
Web Optimization Level: Paranoid

The document discusses various techniques for optimizing web performance, ranging from beginner to advanced levels. At the beginner level, it recommends avoiding redirects, enabling client-side caching, and reducing DOM elements. At the medium level, it suggests minifying JavaScript and CSS. More advanced techniques include image compression, combining files, and server-side gzip compression. The document also provides optimization tips for databases like MongoDB and recommends using asynchronous and non-blocking I/O for costly operations. It advocates for client-side templating to reduce bandwidth usage and improve cacheability.

optimizationwebsiteparanoid
Stale Cache
•  Outdated data in cache
            –  Affects Browser Cache the most
•  Versioning
            –  Add a version number to the filename
            –  Change the version when the file changes
            –  Unique filename = long caching – stale cache

        file.v1.js	
                            file.v2.js	
  
        var	
  today	
  =	
  “11/10/26”	
     var	
  today	
  =	
  “11/10/27”	
  



9	
  
Cache Sizes - Desktop
•  Ranges from 75MB to 250MB
•  Fits about 90-300 pages
         –  Average desktop page size is ~800 KB
•  Cycles fully every 1-4 days
         –  Average user browses 88 pages/day




10	
  
Cache Sizes - Mobile
•  Ranges from 0 MB to 25MB
•  Fits about 0-60 pages (Average size ~400KB)
•  Memory Cache a bit bigger, but volatile




11	
  
Conclusion
         •  Caching is useful and important
         •  Cache sizes are too small
           –  Especially on Mobile
         •  Cache hasn’t evolved with the times
           –  Stopped evolving with HTTP/1.1 in 2004
         •  Browser Cache evolved least of all
           –  Browsers adding smart eviction only now
           –  Still no script interfaces for smart
              caching


12	
  

Recommended for you

Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)

1. A website is loaded by a browser through a multi-step process involving DNS lookups, TCP connections, downloading resources like HTML, CSS, JS, and images. This process can be slow due to the number of individual requests and dependencies between resources. 2. Ways to optimize the loading process include making the server fast, inlining critical resources, gzip compression, an optimized caching strategy, optimizing file delivery through techniques like CDNs and HTTP/2, bundling resources, optimizing images, avoiding unnecessary domains, minimizing web fonts, and JavaScript techniques like PJAX. Minifying assets can also speed up loading.

MongoDB WiredTiger Internals
MongoDB WiredTiger InternalsMongoDB WiredTiger Internals
MongoDB WiredTiger Internals

This presentation drills down into the architectural design of MongoDB's storage layer api and detailed view of WiredTiger.

storageapimongodb
Website performance optimization QA
Website performance optimization QAWebsite performance optimization QA
Website performance optimization QA

This document discusses web performance optimization and provides guidance on ensuring high performance web applications. It covers why performance is important, key performance metrics to measure, common areas to profile like client and server-side processing, requirements for performance testing like goals and load thresholds, and tools for performance testing and profiling like JMeter, dotTrace and SQL Server Profiler. The document also outlines best practices for integrating performance testing into the development workflow when issues are found or time allows before a release.

Scriptable Cache
Scriptable Browser Cache - Concept
•  A cache accessible via JavaScript
         –  Get/Put/Delete Actions
•  What is it good for?
         –  Cache parts of a page/resource
         –  Adapt to cache state
         –  Load resources in different ways
•  Why don’t browsers support it today?
         –  Most likely never saw the need
         –  Useful only for advanced websites
         –  Not due to security concerns (at least not good
            ones)


14	
  
Intro to HTML5 localStorage
•  Dedicated Client-Side Storage
         –  HTML5 standard
         –  Replaces hacky past solutions
•  Primarily used for logical data
         –  Game high-score, webmail drafts…
•  Usually limited to 5 MB
•  Enables simple get/put/remove commands
•  Supported by all modern browsers
         –  Desktop: IE8+, Firefox, Safari, Chrome, Opera
         –  BB 6.0+, most others (http://mobilehtml5.org/)

15	
  
Step 0: Utilities
var	
  sCache	
  =	
  {	
  …	
  
	
  	
  	
  	
  //	
  Short	
  name	
  for	
  localStorage	
  
	
  	
  	
  	
  db:	
  localStorage,	
  
	
  	
  	
  	
  //	
  Method	
  for	
  fetching	
  an	
  URL	
  in	
  sync	
  
	
  	
  	
  	
  getUrlSync:	
  funcHon	
  (url)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  var	
  xhr	
  =	
  new	
  XMLH;pRequest();	
  
	
  	
  	
  	
  	
  	
  	
  	
  xhr.open(	
  ‘GET’,	
  url,	
  false);	
  
	
  	
  	
  	
  	
  	
  	
  	
  xhr.send(null);	
  
	
  	
  	
  	
  	
  	
  	
  	
  if	
  (xhr.status==200)	
  {	
  
                                       	
  return	
  xhr.responseText;	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  else	
  {	
  
                                       	
  return	
  null;	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  }	
  
…}	
  

 16	
  

Recommended for you

Web performance Talk
Web performance TalkWeb performance Talk
Web performance Talk

This slide is about the basics of web performance gives the insite of all the things we can do to achieve high performing web apps

front end engineeringweb speedperformance engineering
Optimizing Your Frontend Performance
Optimizing Your Frontend PerformanceOptimizing Your Frontend Performance
Optimizing Your Frontend Performance

This document discusses various techniques for optimizing frontend performance, including: 1. Using hardware, backend, and frontend optimizations like combined and minified files, CSS sprites, browser caching headers, and content delivery networks. 2. Analyzing performance with tools like Firebug, YSlow, and Google Page Speed to identify opportunities. 3. Specific techniques like gzipping, avoiding redirects, placing scripts at the bottom, and making Ajax cacheable can improve performance.

Storage talk
Storage talkStorage talk
Storage talk

MongoDB stores data in files on disk that are broken into variable-sized extents containing documents. These extents, as well as separate index structures, are memory mapped by the operating system for efficient read/write. A write-ahead journal is used to provide durability and prevent data corruption after crashes by logging operations before writing to the data files. The journal increases write performance by 5-30% but can be optimized using a separate drive. Data fragmentation over time can be addressed using the compact command or adjusting the schema.

Step 1: Store & Load Resources
var	
  sCache	
  =	
  {	
  …	
  
	
  	
  	
  	
  //	
  Method	
  for	
  running	
  an	
  external	
  script	
  
	
  	
  	
  	
  runExtScript:	
  funcHon	
  (url)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  //	
  Check	
  if	
  the	
  data	
  is	
  in	
  localStorage	
  
	
  	
  	
  	
  	
  	
  	
  	
  var	
  data	
  =	
  db.getItem(url);	
  
	
  	
  	
  	
  	
  	
  	
  	
  if	
  (!data)	
  {	
  
                                        	
  //	
  If	
  not,	
  fetch	
  it	
  	
  
                                        	
  data	
  =	
  getUrlSync(url);	
  
	
                                      	
  //	
  Store	
  it	
  for	
  later	
  use	
  
                                        	
  db.setItem(url,	
  data);	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  	
  	
  	
  	
  //	
  Run	
  the	
  script	
  dynamically	
  
	
  	
  	
  	
  	
  	
  	
  	
  addScriptElement(data);	
  
	
  	
  	
  	
  }	
  
…}	
  

 17	
  
Step 2: Recover on error
var	
  sCache	
  =	
  {	
  …	
  
	
  	
  	
  	
  runExtScript:	
  funcHon	
  (url)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  //	
  Check	
  if	
  the	
  data	
  is	
  in	
  localStorage	
  
	
  	
  	
  	
  	
  	
  	
  	
  var	
  data	
  =	
  db	
  &&	
  db.getItem(url);	
  
	
  	
  	
  	
  	
  	
  	
  	
  if	
  (!data)	
  {	
  
                                       	
  //	
  If	
  not,	
  fetch	
  it	
  	
  
                                       	
  data	
  =	
  $.get(url);	
  
                                       	
  //	
  Store	
  it	
  for	
  later	
  use	
  
                                       	
  try	
  {	
  db.setItem(url,	
  data)	
  }	
  catch(e)	
  {	
  }	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  	
  	
  	
  	
  //	
  Run	
  the	
  script	
  dynamically	
  
	
  	
  	
  	
  	
  	
  	
  	
  addScriptElement(data);	
  
	
  	
  	
  	
  }	
  
…}	
  

 18	
  
Step 3: LRU Cache – Cache State
var	
  sCache	
  =	
  {	
  …	
  
	
  	
  	
  	
  //	
  Meta-­‐Data	
  about	
  the	
  cache	
  capacity	
  and	
  state	
  	
  
	
  	
  	
  	
  dat:	
  {size:	
  0,	
  capacity:	
  2*1024*1024,	
  items:	
  {}	
  },	
  
	
  	
  	
  	
  //	
  Load	
  the	
  cache	
  state	
  and	
  items	
  from	
  localStorage	
  
	
  	
  	
  	
  load:	
  funcHon()	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  var	
  str	
  =	
  db	
  &&	
  db.getItem(“cacheData”);	
  
	
  	
  	
  	
  	
  	
  	
  	
  if	
  (data)	
  {	
  dat	
  =	
  JSON.parse(x);	
  }	
  
	
  	
  	
  	
  },	
  	
  
	
  	
  	
  	
  //	
  Persist	
  an	
  updated	
  state	
  to	
  localStorage	
  
	
  	
  	
  	
  save:	
  funcHon()	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  var	
  str	
  =	
  JSON.stringify(dat);	
  
	
  	
  	
  	
  	
  	
  	
  	
  try	
  {db.setItem(“cacheData”,	
  str);	
  }	
  catch(e)	
  {	
  }	
  
	
  	
  	
  	
  },	
  
…	
  }	
  

 19	
  
Step 3: LRU Cache – Storing items
var	
  sCache	
  =	
  {	
  …	
  
	
  	
  	
  	
  storeItem:	
  funcHon(name,	
  data)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  //	
  Do	
  nothing	
  if	
  the	
  single	
  item	
  is	
  greater	
  than	
  our	
  capacity	
  
	
  	
  	
  	
  	
  	
  	
  	
  if	
  (data.length	
  >	
  dat.capacity)	
  return;	
  
	
  	
  	
  	
  	
  	
  	
  	
  //	
  Make	
  room	
  for	
  the	
  object	
  
	
  	
  	
  	
  	
  	
  	
  	
  while(dat.items.length	
  &&	
  (dat.size	
  +	
  data.length)	
  >	
  dat.capacity)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  var	
  elem	
  =	
  dat.pop();	
  //	
  Remove	
  the	
  least	
  recently	
  used	
  element	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  try	
  {	
  db.removeItem(elem.name);	
  }	
  catch(e)	
  {	
  }	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  dat.size	
  -­‐=	
  elem.size;	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  	
  	
  	
  	
  //	
  Store	
  the	
  new	
  element	
  in	
  localStorage	
  and	
  the	
  cache	
  
	
  	
  	
  	
  	
  	
  	
  	
  try	
  {	
  	
  
                                                  	
  db.setItem(name,	
  data);	
  
                                                  	
  dat.size	
  +=	
  data.length;	
  
                                                  	
  dat.items.push	
  ({name:	
  name,	
  size:	
  data.length});	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  catch(e)	
  {	
  }	
  
	
  	
  	
  	
  }	
  …	
  	
  

 20	
  

Recommended for you

Engage 2013 - Multi Channel Data Collection
Engage 2013 - Multi Channel Data CollectionEngage 2013 - Multi Channel Data Collection
Engage 2013 - Multi Channel Data Collection

The document discusses methods for collecting multi-channel data across different domains and platforms. It describes how cross-domain tracking works using shared cookies to pass visitor IDs between sites. It also covers using iframes to collect data across domains by adding tracking code or using postMessages. Additionally, it discusses collecting event-based data using selectors and JavaScript events, and capturing video playback events with HTML5 event listeners.

engage 2013
Nginx: Accelerate Rails, HTTP Tricks
Nginx: Accelerate Rails, HTTP TricksNginx: Accelerate Rails, HTTP Tricks
Nginx: Accelerate Rails, HTTP Tricks

Nginx is a web server that is faster, uses less memory and is more stable than Apache under load. It is better suited for Rails applications and cloud computing. Nginx acts as a proxy, routing requests to application servers. It can perform request filtering, like caching requests, and authentication checks without modifying Rails application code using custom Nginx modules. This allows separating infrastructure concerns from application logic.

railsconfhttpruby
Reverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and VarnishReverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and Varnish

Discover the very wide world of web servers, in addition to the basic web deliverance fonctionnality, we will cover the reverse proxy, the resource caching and the load balancing. Nginx and apache HTTPD will be used as web server and reverse proxy, and to illustrate some caching features we will also present varnish a powerful caching server. To introduce load balancers we will compare between Nginx and Haproxy.

reverse proxycachevarnish
Step 3: LRU Cache – Getting items
var	
  sCache	
  =	
  {	
  …	
  
	
  	
  	
  	
  getItem:	
  funcHon(name)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  //	
  Try	
  to	
  get	
  the	
  item	
  
	
  	
  	
  	
  	
  	
  	
  	
  var	
  data	
  =	
  db	
  &&	
  db.getItem(name);	
  
	
  	
  	
  	
  	
  	
  	
  	
  if	
  (!data)	
  return	
  null;	
  
	
  	
  	
  	
  	
  	
  	
  	
  //	
  Move	
  the	
  element	
  to	
  the	
  top	
  of	
  the	
  array,	
  marking	
  it	
  as	
  used	
  
	
  	
  	
  	
  	
  	
  	
  	
  for(var	
  i=0;i<dat.items.length;i++)	
  {	
  
                                        	
  if	
  (dat.items[i].name	
  ===	
  name)	
  {	
  
                                        	
  	
  	
  	
  	
  	
  dat.items.unshiw(dat.items.splice(i,-­‐1));	
  
                                        	
  	
  	
  	
  	
  	
  break;	
  
                                        	
  }	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  	
  	
  	
  	
  return	
  data;	
  
	
  	
  	
  	
  }	
  
…}	
  

 21	
  
Post Step 3: Revised Run Script
var	
  sCache	
  =	
  {	
  …	
  
	
  	
  	
  	
  runExtScript:	
  funcHon	
  (url)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  //	
  Check	
  if	
  the	
  data	
  is	
  in	
  the	
  cache	
  
	
  	
  	
  	
  	
  	
  	
  	
  var	
  data	
  =	
  getItem(url);	
  
	
  	
  	
  	
  	
  	
  	
  	
  if	
  (!data)	
  {	
  
                                       	
  //	
  If	
  not,	
  fetch	
  it	
  	
  
                                       	
  data	
  =	
  $.get(url);	
  
                                       	
  //	
  Store	
  it	
  for	
  later	
  use	
  
                                       	
  storeItem(url,	
  data);	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  	
  	
  	
  	
  //	
  Run	
  the	
  script	
  
	
  	
  	
  	
  	
  	
  	
  	
  addScriptElement(data);	
  
	
  	
  	
  	
  }	
  
…}	
  

 22	
  
Step 4: Versioning
//	
  Today:	
  File	
  version	
  1	
  
sCache.load();	
  
sCache.runExtScript(‘res.v1.js’);	
  
sCache.save();	
  
	
  
//	
  Tomorrow:	
  File	
  version	
  2	
  
sCache.load();	
  
sCache.runExtScript(‘res.v2.js’);	
  
sCache.save();	
  
	
  
//	
  Old	
  files	
  will	
  implicitly	
  be	
  pushed	
  out	
  of	
  the	
  cache	
  
	
  
//	
  Also	
  work	
  with	
  versioning	
  using	
  signature	
  on	
  content	
  

 23	
  
What Have We Created So Far?
•  Scriptable LRU Cache
         –  Enforces size limits
         –  Recovers from errors
•  Dedicated Cache
         –  Not affected by browsing other sites
•  Robust Cache
         –  Not affected by Mobile Cache Sizes
         –  Survives Power Cycle and Process Reset
•  Still Has Limitations:
         –  Only works on same domain
         –  Resources fetched sequentially


24	
  

Recommended for you

Level Up: 5 Expert Tips for Optimizing WordPress Performance
Level Up: 5 Expert Tips for Optimizing WordPress PerformanceLevel Up: 5 Expert Tips for Optimizing WordPress Performance
Level Up: 5 Expert Tips for Optimizing WordPress Performance

Your WordPress site has the potential to level up. Learn about WordPress optimization with these 5 expert tips.

web developmentwordpresswebsites
SQL Server Integration Services Tips & Tricks
SQL Server Integration Services Tips & TricksSQL Server Integration Services Tips & Tricks
SQL Server Integration Services Tips & Tricks

This document provides tips and tricks for optimizing SSIS packages, including documenting code, establishing naming conventions, leveraging community tasks and components, configuring Visual Studio settings, designing data flows, handling errors, executing tasks in parallel, tuning data flows and queries, optimizing bulk inserts, managing buffer sizes, and monitoring packages. Key recommendations include breaking solutions into logical units, selecting the right SQL technologies, determining data volumes and locations, reusing code through templates, and dropping indexes or batching updates to improve performance.

sql serverssis
Building the Enterprise infrastructure with PostgreSQL as the basis for stori...
Building the Enterprise infrastructure with PostgreSQL as the basis for stori...Building the Enterprise infrastructure with PostgreSQL as the basis for stori...
Building the Enterprise infrastructure with PostgreSQL as the basis for stori...

In my talk, I will tell how we built a geographically distributed system of personal data storage based on Open Source software and PostgreSQL. The concept of the inCountry business is to provide customers with a ready-to-use infrastructure for personal data storage. Our business customers are ensured that their customer’s personal data is securely stored within their country’s borders. We wrote an API and SDK and built a variety of services. Our system complies with generally accepted security standards (SOC Type 1, Type 2, PCI DSS, etc.). We built our infrastructure with Consul, Nomad, and Vault, used PostgreSQL, ElasticSearch as a storage system, Nginx, Jenkins, Artifactory, other tools to automate management and deployment. We have assembled our development and management teams - DevOps, Security, Monitoring, and DBA. We use both cloud providers and bare-metal servers located in different regions of the world. Development of the system architecture and ensuring the stability of the infrastructure, consistent and secure operation of all its components is the main task facing our teams.

postgresqlhigh availabilitypatroni
Step 5: Cross-Domain Resources
•  Why Cross Domain?
         –  Enables Domain Sharding
         –  Various Architecture Reasons
•  Solution: Self-Registering Scripts
         –  Scripts load themselves into the cache
         –  Added to the page as standard scripts
         –  Note that one URL stores data as another URL
   h;p://1.foo.com/res.v1.js	
      h;p://1.foo.com/store.res.v1.js	
  
   alert(1);	
                      sCache.storeItem(	
  
                                    ‘h;p://1.foo.com/res.v1.js’,	
  
                                    ’alert(1)’);	
  



25	
  
Step 6: Fetching Resources In Parallel
<script>sCache.load()</script>	
  
	
  
<script>	
  
//	
  Resources	
  downloaded	
  in	
  parallel	
  
doc.write(“<scr”+”ipt	
  src=‘h;p://foo.com/store.foo.v1.js’></scr”+”ipt>”);	
  
doc.write(“<scr”+”ipt	
  src=‘h;p://bar.com/store.bar.v1.js’></scr”+”ipt>”);	
  
</script>	
  
	
  
<!-­‐-­‐	
  	
  Scripts	
  won’t	
  run	
  unHl	
  previous	
  ones	
  complete,	
  and	
  data	
  is	
  cached	
  -­‐-­‐>	
  
<script>sCache.runExtScript(‘h;p://foo.com/foo.v1.js’);	
  </script>	
  
<script>sCache.runExtScript(‘h;p://bar.com/bar.v1.js’);	
  </script>	
  
<!-­‐-­‐	
  	
  Note	
  the	
  different	
  URLs!	
  -­‐-­‐>	
  
	
  
<script>sCache.save();</script>	
  




 26	
  
Step 6: Parallel Resources + Cache Check
var	
  sCache	
  =	
  {	
  …	
  
	
  	
  	
  	
  loadResourceViaWrite:	
  funcHon	
  (path,	
  file)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  //	
  Check	
  if	
  the	
  data	
  is	
  in	
  the	
  cache	
  
	
  	
  	
  	
  	
  	
  	
  	
  var	
  data	
  =	
  getItem(url);	
  
	
  	
  	
  	
  	
  	
  	
  	
  if	
  (!data)	
  {	
  
                                       	
  //	
  If	
  not,	
  doc-­‐write	
  the	
  store	
  URL	
  
                                       	
  doc.write(“<scr”+”ipt	
  src=‘”	
  +	
  path	
  +	
  	
  
                                       	
  	
  	
  	
  	
  “store.”	
  +	
  file	
  +	
  //	
  Add	
  the	
  “store.”	
  prefix	
  
                                       	
  	
  	
  	
  	
  “’></scr”+”ipt>”);	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  }	
  
…}	
  



 27	
  
Step 6: Parallel Downloads, with Cache
<script>sCache.load()</script>	
  
	
  
<script>	
  
//	
  Resources	
  downloaded	
  in	
  parallel,	
  only	
  if	
  needed	
  
sCache.loadResourceViaWrite("h;p://foo.com/”,”foo.v1.js”);	
  
sCache.loadResourceViaWrite("h;p://bar.com/”,”bar.v1.js”);	
  
</script>	
  
	
  
<!-­‐-­‐	
  	
  Scripts	
  won’t	
  run	
  unHl	
  previous	
  ones	
  complete,	
  and	
  data	
  is	
  cached	
  -­‐-­‐>	
  
<script>sCache.runExtScript(‘h;p://foo.com/foo.v1.js’);	
  </script>	
  
<script>sCache.runExtScript(‘h;p://bar.com/bar.v1.js’);	
  </script>	
  
<!-­‐-­‐	
  	
  Note	
  the	
  different	
  URLs!	
  -­‐-­‐>	
  
	
  
<script>sCache.save();</script>	
  




 28	
  

Recommended for you

Zend Server Data Caching
Zend Server Data CachingZend Server Data Caching
Zend Server Data Caching

This document provides a practical guide to caching data with Zend Server. It introduces the Zend Data Cache API and shows how to cache the results of a function that retrieves recent blog posts from a database. The function is modified to first check the cache for the results before querying the database. If no results are found in the cache, it queries the database and stores the results in the cache. By caching frequently accessed data, significant performance improvements can be achieved by reducing database queries. The document also discusses best practices for caching, such as profiling applications to identify bottlenecks and determining appropriate cache lifetimes based on how often data changes.

Performance Optimization using Caching | Swatantra Kumar
Performance Optimization using Caching | Swatantra KumarPerformance Optimization using Caching | Swatantra Kumar
Performance Optimization using Caching | Swatantra Kumar

This document discusses various caching techniques that can be used to improve performance optimization. It defines caching as temporarily storing frequently accessed data for rapid access. The main reasons for using caching are to reduce database queries, external service requests, computation time, and filesystem access in order to lighten server load and send less data. Techniques covered include full page, partial page, SQL query, processing result, pre-generation, web service response, and browser caching. The document also discusses different storage options for caching like MySQL query cache, disk storage, Memcache, and Redis and emphasizes the importance of defining unique cache keys.

cachingcacheredis
Hosting huge amount of binaries in JCR
Hosting huge amount of binaries in JCRHosting huge amount of binaries in JCR
Hosting huge amount of binaries in JCR

Introducing Apache Jackrabbit VFS DataStore which can be used as binary data store in an enterprise scale backend as well as S3DataStore.

jackrabbitapachevfs
What Have We Created?
•  Scriptable LRU Cache
         –  Enforces size limits
         –  Recovers from errors
•  Dedicated Cache
         –  Not affected by browsing other sites
•  Robust Cache
         –  Not affected by Mobile Cache Sizes
         –  Survives Power Cycle and Process Reset
•  Works across domains
•  Resources downloaded in parallel

29	
  
Understanding localStorage Quota
•  Many browsers use UTF-16 for characters
         –  Effectively halves the storage space
         –  Safest to limit capacity to 2 MB
•  Best value: Cache CSS & JavaScript
         –  Biggest byte-for-byte impact on page load
         –  Lowest variation allows for longest caching
         –  Images are borderline too big for capacity
•  Remember: Quotas are per top-level-domain
         –  *.foo.com share the same quota



30	
  
Advanced Optimizations
Adaptive Consolidation
•  Fetch Several Resources with One Request
         –  Store them as Fragments
•  Adapt to Browser Cache State
         –  If resources aren’t in cache, fetch them as one file
         –  If some resources are in cache, fetch separate files
         –  Optionally consolidate missing pieces
   h;p://1.foo.com/foo.v1.js	
        h;p://1.foo.com/store.res.v1.js	
  
   alert(1);	
                        sCache.storeItem(‘/foo.v1.js’,	
  
                                      ’alert(1)’);	
  
   h;p://1.foo.com/bar.v1.js	
        sCache.storeItem(‘/bar.v1.js’,	
  
                                      ’alert(2)’);	
  
   alert(2);	
                        	
  


32	
  

Recommended for you

Asp.net
Asp.netAsp.net
Asp.net

This document discusses different types of caching in ASP.NET, including output caching, data caching, object caching, class caching, and configuration caching. Output caching stores rendered HTML pages in memory to return cached copies to subsequent requests rather than regenerating pages. Data caching stores data from data sources in memory to fulfill future requests from the cache rather than accessing the data source again. Object caching stores objects like data-bound controls in server memory. Class caching caches compiled web pages or services in server memory. Configuration caching stores application configuration information in server memory.

your browser, my storage
your browser, my storageyour browser, my storage
your browser, my storage

This document discusses approaches for storing data on the client side beyond a page refresh without transmitting it to the server. It reviews the history of cookies, Flash cookies, Gears, and other approaches. It then summarizes modern approaches like Application Cache, Web Storage, Web SQL Database, IndexedDB, and the File API which allow persistent local storage on the client. It concludes with tips for using these storage options and libraries to help manage offline data.

codemotionromehtml5
Scaling in Mind (Case study of Drupal Core)
Scaling in Mind (Case study of Drupal Core)Scaling in Mind (Case study of Drupal Core)
Scaling in Mind (Case study of Drupal Core)

Introduce Scaling design in Drupal core, from drupal 6 to drupal 7. This slides for PHP Conference Taiwan 2014.

Adaptive vs. Simple Consolidation - #2

•  User browsers Page A, then Page B
         –  Assume each JS file is 20KB in Size

   OpGmizaGon	
                          Total	
  JS	
  Requests	
                Total	
  JS	
  Bytes	
  
   None	
                                            3	
                                 60KB	
  
   Simple	
  ConsolidaHon	
                          2	
                                100KB	
  
   AdapHve	
  ConsolidaHon	
                         1	
                                 60KB	
  


   Page	
  A	
                                                Page	
  B	
  
   <script	
  src=“a.js”></script>	
                          <script	
  src=“a.js”></script>	
  
   <script	
  src=“b.js”></script>	
                          <script	
  src=“b.js”></script>	
  
   <script	
  src=“c.js”></script>	
  


33	
  
Adaptive vs. Simple Consolidation - #2

•  User browsers Page A, then Page B
         –  Assume each JS file is 20KB in Size

   OpGmizaGon	
                          Total	
  JS	
  Requests	
                Total	
  JS	
  Bytes	
  
   None	
                                            4	
                                 80KB	
  
   Simple	
  ConsolidaHon	
                          2	
                                140KB	
  
   AdapHve	
  ConsolidaHon	
                         2	
                                 80KB	
  

   Page	
  A	
                                                Page	
  B	
  
   <script	
  src=“a.js”></script>	
                          <script	
  src=“a.js”></script>	
  
   <script	
  src=“b.js”></script>	
                          <script	
  src=“b.js”></script>	
  
   <script	
  src=“c.js”></script>	
                          <script	
  src=“c.js”></script>	
  
                                                              <script	
  src=“d.js”></script>	
  


34	
  
Adaptive vs. Simple Consolidation - #3
           •  External & Inline Scripts are often related
           •  Breaks Simple Consolidation
           •  Doesn’t break Adaptive Consolidation
                                                                       StoreAll.js	
  
a.js	
              var	
  mode=1;	
  
                                                                       sCache.storeItem(‘a.js’,’var	
  mode=1;’)	
  
                                                                       sCache.storeItem(‘b.js’,’alert(userType);’)	
  
b.js	
              alert(userType);	
  
                                                                       OpHmized	
  Page:	
  
Page:	
   <script	
  src=“a.js”></script>	
                            <script>sCache.runExtScript(‘a.js’)</script>	
  
                    <script>	
                                         <script>	
  
                    var	
  userType	
  =	
  “user”;	
                  var	
  userType	
  =	
  “user”;	
  
                    If	
  (mode==1)	
  userType	
  =	
  “admin”;	
     If	
  (mode==1)	
  userType	
  =	
  “admin”;	
  
                    </script>	
                                        </script>	
  
                    <script	
  src=“b.js”></script>	
                  <script>sCache.runExtScript(‘b.js’)</script>	
  

           35	
  
Robust Prefetching
•  In-Page Prefetching
         –  Fetch CSS/JS Resources at top of page, to be
            used later
•  Next-Page Prefetching
         –  Fetch resources for future pages
•  Robust and Predictable
         –  Not invalidated due to content type change in FF
         –  Not invalided by cookies set in IE
         –  Not reloaded when entering same URL in Safari
         –  …


36	
  

Recommended for you

Mini-Training: To cache or not to cache
Mini-Training: To cache or not to cacheMini-Training: To cache or not to cache
Mini-Training: To cache or not to cache

In today’s systems , the time it takes to bring data to the end-user can be very long, especially under heavy load. An application can often increase performance by using an appropriate caching system. There are many caching level that you can use in our application today : CDN, In-Memory/Local Cache, Distributed Cache, Outut Cache, Browser Cache, Html Cache

distributed cachehtmlcache
Caching on the web
Caching on the webCaching on the web
Caching on the web

Caching is an important technique for improving performance on the web. It allows frequently requested resources like documents, images, and scripts to be stored locally for faster retrieval. Caching can occur at various levels including in the browser, network through CDNs, on servers through tools like Nginx, and within applications using memoization and cache stores. Defining appropriate caching policies and strategies using HTTP headers is key to an efficient caching implementation.

railscachehttp
Masterclass Live: Amazon EMR
Masterclass Live: Amazon EMRMasterclass Live: Amazon EMR
Masterclass Live: Amazon EMR

Abhishek Sinha is a senior product manager at Amazon for Amazon EMR. Amazon EMR allows customers to easily run data frameworks like Hadoop, Spark, and Presto on AWS. It provides a managed platform and tools to launch clusters in minutes that leverage the elasticity of AWS. Customers can customize clusters and choose from different applications, instances types, and access methods. Amazon EMR allows separating compute and storage where the low-cost S3 can be used for persistent storage while clusters are dynamically scaled based on workload.

awsaws-loft-london-2016aws cloud
Async JS/CSS
•  Async JS: Run scripts without blocking page
         –  Doable without Scriptable Cache
         –  Scriptable Cache allows script prefetching
         –  Eliminates need to make fetch scripts block
•  Async CSS: Download CSS without blocking
         –  CSS ordinarily delay resource download & render
         –  You can’t always know when a CSS file loaded
         –  Scriptable Cache enables “onload” event
         –  Can still block rendering if desired


37	
  
Summary
•  Caching is good – you should use it!
•  Scriptable Cache is better
         –  More robust
         –  More reasonably sized on Mobile
         –  Enables important optimizations
•  The two aren’t mutually exclusive
         –  “store” files should be cacheable
         –  Images should likely keep using regular cache


38	
  
Or… Use the Blaze Scriptable Cache!
•  Blaze automates Front-End Optimization
          –  No Software, Hardware or Code Changes needed
          –  All the pitfalls and complexities taken care of
•  Blaze optimizes Mobile & Desktop Websites
          –  Applying the right optimizations for each client


See how much faster Blaze
can make your site with our
Free Report: www.blaze.io
Contact Us: contact@blaze.io




 39	
  
QuesGons?	
  




DIY Scriptable Cache
   Guy Podjarny, CTO
     guypo@blaze.io
    twitter: @guypod

Recommended for you

The Proto-Burst Buffer: Experience with the flash-based file system on SDSC's...
The Proto-Burst Buffer: Experience with the flash-based file system on SDSC's...The Proto-Burst Buffer: Experience with the flash-based file system on SDSC's...
The Proto-Burst Buffer: Experience with the flash-based file system on SDSC's...

Glenn K. Lockwood's document summarizes his professional background and experience with data-intensive computing systems. It then discusses the Gordon supercomputer deployed at SDSC in 2012, which was one of the world's first systems to use flash storage. The document analyzes Gordon's architecture using burst buffers and SSDs, experiences using the flash file system, and lessons learned. It also compares Gordon's proto-burst buffer approach to the dedicated burst buffer nodes on the Cori supercomputer.

flashhpcburst buffer
Berlin Buzz Words - Apache Drill by Ted Dunning & Michael Hausenblas
Berlin Buzz Words - Apache Drill by Ted Dunning & Michael HausenblasBerlin Buzz Words - Apache Drill by Ted Dunning & Michael Hausenblas
Berlin Buzz Words - Apache Drill by Ted Dunning & Michael Hausenblas

An implementation Deep Dive on Apache Drill with use-cases and an Apache Drill demo. Given by Ted Dunning & Michael Hausenblas on June 2013.

apache drillmichael hausenblasmapr
10 things i wish i'd known before using spark in production
10 things i wish i'd known before using spark in production10 things i wish i'd known before using spark in production
10 things i wish i'd known before using spark in production

Vous avez récemment commencé à travailler sur Spark et vos jobs prennent une éternité pour se terminer ? Cette présentation est faite pour vous. Himanshu Arora et Nitya Nand YADAV ont rassemblé de nombreuses bonnes pratiques, optimisations et ajustements qu'ils ont appliqué au fil des années en production pour rendre leurs jobs plus rapides et moins consommateurs de ressources. Dans cette présentation, ils nous apprennent les techniques avancées d'optimisation de Spark, les formats de sérialisation des données, les formats de stockage, les optimisations hardware, contrôle sur la parallélisme, paramétrages de resource manager, meilleur data localité et l'optimisation du GC etc. Ils nous font découvrir également l'utilisation appropriée de RDD, DataFrame et Dataset afin de bénéficier pleinement des optimisations internes apportées par Spark.

sparkbig datadata engineering

More Related Content

What's hot

캐시 분산처리 인프라
캐시 분산처리 인프라캐시 분산처리 인프라
캐시 분산처리 인프라
Park Chunduck
 
Introduction to memcached
Introduction to memcachedIntroduction to memcached
Introduction to memcached
Jurriaan Persyn
 
Client-side Website Optimization
Client-side Website OptimizationClient-side Website Optimization
Client-side Website Optimization
Radu Pintilie
 
Building Hybrid data cluster using PostgreSQL and MongoDB
Building Hybrid data cluster using PostgreSQL and MongoDBBuilding Hybrid data cluster using PostgreSQL and MongoDB
Building Hybrid data cluster using PostgreSQL and MongoDB
Ashnikbiz
 
Memcached Study
Memcached StudyMemcached Study
Memcached Study
nam kwangjin
 
Fluent 2012 v2
Fluent 2012   v2Fluent 2012   v2
Fluent 2012 v2
Shalendra Chhabra
 
Postgres connections at scale
Postgres connections at scalePostgres connections at scale
Postgres connections at scale
Mydbops
 
Clug 2012 March web server optimisation
Clug 2012 March   web server optimisationClug 2012 March   web server optimisation
Clug 2012 March web server optimisation
grooverdan
 
Web Optimization Level: Paranoid
Web Optimization Level: ParanoidWeb Optimization Level: Paranoid
Web Optimization Level: Paranoid
robin_sy
 
Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)
strommen
 
MongoDB WiredTiger Internals
MongoDB WiredTiger InternalsMongoDB WiredTiger Internals
MongoDB WiredTiger Internals
Norberto Leite
 
Website performance optimization QA
Website performance optimization QAWebsite performance optimization QA
Website performance optimization QA
Denis Dudaev
 
Web performance Talk
Web performance TalkWeb performance Talk
Web performance Talk
Prasoon Agrawal
 
Optimizing Your Frontend Performance
Optimizing Your Frontend PerformanceOptimizing Your Frontend Performance
Optimizing Your Frontend Performance
Thomas Weinert
 
Storage talk
Storage talkStorage talk
Storage talk
christkv
 
Engage 2013 - Multi Channel Data Collection
Engage 2013 - Multi Channel Data CollectionEngage 2013 - Multi Channel Data Collection
Engage 2013 - Multi Channel Data Collection
Webtrends
 
Nginx: Accelerate Rails, HTTP Tricks
Nginx: Accelerate Rails, HTTP TricksNginx: Accelerate Rails, HTTP Tricks
Nginx: Accelerate Rails, HTTP Tricks
Adam Wiggins
 
Reverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and VarnishReverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and Varnish
El Mahdi Benzekri
 
Level Up: 5 Expert Tips for Optimizing WordPress Performance
Level Up: 5 Expert Tips for Optimizing WordPress PerformanceLevel Up: 5 Expert Tips for Optimizing WordPress Performance
Level Up: 5 Expert Tips for Optimizing WordPress Performance
Pantheon
 
SQL Server Integration Services Tips & Tricks
SQL Server Integration Services Tips & TricksSQL Server Integration Services Tips & Tricks
SQL Server Integration Services Tips & Tricks
Guillermo Caicedo
 

What's hot (20)

캐시 분산처리 인프라
캐시 분산처리 인프라캐시 분산처리 인프라
캐시 분산처리 인프라
 
Introduction to memcached
Introduction to memcachedIntroduction to memcached
Introduction to memcached
 
Client-side Website Optimization
Client-side Website OptimizationClient-side Website Optimization
Client-side Website Optimization
 
Building Hybrid data cluster using PostgreSQL and MongoDB
Building Hybrid data cluster using PostgreSQL and MongoDBBuilding Hybrid data cluster using PostgreSQL and MongoDB
Building Hybrid data cluster using PostgreSQL and MongoDB
 
Memcached Study
Memcached StudyMemcached Study
Memcached Study
 
Fluent 2012 v2
Fluent 2012   v2Fluent 2012   v2
Fluent 2012 v2
 
Postgres connections at scale
Postgres connections at scalePostgres connections at scale
Postgres connections at scale
 
Clug 2012 March web server optimisation
Clug 2012 March   web server optimisationClug 2012 March   web server optimisation
Clug 2012 March web server optimisation
 
Web Optimization Level: Paranoid
Web Optimization Level: ParanoidWeb Optimization Level: Paranoid
Web Optimization Level: Paranoid
 
Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)
 
MongoDB WiredTiger Internals
MongoDB WiredTiger InternalsMongoDB WiredTiger Internals
MongoDB WiredTiger Internals
 
Website performance optimization QA
Website performance optimization QAWebsite performance optimization QA
Website performance optimization QA
 
Web performance Talk
Web performance TalkWeb performance Talk
Web performance Talk
 
Optimizing Your Frontend Performance
Optimizing Your Frontend PerformanceOptimizing Your Frontend Performance
Optimizing Your Frontend Performance
 
Storage talk
Storage talkStorage talk
Storage talk
 
Engage 2013 - Multi Channel Data Collection
Engage 2013 - Multi Channel Data CollectionEngage 2013 - Multi Channel Data Collection
Engage 2013 - Multi Channel Data Collection
 
Nginx: Accelerate Rails, HTTP Tricks
Nginx: Accelerate Rails, HTTP TricksNginx: Accelerate Rails, HTTP Tricks
Nginx: Accelerate Rails, HTTP Tricks
 
Reverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and VarnishReverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and Varnish
 
Level Up: 5 Expert Tips for Optimizing WordPress Performance
Level Up: 5 Expert Tips for Optimizing WordPress PerformanceLevel Up: 5 Expert Tips for Optimizing WordPress Performance
Level Up: 5 Expert Tips for Optimizing WordPress Performance
 
SQL Server Integration Services Tips & Tricks
SQL Server Integration Services Tips & TricksSQL Server Integration Services Tips & Tricks
SQL Server Integration Services Tips & Tricks
 

Similar to Mobile & Desktop Cache 2.0: How To Create A Scriptable Cache

Building the Enterprise infrastructure with PostgreSQL as the basis for stori...
Building the Enterprise infrastructure with PostgreSQL as the basis for stori...Building the Enterprise infrastructure with PostgreSQL as the basis for stori...
Building the Enterprise infrastructure with PostgreSQL as the basis for stori...
PavelKonotopov
 
Zend Server Data Caching
Zend Server Data CachingZend Server Data Caching
Zend Server Data Caching
El Taller Web
 
Performance Optimization using Caching | Swatantra Kumar
Performance Optimization using Caching | Swatantra KumarPerformance Optimization using Caching | Swatantra Kumar
Performance Optimization using Caching | Swatantra Kumar
Swatantra Kumar
 
Hosting huge amount of binaries in JCR
Hosting huge amount of binaries in JCRHosting huge amount of binaries in JCR
Hosting huge amount of binaries in JCR
Woonsan Ko
 
Asp.net
Asp.netAsp.net
Asp.net
ashish kumar
 
your browser, my storage
your browser, my storageyour browser, my storage
your browser, my storage
Francesco Fullone
 
Scaling in Mind (Case study of Drupal Core)
Scaling in Mind (Case study of Drupal Core)Scaling in Mind (Case study of Drupal Core)
Scaling in Mind (Case study of Drupal Core)
jimyhuang
 
Mini-Training: To cache or not to cache
Mini-Training: To cache or not to cacheMini-Training: To cache or not to cache
Mini-Training: To cache or not to cache
Betclic Everest Group Tech Team
 
Caching on the web
Caching on the webCaching on the web
Caching on the web
Jean Carlo Emer
 
Masterclass Live: Amazon EMR
Masterclass Live: Amazon EMRMasterclass Live: Amazon EMR
Masterclass Live: Amazon EMR
Amazon Web Services
 
The Proto-Burst Buffer: Experience with the flash-based file system on SDSC's...
The Proto-Burst Buffer: Experience with the flash-based file system on SDSC's...The Proto-Burst Buffer: Experience with the flash-based file system on SDSC's...
The Proto-Burst Buffer: Experience with the flash-based file system on SDSC's...
Glenn K. Lockwood
 
Berlin Buzz Words - Apache Drill by Ted Dunning & Michael Hausenblas
Berlin Buzz Words - Apache Drill by Ted Dunning & Michael HausenblasBerlin Buzz Words - Apache Drill by Ted Dunning & Michael Hausenblas
Berlin Buzz Words - Apache Drill by Ted Dunning & Michael Hausenblas
MapR Technologies
 
10 things i wish i'd known before using spark in production
10 things i wish i'd known before using spark in production10 things i wish i'd known before using spark in production
10 things i wish i'd known before using spark in production
Paris Data Engineers !
 
phptek13 - Caching and tuning fun tutorial
phptek13 - Caching and tuning fun tutorialphptek13 - Caching and tuning fun tutorial
phptek13 - Caching and tuning fun tutorial
Wim Godden
 
High Availability Content Caching with NGINX
High Availability Content Caching with NGINXHigh Availability Content Caching with NGINX
High Availability Content Caching with NGINX
NGINX, Inc.
 
Apache Spark
Apache SparkApache Spark
Apache Spark
SugumarSarDurai
 
OpenStack DRaaS - Freezer - 101
OpenStack DRaaS - Freezer - 101OpenStack DRaaS - Freezer - 101
OpenStack DRaaS - Freezer - 101
Trinath Somanchi
 
CHI-YAPC-2009
CHI-YAPC-2009CHI-YAPC-2009
CHI-YAPC-2009
jonswar
 
Caching and tuning fun for high scalability
Caching and tuning fun for high scalabilityCaching and tuning fun for high scalability
Caching and tuning fun for high scalability
Wim Godden
 
Scaling PHP apps
Scaling PHP appsScaling PHP apps
Scaling PHP apps
Matteo Moretti
 

Similar to Mobile & Desktop Cache 2.0: How To Create A Scriptable Cache (20)

Building the Enterprise infrastructure with PostgreSQL as the basis for stori...
Building the Enterprise infrastructure with PostgreSQL as the basis for stori...Building the Enterprise infrastructure with PostgreSQL as the basis for stori...
Building the Enterprise infrastructure with PostgreSQL as the basis for stori...
 
Zend Server Data Caching
Zend Server Data CachingZend Server Data Caching
Zend Server Data Caching
 
Performance Optimization using Caching | Swatantra Kumar
Performance Optimization using Caching | Swatantra KumarPerformance Optimization using Caching | Swatantra Kumar
Performance Optimization using Caching | Swatantra Kumar
 
Hosting huge amount of binaries in JCR
Hosting huge amount of binaries in JCRHosting huge amount of binaries in JCR
Hosting huge amount of binaries in JCR
 
Asp.net
Asp.netAsp.net
Asp.net
 
your browser, my storage
your browser, my storageyour browser, my storage
your browser, my storage
 
Scaling in Mind (Case study of Drupal Core)
Scaling in Mind (Case study of Drupal Core)Scaling in Mind (Case study of Drupal Core)
Scaling in Mind (Case study of Drupal Core)
 
Mini-Training: To cache or not to cache
Mini-Training: To cache or not to cacheMini-Training: To cache or not to cache
Mini-Training: To cache or not to cache
 
Caching on the web
Caching on the webCaching on the web
Caching on the web
 
Masterclass Live: Amazon EMR
Masterclass Live: Amazon EMRMasterclass Live: Amazon EMR
Masterclass Live: Amazon EMR
 
The Proto-Burst Buffer: Experience with the flash-based file system on SDSC's...
The Proto-Burst Buffer: Experience with the flash-based file system on SDSC's...The Proto-Burst Buffer: Experience with the flash-based file system on SDSC's...
The Proto-Burst Buffer: Experience with the flash-based file system on SDSC's...
 
Berlin Buzz Words - Apache Drill by Ted Dunning & Michael Hausenblas
Berlin Buzz Words - Apache Drill by Ted Dunning & Michael HausenblasBerlin Buzz Words - Apache Drill by Ted Dunning & Michael Hausenblas
Berlin Buzz Words - Apache Drill by Ted Dunning & Michael Hausenblas
 
10 things i wish i'd known before using spark in production
10 things i wish i'd known before using spark in production10 things i wish i'd known before using spark in production
10 things i wish i'd known before using spark in production
 
phptek13 - Caching and tuning fun tutorial
phptek13 - Caching and tuning fun tutorialphptek13 - Caching and tuning fun tutorial
phptek13 - Caching and tuning fun tutorial
 
High Availability Content Caching with NGINX
High Availability Content Caching with NGINXHigh Availability Content Caching with NGINX
High Availability Content Caching with NGINX
 
Apache Spark
Apache SparkApache Spark
Apache Spark
 
OpenStack DRaaS - Freezer - 101
OpenStack DRaaS - Freezer - 101OpenStack DRaaS - Freezer - 101
OpenStack DRaaS - Freezer - 101
 
CHI-YAPC-2009
CHI-YAPC-2009CHI-YAPC-2009
CHI-YAPC-2009
 
Caching and tuning fun for high scalability
Caching and tuning fun for high scalabilityCaching and tuning fun for high scalability
Caching and tuning fun for high scalability
 
Scaling PHP apps
Scaling PHP appsScaling PHP apps
Scaling PHP apps
 

Recently uploaded

Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 

Recently uploaded (20)

Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 

Mobile & Desktop Cache 2.0: How To Create A Scriptable Cache

  • 1. DIY Scriptable Cache Guy  Podjarny,  CTO   guypo@blaze.io   twi;er:  @guypod  
  • 2. Agenda •  Caching 101 •  Mobile & Desktop Scriptable Cache –  Concept –  6 Steps to Building a Scriptable Cache –  Advanced Optimizations •  Q&A 2  
  • 3. The Value of a Scriptable Cache •  A dedicated cache, not affected by other sites •  A robust cache, not cleared by power cycles •  Better file consolidation –  Works in more cases –  Cache Friendly –  Less requests without more bytes •  Enable Advanced Optimizations –  Robust Prefetching, Async CSS/JS… •  The Secret to Eternal Youth 3  
  • 4. Not For The Faint of Heart! •  DIY Scriptable Cache isn’t simple –  No magic 3 lines of code •  Requires HTML & Resource modifications –  Some of each •  The code samples are pseudo-code –  They don’t cover all edge cases –  They’re not optimized –  They probably have syntax errors 4  
  • 6. What is a Cache? •  Storage of previously seen data •  Reduces costs •  Accelerates results •  Sample savings: –  Computation costs (avoid regenerating content) –  Network costs (avoid retransmitting content) 6  
  • 7. Cache Types Gateway   -­‐  Server  resources  from  the  faster  intranet   -­‐  Shared  per  organizaHon   Browser   CDN  Edge   -­‐  Eliminates  network  Hme   -­‐  reduces  roundtrip  Hme  –  latency   -­‐  Shared  by  one  user   -­‐  Shared  by  all  users   Server-­‐Side   -­‐  Reduces  server  load   -­‐  Faster  turnaround  for  response   -­‐  Shared  by  all  users   7  
  • 8. Caching - Expiry •  Cache Expiry Controlled by Headers –  HTTP/1.0: Expires –  HTTP/1.1: Cache-Control •  ETAG/Last-Modified Enables Conditional GET –  Fetch Resource “If-Modified-Since” •  CDN/Server Cache can be manually purged 8  
  • 9. Stale Cache •  Outdated data in cache –  Affects Browser Cache the most •  Versioning –  Add a version number to the filename –  Change the version when the file changes –  Unique filename = long caching – stale cache file.v1.js   file.v2.js   var  today  =  “11/10/26”   var  today  =  “11/10/27”   9  
  • 10. Cache Sizes - Desktop •  Ranges from 75MB to 250MB •  Fits about 90-300 pages –  Average desktop page size is ~800 KB •  Cycles fully every 1-4 days –  Average user browses 88 pages/day 10  
  • 11. Cache Sizes - Mobile •  Ranges from 0 MB to 25MB •  Fits about 0-60 pages (Average size ~400KB) •  Memory Cache a bit bigger, but volatile 11  
  • 12. Conclusion •  Caching is useful and important •  Cache sizes are too small –  Especially on Mobile •  Cache hasn’t evolved with the times –  Stopped evolving with HTTP/1.1 in 2004 •  Browser Cache evolved least of all –  Browsers adding smart eviction only now –  Still no script interfaces for smart caching 12  
  • 14. Scriptable Browser Cache - Concept •  A cache accessible via JavaScript –  Get/Put/Delete Actions •  What is it good for? –  Cache parts of a page/resource –  Adapt to cache state –  Load resources in different ways •  Why don’t browsers support it today? –  Most likely never saw the need –  Useful only for advanced websites –  Not due to security concerns (at least not good ones) 14  
  • 15. Intro to HTML5 localStorage •  Dedicated Client-Side Storage –  HTML5 standard –  Replaces hacky past solutions •  Primarily used for logical data –  Game high-score, webmail drafts… •  Usually limited to 5 MB •  Enables simple get/put/remove commands •  Supported by all modern browsers –  Desktop: IE8+, Firefox, Safari, Chrome, Opera –  BB 6.0+, most others (http://mobilehtml5.org/) 15  
  • 16. Step 0: Utilities var  sCache  =  {  …          //  Short  name  for  localStorage          db:  localStorage,          //  Method  for  fetching  an  URL  in  sync          getUrlSync:  funcHon  (url)  {                  var  xhr  =  new  XMLH;pRequest();                  xhr.open(  ‘GET’,  url,  false);                  xhr.send(null);                  if  (xhr.status==200)  {    return  xhr.responseText;                  }  else  {    return  null;                  }          }   …}   16  
  • 17. Step 1: Store & Load Resources var  sCache  =  {  …          //  Method  for  running  an  external  script          runExtScript:  funcHon  (url)  {                  //  Check  if  the  data  is  in  localStorage                  var  data  =  db.getItem(url);                  if  (!data)  {    //  If  not,  fetch  it      data  =  getUrlSync(url);      //  Store  it  for  later  use    db.setItem(url,  data);                  }                  //  Run  the  script  dynamically                  addScriptElement(data);          }   …}   17  
  • 18. Step 2: Recover on error var  sCache  =  {  …          runExtScript:  funcHon  (url)  {                  //  Check  if  the  data  is  in  localStorage                  var  data  =  db  &&  db.getItem(url);                  if  (!data)  {    //  If  not,  fetch  it      data  =  $.get(url);    //  Store  it  for  later  use    try  {  db.setItem(url,  data)  }  catch(e)  {  }                  }                  //  Run  the  script  dynamically                  addScriptElement(data);          }   …}   18  
  • 19. Step 3: LRU Cache – Cache State var  sCache  =  {  …          //  Meta-­‐Data  about  the  cache  capacity  and  state            dat:  {size:  0,  capacity:  2*1024*1024,  items:  {}  },          //  Load  the  cache  state  and  items  from  localStorage          load:  funcHon()  {                  var  str  =  db  &&  db.getItem(“cacheData”);                  if  (data)  {  dat  =  JSON.parse(x);  }          },            //  Persist  an  updated  state  to  localStorage          save:  funcHon()  {                  var  str  =  JSON.stringify(dat);                  try  {db.setItem(“cacheData”,  str);  }  catch(e)  {  }          },   …  }   19  
  • 20. Step 3: LRU Cache – Storing items var  sCache  =  {  …          storeItem:  funcHon(name,  data)  {                  //  Do  nothing  if  the  single  item  is  greater  than  our  capacity                  if  (data.length  >  dat.capacity)  return;                  //  Make  room  for  the  object                  while(dat.items.length  &&  (dat.size  +  data.length)  >  dat.capacity)  {                          var  elem  =  dat.pop();  //  Remove  the  least  recently  used  element                          try  {  db.removeItem(elem.name);  }  catch(e)  {  }                          dat.size  -­‐=  elem.size;                    }                  //  Store  the  new  element  in  localStorage  and  the  cache                  try  {      db.setItem(name,  data);    dat.size  +=  data.length;    dat.items.push  ({name:  name,  size:  data.length});                  }  catch(e)  {  }          }  …     20  
  • 21. Step 3: LRU Cache – Getting items var  sCache  =  {  …          getItem:  funcHon(name)  {                  //  Try  to  get  the  item                  var  data  =  db  &&  db.getItem(name);                  if  (!data)  return  null;                  //  Move  the  element  to  the  top  of  the  array,  marking  it  as  used                  for(var  i=0;i<dat.items.length;i++)  {    if  (dat.items[i].name  ===  name)  {              dat.items.unshiw(dat.items.splice(i,-­‐1));              break;    }                  }                  return  data;          }   …}   21  
  • 22. Post Step 3: Revised Run Script var  sCache  =  {  …          runExtScript:  funcHon  (url)  {                  //  Check  if  the  data  is  in  the  cache                  var  data  =  getItem(url);                  if  (!data)  {    //  If  not,  fetch  it      data  =  $.get(url);    //  Store  it  for  later  use    storeItem(url,  data);                  }                  //  Run  the  script                  addScriptElement(data);          }   …}   22  
  • 23. Step 4: Versioning //  Today:  File  version  1   sCache.load();   sCache.runExtScript(‘res.v1.js’);   sCache.save();     //  Tomorrow:  File  version  2   sCache.load();   sCache.runExtScript(‘res.v2.js’);   sCache.save();     //  Old  files  will  implicitly  be  pushed  out  of  the  cache     //  Also  work  with  versioning  using  signature  on  content   23  
  • 24. What Have We Created So Far? •  Scriptable LRU Cache –  Enforces size limits –  Recovers from errors •  Dedicated Cache –  Not affected by browsing other sites •  Robust Cache –  Not affected by Mobile Cache Sizes –  Survives Power Cycle and Process Reset •  Still Has Limitations: –  Only works on same domain –  Resources fetched sequentially 24  
  • 25. Step 5: Cross-Domain Resources •  Why Cross Domain? –  Enables Domain Sharding –  Various Architecture Reasons •  Solution: Self-Registering Scripts –  Scripts load themselves into the cache –  Added to the page as standard scripts –  Note that one URL stores data as another URL h;p://1.foo.com/res.v1.js   h;p://1.foo.com/store.res.v1.js   alert(1);   sCache.storeItem(   ‘h;p://1.foo.com/res.v1.js’,   ’alert(1)’);   25  
  • 26. Step 6: Fetching Resources In Parallel <script>sCache.load()</script>     <script>   //  Resources  downloaded  in  parallel   doc.write(“<scr”+”ipt  src=‘h;p://foo.com/store.foo.v1.js’></scr”+”ipt>”);   doc.write(“<scr”+”ipt  src=‘h;p://bar.com/store.bar.v1.js’></scr”+”ipt>”);   </script>     <!-­‐-­‐    Scripts  won’t  run  unHl  previous  ones  complete,  and  data  is  cached  -­‐-­‐>   <script>sCache.runExtScript(‘h;p://foo.com/foo.v1.js’);  </script>   <script>sCache.runExtScript(‘h;p://bar.com/bar.v1.js’);  </script>   <!-­‐-­‐    Note  the  different  URLs!  -­‐-­‐>     <script>sCache.save();</script>   26  
  • 27. Step 6: Parallel Resources + Cache Check var  sCache  =  {  …          loadResourceViaWrite:  funcHon  (path,  file)  {                  //  Check  if  the  data  is  in  the  cache                  var  data  =  getItem(url);                  if  (!data)  {    //  If  not,  doc-­‐write  the  store  URL    doc.write(“<scr”+”ipt  src=‘”  +  path  +              “store.”  +  file  +  //  Add  the  “store.”  prefix            “’></scr”+”ipt>”);                  }          }   …}   27  
  • 28. Step 6: Parallel Downloads, with Cache <script>sCache.load()</script>     <script>   //  Resources  downloaded  in  parallel,  only  if  needed   sCache.loadResourceViaWrite("h;p://foo.com/”,”foo.v1.js”);   sCache.loadResourceViaWrite("h;p://bar.com/”,”bar.v1.js”);   </script>     <!-­‐-­‐    Scripts  won’t  run  unHl  previous  ones  complete,  and  data  is  cached  -­‐-­‐>   <script>sCache.runExtScript(‘h;p://foo.com/foo.v1.js’);  </script>   <script>sCache.runExtScript(‘h;p://bar.com/bar.v1.js’);  </script>   <!-­‐-­‐    Note  the  different  URLs!  -­‐-­‐>     <script>sCache.save();</script>   28  
  • 29. What Have We Created? •  Scriptable LRU Cache –  Enforces size limits –  Recovers from errors •  Dedicated Cache –  Not affected by browsing other sites •  Robust Cache –  Not affected by Mobile Cache Sizes –  Survives Power Cycle and Process Reset •  Works across domains •  Resources downloaded in parallel 29  
  • 30. Understanding localStorage Quota •  Many browsers use UTF-16 for characters –  Effectively halves the storage space –  Safest to limit capacity to 2 MB •  Best value: Cache CSS & JavaScript –  Biggest byte-for-byte impact on page load –  Lowest variation allows for longest caching –  Images are borderline too big for capacity •  Remember: Quotas are per top-level-domain –  *.foo.com share the same quota 30  
  • 32. Adaptive Consolidation •  Fetch Several Resources with One Request –  Store them as Fragments •  Adapt to Browser Cache State –  If resources aren’t in cache, fetch them as one file –  If some resources are in cache, fetch separate files –  Optionally consolidate missing pieces h;p://1.foo.com/foo.v1.js   h;p://1.foo.com/store.res.v1.js   alert(1);   sCache.storeItem(‘/foo.v1.js’,   ’alert(1)’);   h;p://1.foo.com/bar.v1.js   sCache.storeItem(‘/bar.v1.js’,   ’alert(2)’);   alert(2);     32  
  • 33. Adaptive vs. Simple Consolidation - #2 •  User browsers Page A, then Page B –  Assume each JS file is 20KB in Size OpGmizaGon   Total  JS  Requests   Total  JS  Bytes   None   3   60KB   Simple  ConsolidaHon   2   100KB   AdapHve  ConsolidaHon   1   60KB   Page  A   Page  B   <script  src=“a.js”></script>   <script  src=“a.js”></script>   <script  src=“b.js”></script>   <script  src=“b.js”></script>   <script  src=“c.js”></script>   33  
  • 34. Adaptive vs. Simple Consolidation - #2 •  User browsers Page A, then Page B –  Assume each JS file is 20KB in Size OpGmizaGon   Total  JS  Requests   Total  JS  Bytes   None   4   80KB   Simple  ConsolidaHon   2   140KB   AdapHve  ConsolidaHon   2   80KB   Page  A   Page  B   <script  src=“a.js”></script>   <script  src=“a.js”></script>   <script  src=“b.js”></script>   <script  src=“b.js”></script>   <script  src=“c.js”></script>   <script  src=“c.js”></script>   <script  src=“d.js”></script>   34  
  • 35. Adaptive vs. Simple Consolidation - #3 •  External & Inline Scripts are often related •  Breaks Simple Consolidation •  Doesn’t break Adaptive Consolidation StoreAll.js   a.js   var  mode=1;   sCache.storeItem(‘a.js’,’var  mode=1;’)   sCache.storeItem(‘b.js’,’alert(userType);’)   b.js   alert(userType);   OpHmized  Page:   Page:   <script  src=“a.js”></script>   <script>sCache.runExtScript(‘a.js’)</script>   <script>   <script>   var  userType  =  “user”;   var  userType  =  “user”;   If  (mode==1)  userType  =  “admin”;   If  (mode==1)  userType  =  “admin”;   </script>   </script>   <script  src=“b.js”></script>   <script>sCache.runExtScript(‘b.js’)</script>   35  
  • 36. Robust Prefetching •  In-Page Prefetching –  Fetch CSS/JS Resources at top of page, to be used later •  Next-Page Prefetching –  Fetch resources for future pages •  Robust and Predictable –  Not invalidated due to content type change in FF –  Not invalided by cookies set in IE –  Not reloaded when entering same URL in Safari –  … 36  
  • 37. Async JS/CSS •  Async JS: Run scripts without blocking page –  Doable without Scriptable Cache –  Scriptable Cache allows script prefetching –  Eliminates need to make fetch scripts block •  Async CSS: Download CSS without blocking –  CSS ordinarily delay resource download & render –  You can’t always know when a CSS file loaded –  Scriptable Cache enables “onload” event –  Can still block rendering if desired 37  
  • 38. Summary •  Caching is good – you should use it! •  Scriptable Cache is better –  More robust –  More reasonably sized on Mobile –  Enables important optimizations •  The two aren’t mutually exclusive –  “store” files should be cacheable –  Images should likely keep using regular cache 38  
  • 39. Or… Use the Blaze Scriptable Cache! •  Blaze automates Front-End Optimization –  No Software, Hardware or Code Changes needed –  All the pitfalls and complexities taken care of •  Blaze optimizes Mobile & Desktop Websites –  Applying the right optimizations for each client See how much faster Blaze can make your site with our Free Report: www.blaze.io Contact Us: contact@blaze.io 39  
  • 40. QuesGons?   DIY Scriptable Cache Guy Podjarny, CTO guypo@blaze.io twitter: @guypod