davidjbradshaw / iframe-resizer

Keep iFrames sized to their content.

Home Page:https://iframe-resizer.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Performance problems / disabling some event listeners

kimmobrunfeldt opened this issue · comments

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.

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.

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?

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?

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.

@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

@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.