title: Javascript library for fast rendering of thousands of DOM elements
body: <p>I have been recently playing with JavaScript and I am creating a web game (pure HTML + CSS + JS, no server backend). The main purpose of this game is walking with character over 2D map. (similar to <a href="https://alexnisnevich.github.io/untrusted/" rel="nofollow">https://alexnisnevich.github.io/untrusted/</a>).</p>
  
  <p>My current stack is:</p>
  
  <ul>
  <li>code written in TypeScript</li>
  <li>AngularJS for rendering</li>
  <li>and LESS + uglify for some minification</li>
  </ul>
  
  <p>I created some basic functionality and now I increased map size from 10x10 (100 DOM elements) to 100x100 (10 000 DOM elements). And here is where Angular suffers. <code>ng-repeat</code> directive takes about 5 seconds to render this many elements (and 100x100 is small map for me, I want some bigger environment for user to move in)</p>
  
  <p>Questions:</p>
  
  <ol>
  <li>It seems I have chosen bad library for rendering. Angular is really slow when it comes to thousands of elements. Is there any faster library that can render more elements (and re-render those who have changed? it might be without checks, I have no problem firing render on changed elements manually)</li>
  <li>Or have I chosen DOM elements as map wrong? Should I use canvas instead? The main reason why I used DOM elements is because I wanted all these events, every field on map is clickable and provides a tooltip when mouse is over that element. Is it possible to do so with canvas? What good library for creating 2D games for canvas is there (I never used canvas)?</li>
  </ol>