Skip to content

perf(focus-monitor): optimize event registration #18667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 7, 2020

Conversation

mleibman
Copy link
Contributor

@mleibman mleibman commented Mar 2, 2020

Improve FocusMonitor scalability by implementing event delegation instead of adding individual focus and blur event listeners to each monitored element.

The global listeners do have to walk up the ancestor chain of event target in order to support checkChildren, but this is extremely fast even for very deeply nested DOM trees since all it has to do is call Map.has(element) for each one.

Another potential improvement may be to store the tracked elements in a WeakMap and remove the need to call stopMonitoring(), making the API easier, but this would require always keeping the 6 global event listeners active. Right now, they are removed if there are no tracked elements.

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Mar 2, 2020
Copy link
Member

@devversion devversion left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. @mmalerba should have a look too.

@devversion devversion added perf This issue is related to performance pr: lgtm labels Mar 2, 2020
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbourn jelbourn added the target: patch This PR is targeted for the next patch release label Mar 2, 2020
@mmalerba mmalerba added the action: merge The PR is ready for merge by the caretaker label Mar 2, 2020
Copy link
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbourn jelbourn added the P2 The issue is important to a large percentage of users, with a workaround label Mar 3, 2020
@mmalerba mmalerba added the G This is is related to a Google internal issue label Mar 3, 2020
mleibman added 4 commits April 7, 2020 10:21
Improve focus-monitor scalability by implementing event delegation instead of adding individual 'focus' and 'blur' event listeners to each monitored element.
@mmalerba mmalerba force-pushed the perf-focusmonitor branch from d408ec4 to 4513fb3 Compare April 7, 2020 17:28
@mmalerba mmalerba merged commit a85b63c into angular:master Apr 7, 2020
mmalerba pushed a commit that referenced this pull request Apr 14, 2020
* perf(focus-monitor): optimize event registration

Improve focus-monitor scalability by implementing event delegation instead of adding individual 'focus' and 'blur' event listeners to each monitored element.

* Fix a bug in _getFocusOrigin().

* Add a comment explaining why we need to walk up the tree

* Cleanup
crisbeto added a commit to crisbeto/material2 that referenced this pull request Apr 21, 2020
In angular#18667 event delegation was implemented for the `FocusMonitor` which is based around binding a single event on the `document`. The problem is that the browser won't invoke the `focus` and `blur` handlers on the `document`, if focus is moved within the same shadow root. These changes switch to delegating the events either through the closest shadow root or the `document`.

Fixes angular#19133.
jelbourn pushed a commit that referenced this pull request Apr 24, 2020
In #18667 event delegation was implemented for the `FocusMonitor` which is based around binding a single event on the `document`. The problem is that the browser won't invoke the `focus` and `blur` handlers on the `document`, if focus is moved within the same shadow root. These changes switch to delegating the events either through the closest shadow root or the `document`.

Fixes #19133.
jelbourn pushed a commit that referenced this pull request Apr 24, 2020
In #18667 event delegation was implemented for the `FocusMonitor` which is based around binding a single event on the `document`. The problem is that the browser won't invoke the `focus` and `blur` handlers on the `document`, if focus is moved within the same shadow root. These changes switch to delegating the events either through the closest shadow root or the `document`.

Fixes #19133.
soro-google pushed a commit to soro-google/components that referenced this pull request Apr 24, 2020
In angular#18667 event delegation was implemented for the `FocusMonitor` which is based around binding a single event on the `document`. The problem is that the browser won't invoke the `focus` and `blur` handlers on the `document`, if focus is moved within the same shadow root. These changes switch to delegating the events either through the closest shadow root or the `document`.

Fixes angular#19133.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators May 8, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement G This is is related to a Google internal issue P2 The issue is important to a large percentage of users, with a workaround perf This issue is related to performance target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants