add fps counter

public/scripts/AppFps.js

@@ -0,0 +1,39 @@
+/* global VT */
+window.VT = window.VT || {};
+
+VT.AppFps = function (el) {
+  var times = [];
+
+  tick();
+
+  function tick() {
+    requestAnimationFrame(tick);
+
+    times.push(performance.now());
+
+    if (times.length < 60) return;
+
+    var min = Infinity;
+    var max = 0;
+    var sum = 0;
+
+    for (var i = 1; i < 60; ++i) {
+      var delta = times[i] - times[i - 1];
+      min = Math.min(min, delta);
+      max = Math.max(max, delta);
+      sum += delta;
+    }
+
+    var fps = (60 / sum) * 1000;
+
+    el.innerText =
+      fps.toFixed(0) +
+      ' fps (' +
+      min.toFixed(0) +
+      ' ms - ' +
+      max.toFixed(0) +
+      ' ms)';
+
+    times = [];
+  }
+};

public/scripts/TodoApp.js

@@ -12,6 +12,7 @@ VT.TodoApp = function (el) {
   el.innerHTML = [
     '<header class="app-header">',
     '  <h1 class="title">VANILLA TODO</h1>',
+    '  <p class="app-fps"></p>',
     '</header>',
     '<div class="todo-frame -days"></div>',
     '<div class="app-collapsible">',
@@ -39,6 +40,7 @@ VT.TodoApp = function (el) {
 
   el.querySelectorAll('.app-collapsible').forEach(VT.AppCollapsible);
   el.querySelectorAll('.app-icon').forEach(VT.AppIcon);
+  el.querySelectorAll('.app-fps').forEach(VT.AppFps);
 
   VT.TodoFrameDays(el.querySelector('.todo-frame.-days'));
   VT.TodoFrameCustom(el.querySelector('.todo-frame.-custom'));

public/scripts/TodoStore.js

@@ -168,6 +168,7 @@ VT.TodoStore = function (el) {
 
   function load() {
     if (!localStorage || !localStorage.todo) {
+      dispatch(state);
       return;
     }