Skip to content

Slow performance in JSDOM #151

@just-boris

Description

@just-boris

This simple component takes 200ms to render in JSDOM environment on my laptop:

function Demo() {
  return (
    <FocusLock>
      <button>Test</button>
      <button>Test</button>
      <button>Test</button>
    </FocusLock>
  );
}

I investigated why this is happening, found the bottleneck in isElementHidden function. It calls window.computedStyle for each node and all their parents, but this is an expensive operation in JSDOM (~5ms for me). The more nodes in DOM, the slower it becomes.

Here you can also find the demo to reproduce with the same dependencies (latest create-react-app): https://github.com/just-boris/thousand-cuts

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions