Render Performance

[raineorshine]

Render Performance

[raineorshine]

Performance improvements v300.6.0 -> v300.6.0

Performance of indent
[4x slowdown]

• Very small number of visible thoughts 220 → 80ms (-64%)
  • doesn’t matter if the thoughts are siblings
  • doesn’t matter if there are hidden thoughts
• With no other thoughts in the thoughtspace
  • 250 → 220ms (-12%)

Virtualization

Libraries:

• ∅ react-window
  • Collapses height of nested lists
  • Scrolls lists independently
  • Intervening elements between .children and .child is catastrophic to styles
  • No support for trees
• ∅ react-virtual (https://github.com/TanStack/virtual)
  • Broken; Continuously scrolls to top (???)
• ∅ react-cool-virtual
  • No window support
• ∅ None of the existing libraries can handle autofade, in which hidden elements can become visible without scrolling.

Custom Virtualization:

• Calculation must be made without the DOM in order to avoid rendering at all
• Subthoughts passes a running visibleIndex to each Thought which indicates the
  number of previously rendered thoughts.
• Assume that each thought is a single line. Multiline thoughts will still work, they
  will just won’t be virtualized.
• topOffset is 80px @ Font Size 18
• Only render if visibleIndex < virtualEndIndex
• onScroll: Recalculate virtualEndIndex
• Do not pass virtualEndIndex as a prop, since it would unnecessarily re-render all ancestors
• const show = useVirtual(virtualIndex)
  • virtualEndIndex = (window.innerHeight + document.documentElement.scrollTop - topOffset) / itemHeight + overscan
• Calculate virtual indices from state.expanded

Optimization Routes

• filteredChildren.slice(0, 20) 220 → 150ms (-32%)
• Disabling ThoughtAnnotation 220 → 170ms (-22%)
• Disable StaticThought 220 → 175ms (-20%)
• Disable useAutofocusPlaceholder 220 → 195ms (-11%)
• Disable useAutofocus 220 → 198ms (-10%)
• Disable useMultiline 220 → 200ms (-9%)
• Disable Bullet 220 → 205ms (-7%)
• Disable StaticSuperscript ∅

Notes

✓ ThoughtContainer is rendered once for each thought
✓ useMultiline is not improved by requestAnimationFrame
✓ Minimal paint
✗ setNoHeight of thoughts does not fire in sync
- 22 commits → 8 commits
✗ keydown event is the main blocker: 68ms @ 1x, 300ms @ 4x
- height:0 recalculations don’t start until indent is complete
✓ reducer: 1.67ms
✗ A timer fires about 100ms later and blocks for 70ms @ 4x

• renderRoot → beginWork → renderWithHooks → My Components
• Can autofocus bypass React?
  • Yes, it just calculates CSS Properties
  • Thought it might be better to focus on rendering with React since many operations including basic navigation involve creating and rendering new elements
  • Unless the current autofocus triggers Recalculate Styles
• Remove useMultiline completely and observe exactly what changed
  • Still Recalculate Style? Yes, just pushed to second renderRootSync.
  • Are there still two renderRootSyncs? Yes.
  • keydown: 67ms → 60ms
    ✓ Optimized useAutofocus
  • keydown: 67ms → 63–65ms
    ✓ No need to debounce useMultiline effect
    ✓ React is preserving the siblings in the DOM on indent, not recreating them
    ✗ setIsTapped causes 1–2 extra commits before indent is completed

[raineorshine]

Eliminate extra actions

• Refactor is isPushing (4a9026d) and clearPushQueue (7ac7b6a) to not use the Redux store. This significantly improved the autofocus animation performance by eliminating redundant and poorly timed selector recalculation immediately after a command.
• editingValue
• error