HTML and CSS Reference
In-Depth Information
// Set the border colour to gray
ctx.strokeStyle = '#ccc';
// Draw an outline
ctx.strokeRect(x, y, w, h);
}
}());
If again you run this in a web browser, you will quickly notice that this one will take considerable more time
to initialize and render, but at the same time note that you have increased the number of rows and cells to 1,000.
At this point, the reason why things are so slow is obvious: you're trying to cycle through every single one of the
1,000,000 cells.
To find out quickly how much time both processes (grid initialization and rendering) are taking, you can use the
console.time(<string>)
and
console.timeEnd(<string>)
functions, as shown in Listing 8-14.
Listing 8-14.
Timing the Grid Initialization and Rendering Processes
// Initialize the grid. By default, it will be empty,
// so we'll need to "paint" all the cells
console.time("Grid Initialisation");
for ( ; i < gridRows ; ++i ) {
for ( j = 0 ; j < gridCols ; ++j ) {
if (Grid[i] === undefined) {
Grid[i] = [];
}
// Flag all the cells as "modified"
Grid[i][j] = 1;
}
}
console.timeEnd("Grid Initialisation");
For example, on my computer the console reported the values shown in Figure
8-4
.
Figure 8-4.
A quick snapshot of how long it's taking the program to initialise and paint the grid
