Add an FPS meter to playground-complete.html

examples/playground-complete.html

@@ -6,9 +6,14 @@
   position: absolute;
   left: 10px;
   right: 10px;
-  top: 10px;
+  top: 20px;
   bottom: 10px;
 }
+#stats {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
 </style>
 </head>
 
@@ -22,3 +27,22 @@
   window.yourDiv = document.getElementById("yourDiv");
 </script>
 <script src="./playground.js"></script>
+
+<!--
+Measure the frame rate. Chrome devtools can do this, but having the devtools
+open has a dramatic effect on frame rates.
+-->
+<script src="../node_modules/stats.js/build/stats.min.js"></script>
+<script>
+var stats = new Stats();
+stats.setMode(0); // 0: fps, 1: ms
+document.body.appendChild(stats.domElement);
+
+var update = function() {
+  stats.end();
+  stats.begin();
+  requestAnimationFrame(update);
+};
+stats.begin();
+requestAnimationFrame(update);
+</script>

package.json

@@ -96,6 +96,7 @@
     "sinon": "^1.12.2",
     "sniper": "^0.2.16",
     "source-map": "^0.3.0",
+    "stats.js": "^1.0.0",
     "uglify-js": "^2.4.23",
     "watchify": "^3.2.1"
   },