-
Notifications
You must be signed in to change notification settings - Fork 25.2k
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
[feat] Take advantage of passive event listeners #8866
Comments
Agree this is a good idea. In a similar vein, a way to run outside of the zone would be useful as well. Something like:
or
|
Current status of this? |
is not very helpful. What is your use case, how this would help your app would be much more valuable. |
Current Status of this.? |
needs design. #13371 (comment) |
@nightwnvol I tried your snippet example and it worked in general (removes all the yellow chrome warnings on page load), but when I click on a
This is a typical link in the component. |
@cuznerdexter Hi, maybe this can help you. |
For the time being, I've made a little module which you can use to add event listeners in templates, ng-event-options. It has some limitations, but without hooks into the compiler, this was the easiest way to do it. |
As a data point on this, I'm seeing an increase of messages in the Chrome console relating to this:
|
Current status of this? |
Please update us on the current status of this feature. |
@ericcarraway , @JiaLiPassion What is the current status of this feature? What is the expected API for this? Code samples? Thanks |
This just bit me hard in iOS 11.3. With the 11.3 update, Apple enabled passive listeners by default. i.e. This essentially destroys all drag and drop libraries that rely on For anyone who doesn't want to waste days like I did, here's a (non-webworker friendly) workaround: // Add as early as possible in your code, in a service etc
dragEnabled = false;
window.addEventListener('touchmove', (event) => {
if (!this.dragEnabled)
return;
event.preventDefault(); // Prevent scrolling
},
{ passive: false }, // iOS 11.3 defaults to true
);
// now set this.dragEnabled = true when required, and reset on touchend/touchcancel events I think this feature needs a bump in priority, given iOS 11.3 now defaults to passive listeners. |
I was able to use this npm package My site now passes the Best Practices 'Does not use passive listeners to improve scrolling performance' test on the lighthouse audit. Depends if you want this on all your event listeners but can be a good workaround. |
Will this feature make it possible to create passive event listeners with Renderer2? Do you guys think this is a good idea as well? |
I think something like this would be nice
|
Until Angular adds support for event options, ng-event-options is a good solution. If you do not use its options, it falls back to Angular's own EventManagerPlugin. One important thing is that you need to import NgEventOptionsModule after Angular imports. |
Google Lighthouse reports not using Uses Passive Event Listeners to Improve Scrolling Performance: will you take this seriously now? |
This issue is > 3 years old. |
Keen to know if the Angular team is taking steps to resolve this issue?
|
Using (scroll) but it should be passive. Seeing issues in Lighthouse reports. Is there any visibility of the priority of issues in Opertion Byelog? Thanks |
Was there any update regarding this? Looking into ways to improve Lighthouse scores and this is a big one I'm hoping to check off the list. 😭 |
Anything new with this issue? |
Some update? After 6 years 🤔 |
I don't see a link to angular built-in solution for passive listeners. We can configure this by zone-flags. https://angular.io/guide/event-binding#binding-to-passive-events |
… listeners. Usage : use `(scroll.passive)` as event binding. Fixes angular#8866
I've proposed an Even if the PR doesn't move forward, you'll have the code to implement it in your own project 😊 |
… listeners. Usage : use `(scroll.passive)` as event binding. Fixes angular#8866
This might help if you are trying to bind to an event: angular.io |
…g <some> event. angular/angular#8866 (comment) Angular doesn't seem to handle passive events well. Use package `default-passive-events` as a workaround. Signed-off-by: 陳鈞 <jim60105@gmail.com>
…g <some> event. angular/angular#8866 (comment) Angular doesn't seem to handle passive events well. Use package `default-passive-events` as a workaround. Signed-off-by: 陳鈞 <jim60105@gmail.com>
…g <some> event. angular/angular#8866 (comment) Angular doesn't seem to handle passive events well. Use package `default-passive-events` as a workaround. Signed-off-by: 陳鈞 <jim60105@gmail.com>
This is another useful way to hook up passive event listeners: https://github.com/Tinkoff/ng-event-plugins It would be nice if it was more automatic, eg if the ng compiler could always do the optimal thing based on whether the handler function possibly prevents default or stops propagation. |
/ref https://github.com/WICG/EventListenerOptions
It's a way to declare that
preventDefault()
is not called by handler and make scrolling smoother.Needs more investigation if support would be useful in Angular.
The text was updated successfully, but these errors were encountered: