Reducing lag when updating cells in a HTML Excel-like spreadsheet
<h1>The Situation</h1>

<p>Okay, so here's the deal: I've set myself a challenge to improve my JavaScript knowledge. This challenge involves the creation of an entirely front-end Excel-like spreadsheet. Currently what I have is a table with 15 columns and 30 rows of table cells which allow text input. Just like in Excel, each cell has its own unique reference ID (A2, F14, G9, etc.):</p>

<pre><code>           _________________
     _____|__A__|__B__|__C__|
    |__1__|__8__|_____|_____|
    |__2__|_100_|__6__|_____|
    |__3__|_300_|_____|__5__| etc...
</code></pre>

<p>These cells will allow live Excel-like formulae to be placed inside, and the spreadsheet will update itself accordingly, for example:</p>

<pre><code>           _____________________
     _____|__________C__________|
    |__1__| =(SUM(A1:A3)*C3)+B2 |

    Would translate to: var n = ((8+100+300)*5)+6;
</code></pre>

<h1>The Problem</h1>

<p>Now this is all good, but here is the problem: every time I update just one cell, I have to loop through and update all cells to ensure the data is accurate. This isn't a great issue when there are only 9 cells available like in the crude example above, but my current table has 15 columns and 30 rows... 450 of them!</p>

<p>I currently have it set up so that every time the browser's focus leaves a cell, the behind JavaScript loops through and updates each cell to ensure the data is all correct. This on its own causes a tiny bit of lag when there are only 5 or 6 cells with data in, so I'm concerned that by the time I populate every cell in the spreadsheet my browser will die on me.</p>

<p>I'm most likely dreaming the impossible, but ideally I'd like to be able to present a spreadsheet with hundreds of columns and rows which update on the fly. So my two questions to you all are:</p>

<ul>
<li>What can I do to prevent lag?</li>
<li>Would it even be possible to support more than 15 columns and 30 rows of formulae without breaking the internet in the process?</li>
</ul>
