title: 1000 DOM elements on a single page
body: <p>For a project of big "text map" <a href="https://github.com/josephernest/bigpicture.js/" rel="nofollow noreferrer">BigPicture</a>, I need to have more than 1000 text inputs.
  <strong>When you click + drag, you can "pan" the displayed area.</strong></p>
  
  <p>But the performance is very poor (both on Firefox and Chrome) : rendering 1000+ DOM elements is not fast at all.</p>
  
  <p><em>Of course, another solution with better performance would be : work on a  <code>&lt;canvas&gt;</code>, render text as bitmap on it, and each time we want to edit text, let's show a unique DOM <code>&lt;textarea&gt;</code>, that disappears what editing is finished, and text is rendered as bitmap again... <strong>It works</strong> (I'm currently working in this direction) but it needs much more code in order to provide editing on a canvas.</em></p>
  
  <p><strong>Question : Is it possible to improve performance for rendering of 1000+ DOM elements on a HTML page, so that I don't need to use <code>&lt;canvas&gt;</code> at all ?</strong></p>
  
  <p><strong>Or will it be impossible to have good performance when panning a page with 1000+ DOM elements ?</strong></p>
  
  <p><img src="https://i.stack.imgur.com/7Mfax.jpg" alt="enter image description here"></p>
  
  <hr>
  
  <p><em>Notes :</em></p>
  
  <p>1) In the demo here I use <code>&lt;span contendteditable="true"&gt;</code> because I want multiline input + autoresize, but the rendering performance is the same with standard <code>&lt;textarea&gt;</code>.*</p>
  
  <p>2) For reference, this is how I create the 1000 text elements.</p>
  
  <pre><code>for (i=0; i &lt; 1000; i++)
  {
    var blax = (Math.random()-0.5)*3000;
    var blay = (Math.random()-0.5)*3000;
    var tb = document.createElement('span');
    $(tb).data("x", blax / $(window).width());
    $(tb).data("y", blay / $(window).height());
    $(tb).data("size", 20 * currentzoom);
    tb.contentEditable = true;
    tb.style.fontFamily = 'arial';
    tb.style.fontSize = '20px';
    tb.style.position  = 'absolute';
    tb.style.top = blay + 'px';
    tb.style.left = blax + 'px';
    tb.innerHTML="newtext";
    document.body.appendChild(tb);
  }
  </code></pre>