Perf: skip duplicate update()s, measure app render time

renderer/main.js

@@ -92,6 +92,7 @@ function onState (err, _state) {
   // Do this at least once a second to give every file in every torrentSummary
   // a progress bar and to keep the cursor in sync when playing a video
   setInterval(update, 1000)
+  requestAnimationFrame(redrawIfNecessary)
 
   // OS integrations:
   // ...drag and drop a torrent or video file to play or seed
@@ -143,10 +144,22 @@ function render (state) {
 }
 
 // Calls render() to go from state -> UI, then applies to vdom to the real DOM.
+// Runs at 60fps, but only executes when necessary
+var needsRedraw = 0
+
+function redrawIfNecessary () {
+  if (needsRedraw > 1) console.log('combining %d update() calls into one update', needsRedraw)
+  if (needsRedraw) {
+    controllers.playback.showOrHidePlayerControls()
+    vdomLoop.update(state)
+    updateElectron()
+    needsRedraw = 0
+  }
+  requestAnimationFrame(redrawIfNecessary)
+}
+
 function update () {
-  controllers.playback.showOrHidePlayerControls()
-  vdomLoop.update(state)
-  updateElectron()
+  needsRedraw++
 }
 
 // Some state changes can't be reflected in the DOM, instead we have to

renderer/views/app.js

@@ -18,6 +18,7 @@ var Modals = {
 }
 
 function App (state) {
+  console.time('render app')
   // Hide player controls while playing video, if the mouse stays still for a while
   // Never hide the controls when:
   // * The mouse is over the controls or we're scrubbing (see CSS)
@@ -38,7 +39,7 @@ function App (state) {
   if (state.window.isFocused) cls.push('is-focused')
   if (hideControls) cls.push('hide-video-controls')
 
-  return hx`
+  var vdom = hx`
     <div class='app ${cls.join(' ')}'>
       ${Header(state)}
       ${getErrorPopover(state)}
@@ -46,6 +47,8 @@ function App (state) {
       ${getModal(state)}
     </div>
   `
+  console.timeEnd('render app')
+  return vdom
 }
 
 function getErrorPopover (state) {