In a test on my machine the old version gave me about 5fps when dragging the slider near the left hand side of the range. After this change it is up to about 10fps. That's still not great but it is the best I could do with small, targeted changes.
Instead of appending many svg:rect elements directly into the page, put them
all into a document fragment and then insert the document fragment into the
page. This makes less work for the browser overall as it doesn't need to worry
about performing layout for each svg:rect added, but instead just once per svg.
Make svg elements use display: block. Otherwise they are aligned to the
baseline and svg elements that are less tall than a single line will start at a
different y position on the page than svg elements that are taller.
Fix height calculation for svg elements. This was attempting to round to the
next highest multiple of 10 pixels but it wasn't working. This, combined with
the problem described in the point above, means that some svg elements would
creep down the page a pixel at a time as the slider was dragged to the right.
Always display the vertical scrollbar. This prevents it from popping in and
out of existence as the slider is moved between 2000 and 2001. That avoids
the need to resize all the columns and reflow the entire page.
In a test on my machine the old version gave me about 5fps when dragging the slider near the left hand side of the range. After this change it is up to about 10fps. That's still not great but it is the best I could do with small, targeted changes.
Instead of appending many svg:rect elements directly into the page, put them all into a document fragment and then insert the document fragment into the page. This makes less work for the browser overall as it doesn't need to worry about performing layout for each svg:rect added, but instead just once per svg.
Make svg elements use
display: block. Otherwise they are aligned to the baseline and svg elements that are less tall than a single line will start at a different y position on the page than svg elements that are taller.Fix height calculation for svg elements. This was attempting to round to the next highest multiple of 10 pixels but it wasn't working. This, combined with the problem described in the point above, means that some svg elements would creep down the page a pixel at a time as the slider was dragged to the right.
Always display the vertical scrollbar. This prevents it from popping in and out of existence as the slider is moved between 2000 and 2001. That avoids the need to resize all the columns and reflow the entire page.