Render performance optimization

src/editor/Editor.jsx

@@ -1,7 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
 import setPosition from './setPosition';
-import TagWidget  from './widgets/tag/TagWidget';
-import CommentWidget from './widgets/comment/CommentWidget';
 
 /**
  * The popup editor component.

src/highlighter/Highlighter.js

@@ -1,7 +1,7 @@
-import WebAnnotation from '../WebAnnotation';
-
 const TEXT = 3; // HTML DOM node type for text nodes
 
+const RENDER_BATCH_SIZE = 100; // Number of annotations to render in one frame
+
 const uniqueItems = items => Array.from(new Set(items))
 
 export default class Highlighter {
@@ -12,13 +12,30 @@ export default class Highlighter {
   }
 
   init = annotations => {    
+    const startTime = performance.now();
+
     // Discard all annotations without a TextPositionSelector
     const highlights = annotations.filter(a => a.selector('TextPositionSelector'));
 
     // Sorting bottom to top significantly speeds things up,
     // because walkTextNodes will have a lot less to walk 
     highlights.sort((a, b) => b.start - a.start);
-    highlights.forEach(this._addAnnotation);
+
+    // Render loop
+    const render = annotations => {
+      const batch = annotations.slice(0, RENDER_BATCH_SIZE);
+      const remainder = annotations.slice(RENDER_BATCH_SIZE);
+
+      requestAnimationFrame(() => {
+        batch.forEach(this._addAnnotation);
+        if (remainder.length > 0)
+          render(remainder);
+        else
+          console.log(`Rendered ${highlights.length}, took ${performance.now() - startTime}ms`);
+      });
+    }
+
+    render(highlights);
   }
 
   _addAnnotation = annotation => {