Performance improvements #19
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 thebaseline 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.