HTML and CSS Reference
In-Depth Information
Listing 8-21.
Adding a Check to the Update Loop
console.time("Grid Rendering");
for ( ; i < lastRow ; ++i ) {
for ( j = 0 ; j < lastCol ; ++j ) {
// Handle the initialisation of new cells, in case they are not created
if (Grid[i] === undefined) {
// Has the row been declared?
Grid[i] = [];
}
// Has the column been declared?
if (Grid[i][j] === undefined) {
// Flag all the cells as "modified" by default
Grid[i][j] = 1;
}
// ..
}
}
console.timeEnd("Grid Rendering");
And what's even better is that if you open the console, you'll notice that both initialization and rendering are now
being done in just ~3 ms (see Figure
8-7
).
Figure 8-7.
A massive improvement in the performance of your rendering routine
Now that you can potentially initialize and render a trillion cells efficiently, you need to add a way to scroll
through the grid. One way to approach this problem is to add
scrollX
and
scrollY
variables that allow you to offset
the starting and ending points of the loop, then you can add an event listener that would allow you to increase or
decrease the values of
scrollX
and
scrollY
, as seen in Listing 8-22.
