Benchmark rendering performance

src/image_processor.worker.js

@@ -58,5 +58,7 @@ function relax_points_and_send() {
     let elapsed_time = time_end - time_start
     let interval = Math.max(1, 1000/fps - elapsed_time)
     timeout = setTimeout(relax_points_and_send, interval)
+  } else {
+    postMessage({ cmd: 'done' })
   }
 }

src/index.js

@@ -4,6 +4,8 @@ import  { render_tsp } from './tsp.js'
 
 import ImageProcessor from './image_processor.worker.js'
 
+let render_times = []
+
 let url = "/donut.png",
     num_points = 2000,
     dpr = window.devicePixelRatio || 1,
@@ -44,14 +46,24 @@ function raster_loaded() {
 }
 
 function handle_image_processor_message(e) {
-  if (e.data.cmd = "points") {
+  if (e.data.cmd == "points") {
+    let tstart = new Date(), tend
     console.log("[main] Received points from processor")
 
     context.clearRect(0, 0, canvas.width, canvas.height)
     context.fillStyle = "#000000"
 
     points = e.data.points
     points.map(draw_point)
+
+    tend = new Date()
+
+    render_times.push( tend - tstart )
+  } else if (e.data.cmd == "done") {
+    console.log("[main] Done")
+    let sum = render_times.reduce(function(a, b) { return a + b; });
+    let avg = sum / render_times.length;
+    alert(`[main] Average render time: ${avg}`)
   } else {
     console.log("[main] received unknown message from processor")
     console.log(e)