HTML and CSS Reference
In-Depth Information
Figure 8-5.
The modification resulted in a dramatic improvement to the grid rendering routine
While this looks like a massive improvement (and it is) and you could stop here, you still have a long way to go
until you reach a point where you can render your grid at 60 or 30 FPS. To make things even harder, let's increase the
number of rows and columns to 100,000. Or better yet, let's go for the gold, and do it with 1,000,000 rows and columns
for a grand total of 1,000,000,000,000 (trillion) cells. (Note: While it's highly unlikely that you'll ever need to store and
render a trillion cells, it's nevertheless a nice exercise.)
So far, you know that your rendering routine will only paint the cells that can be displayed within the viewport.
If that's the case, why is it taking so long? Where are those ~8.5 ms. coming from?
Let's do a detailed walkthrough of the update routine to understand what's going on. Start with the first few lines,
shown in Listing 8-16.
Listing 8-16.
Analyzing the Update Routine
function update(ts) {
// Calculate the delta between the previous timestamp and the new one
delta = ts - previousTs;
Declare the
update()
function, which takes a timestamp as a parameter, and refresh the value of the delta
variable that is used later on to see if it's bigger than the interval (which is the number of milliseconds given by doing
the operation 1000 ms/# FPS, which in this case is 30 FPS); see Listing 8-17.
Listing 8-17.
Declaring the
update()
function
// Check whether or not something needs to be repainted in the scene
// Only execute the paint routine if the delta is bigger
// than the interval and the shouldRepaint flag is set to true
if (delta > interval && shouldRepaint) {
As mentioned, if the delta is bigger than the
interval
and the
shouldRepaint
flag is set to true, you're going to
execute the code block in Listing 8-18.
Listing 8-18.
Executing the Code Block when the Delta Is Bigger than the
interval
and the
shouldRepaint
Flag Is Set to True
// This bit will be executed only if it's bigger than the
// interval and therefore will be executed every 33.33 ms.
// at 30 frames per second (or the value of the "fps" variable)
