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

HoverZoom slows down EmberJS DOM node insertion #890

Closed
flwyd opened this issue Mar 12, 2022 · 2 comments
Closed

HoverZoom slows down EmberJS DOM node insertion #890

flwyd opened this issue Mar 12, 2022 · 2 comments
Labels

Comments

@flwyd
Copy link

flwyd commented Mar 12, 2022

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:
Unfortunately, the site where I observed this behavior is not public, but it doesn't look to be doing anything particularly complex.

  1. Using the Ember framework
  2. Have a route which loads ~5,000 records
  3. Display it with a template that looks something like
{{#each report.people key="id" as |person|}}
  <div>
    <LinkTo @route="person" @model={{person.id}}>{{person.name}}</LinkTo>
  </div>
{{/each}}
  1. Wait for a long time for anything to show up on the screen.

Expected behavior
The data loads in about two seconds if Hover Zoom is disabled, but it takes around one minute to load exactly the same 5,000 divs and links if the extension is enabled. The divs do not contain any images, the <a> tags link to regular pages (not images), and there are no images on the page, though there are other pages on the site where HoverZoom can activate when a person's photo is shown.

Desktop (please complete the following information):

  • OS: [e.g. iOS] MacOS, ChromeOS
  • Browser [e.g. chrome, safari] Chrome
  • Version [e.g. 22] 99, 99

Additional context
I can provide Chrome profiler data if it would be helpful. The "Bottom up" hot spots are windowOnDOMNodeInserted as well as querySelectorAll from jQuery's Sizzle via jQuery find, triggered by DOMNodeInserted events. It looks like DOMNodeInserted is deprecated in favor of MutationObserver. Additionally, perhaps 5-10% of the time is spent [https://github.com/extesy/hoverzoom/blob/caa1525e748e23a6a91d43b96fb7141690473c0b/js/hoverzoom.js#L1792](clearing and then setting a timeout) for each inserted link.

@extesy
Copy link
Owner

extesy commented Jun 12, 2022

@flwyd I've replaced the deprecated observer with a new one in 030b2cc. If you don't mind, can you please test the new version?

@extesy
Copy link
Owner

extesy commented Jun 29, 2022

I assume it's fixed now. Please reopen if the issue persists.

@extesy extesy closed this as completed Jun 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants