Optimize the element selectors in the diff viewer.
Review Request #8891 — Created April 10, 2017 and submitted
Rendered diffs contain a lot of elements, and at times (during setup,
navigation, and resize handling, we have to query for specific elements.
Some of the queries we had were very inefficient, impacting these
operations. Most users wouldn't have noticed this, but there is a
measurable impact that can cause real issues with very large diffs.One of the problems had to do with the use of the
:first
filter for
jQuery selectors. This filter is equivalent to grabbing the first result
from a query, but does not stop the query at the first result. We can
querySelector()
instead to get the result we want. This makes a huge
difference.Similarly, our parent element lookups now use
closest()
, instead of
parents()
, giving us another performance boost.Queries for anchors with a given name now use
document.getElementsByName()
, which is much faster. This improves anchor
navigation.
Tested all forms of navigation:
- Clicking chunks
- Keyboard bindings
- Chunk and file anchors in the diff index
- Hashes in the URL (for files, chunks, and line numbers)
Tested expanding/collapsing chunks.
Measured performance for all the selectors using large diffs, and saw
noticeable decreases in time.