Skip to content

Performance issues of scrollBehavior #1145

Closed
@fnlctrl

Description

@fnlctrl

image

Currently, using scrollBehavior adds a scroll listener to record window.pageXOffset and window.pageYOffset, which will force the browser into doing layout+repaint when scrolling, resulting in serious scrolling janks on mobile devices.

Since we cannot avoid accessing pageXOffset and pageYOffset, here are some improvements I can think of:

  1. Implement a simple debounce function for the scroll listener, and add a scrollListenerDebounce option to router configs, which defaults to 1000ms. This should make accessing pageXOffset and pageYOffset only when the user have stopped scrolling for 1000ms.
  2. Add a section in the docs explaining the potential performance issues when using scrollBehavior, and the inaccuracy of the recorded scrolling position, caused by the debounce function

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions