Skip to content
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

Performance problems / disabling some event listeners #239

Closed
kimmobrunfeldt opened this issue Aug 13, 2015 · 6 comments
Closed

Performance problems / disabling some event listeners #239

kimmobrunfeldt opened this issue Aug 13, 2015 · 6 comments

Comments

@kimmobrunfeldt
Copy link

I have successfully installed the iframe-resizer to my page but I'm having some performance issues. The page inside iframe contains a dynamic form whose height changes depending on the answers. The form also contains a Google maps inside it.

The iframe-resizer automatically starts listening to events such as transitionEnd. The Google Maps zoom in and out causes a lot of transitionEnd events. The listener brings some overhead to this and it makes the map experience bad performance-wise. I know for sure that transitions are not affecting the size of the content, so I would like to disable that event listener. The mutationObserver also fires an event when google maps is zooming in and out since it changes the map tiles inside the map container. I know that these events will not affect the form height. Is it possible to somehow explicitly and manually tell the parent page to resize the iframe and disable all automatic event handlers? I have control over the parent and child pages.

@davidjbradshaw
Copy link
Owner

The event handlers can be commented out in the code. They are easy to spot.

Setting the interval option to a negative number disables mutation observer. Set it to -99999.

@kimmobrunfeldt
Copy link
Author

Ok thanks. Would you be interested to merge my PR if I would implement options which users could use to enable/disable certain event listeners? Or would you like to implement that yourself?

@davidjbradshaw
Copy link
Owner

Thanks for the offer, currently I'm concerned that the ever increasing number of options is starting to become confusing for people.

I'm thinking that some sort of throttling or debounce method might be a better solution for cases like this. Any idea how fast these events are firing on your page?

@davidjbradshaw
Copy link
Owner

Having thought about this a little more I've taken the throttle function from underscore.js and applied it to the function that all the events call to check the page size. This is set at 16ms (one screen refresh) by default, but this number can be increased by the more complex sizing functions so that it is always twice as long as they take.

It's currently in the Dev branch, I'd be very grateful if you could give it a tryand let me know how it works for you.

@kimmobrunfeldt
Copy link
Author

@davidjbradshaw Ok I understand. About testing the dev branch: I'm having a vacation for 1,5 weeks starting tomorrow so I won't be able to test during that time. I can do it after that at some point if it's still relevant

@davidjbradshaw
Copy link
Owner

@kimmobrunfeldt I've released the throttling in v3.1.0. I'd be most grateful if you could give it a try and let me know how it works for you. If it's still an issue for you please reopen this ticket.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants