lipka · soulteary · Feb 19, 2016 · Feb 19, 2016
diff --git a/README.md b/README.md
@@ -17,6 +17,8 @@ Piecon.setProgress(12);
 Piecon.setProgress(25);
 ...
 Piecon.reset();
+...
+Piecon.destroy(); // If you care about performance and use `useCache` option, use it instead of `Piecon.reset();`
 ```
 
 ### Options
@@ -26,7 +28,8 @@ Piecon.setOptions({
   color: '#ff0084', // Pie chart color
   background: '#bbb', // Empty pie chart color
   shadow: '#fff', // Outer ring color
-  fallback: false // Toggles displaying percentage in the title bar (possible values - true, false, 'force')
+  fallback: false, // Toggles displaying percentage in the title bar (possible values - true, false, 'force')
+  useCache: false // If you want to keep animation with long-loop, make it true can give you high-performance
 });
 ```
 

diff --git a/example/loop.html b/example/loop.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<head>
+    <title>Piecon / Pie charts in your favicon!</title>
+    <link rel="icon" href="favicon.ico" />
+    <script src="../piecon.js"></script>
+    <script>
+        (function(){
+            var count = 0;
+            Piecon.setOptions({fallback: 'force', useCache: true});
+            setInterval(function(){
+                if (++count > 100) { count = 0; }
+                Piecon.setProgress(count);
+            }, 250);
+        })();
+    </script>
+</head>
+<body>
+<div id="container">
+    <h1>Piecon</h1>
+    <p>A <a href="https://github.com/lipka">@lipka</a> production</p>
+</div>
+</body>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "piecon",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Dynamic pie charts in your favicon",
   "author": "Lukas Lipka <lukaslipka@gmail.com> (http://lukaslipka.com)",
   "main": "./piecon.js",

diff --git a/piecon.js b/piecon.js
@@ -13,6 +13,7 @@
     var originalFavicon = null;
     var originalTitle = null;
     var canvas = null;
+    var dataUrlCache = {};
     var options = {};
     var defaults = {
         color: '#ff0084',
@@ -74,7 +75,7 @@
 
     var getCanvas = function () {
         if (!canvas) {
-            canvas = document.createElement("canvas");
+            canvas = document.createElement('canvas');
             if (isRetina) {
                 canvas.width = 32;
                 canvas.height = 32;
@@ -88,8 +89,15 @@
     };
 
     var drawFavicon = function(percentage) {
+
+        if (options.useCache) {
+            if (percentage in dataUrlCache) {
+                return setFaviconTag(dataUrlCache[percentage]);
+            }
+        }
+
         var canvas = getCanvas();
-        var context = canvas.getContext("2d");
+        var context = canvas.getContext('2d');
 
         percentage = percentage || 0;
 
@@ -120,7 +128,8 @@
                 context.fill();
             }
 
-            setFaviconTag(canvas.toDataURL());
+            dataUrlCache[percentage] = canvas.toDataURL();
+            setFaviconTag(dataUrlCache[percentage]);
         }
     };
 
@@ -177,6 +186,11 @@
         }
     };
 
+    Piecon.destroy = function(){
+        Piecon.reset();
+        dataUrlCache = {};
+    };
+
     Piecon.setOptions(defaults);
 
     if(typeof define === 'function' && define.amd) {

diff --git a/piecon.min.js b/piecon.min.js