HTML and CSS Reference
In-Depth Information
As you can see in Figure
8-6
, both loops are also processing all of the cells that are outside the visible area.
If you're not going to be displaying the cell, then it's not necessary to process it in the
for()
loop.
Figure 8-6.
The visible area of the viewport vs. the non-visible area
As seen in Listing 8-20, one way to force your rendering routing to paint only the visible area of the viewport is
to limit both loops to the dimensions of the viewport. In essence, the idea is to see what cell is being shown on the
bottom right hand corner of the viewport, which will reveal what column and what row are the last ones.
Listing 8-20.
Limiting Loops to the Dimensions of the Viewport
// Paint the "background"
var i = 0,
j = 0,
lastRow = (canvas.height / cellHeight) >> 0, // Grab the last row
lastCol = (canvas.width / cellWidth) >> 0; // Grab the last column
console.time("Grid Rendering");
for ( ; i < lastRow ; ++i ) {
for ( j = 0 ; j < lastCol ; ++j ) {
// ...
}
}
console.timeEnd("Grid Rendering");
Additionally, you need to find a way to do something similar with the initialization routine, or to make it even
more efficient; you can add a check within the update loop that if the cell is not initialized, you set a default value
(see Listing 8-21).
