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.

Sign up for GitHub

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

Jump to bottom

Avoid binding magnifier events in duplicate on resize #30695

Merged
merged 3 commits into from
Apr 11, 2021
Merged

Avoid binding magnifier events in duplicate on resize #30695

merged 3 commits into from
Apr 11, 2021

Conversation

fredden
Copy link
Member

@fredden fredden commented Oct 28, 2020 •
edited by m2-assistant bot
Loading

Description

A browser resize event will trigger the magnifier to be re-initialised. This includes binding a fresh set of event listeners to the image so that the magnifier will show as expected (on click or hover). However, there is no mechanism to unbind the old event listeners, so each time the browser triggers a resize event these will stack.
This is made worse by the 'hover' event type triggering the 'mouseover' event immediately after adding a listener for the same. This means that each resize event will consume progressively more CPU, without any additional value.

Related Pull Requests

None

Fixed Issues

None

Manual testing scenarios

  1. Visit a product page with magnifier in use and configured for hover events
  2. Observe the resting CPU usage of the page
  3. Resize the viewport (either height or width)
  4. Observe a spike in CPU usage, which subsides
  5. Resize the viewport several times
  6. Observe a progressively longer spike in CPU usage
  7. Continue resizing the viewport and notice that CPU eventually (after ~8 resizes in my experience) caps out at 100% for an unacceptable amount of time (several minutes), rendering the page useless.
Before & after pictures from JavaScript profiler

Before:
Screenshot_2020-10-28_15-46-27

After:
Screenshot_2020-10-28_16-38-10

Questions or comments

None

Contribution checklist

  • Pull request has a meaningful description of its purpose
  • All commits are accompanied by meaningful commit messages
  • All new or changed code is covered with unit/integration tests (if applicable)
  • All automated tests passed successfully (all builds are green)

Resolved issues:

  1. resolves [Issue] Avoid binding magnifier events in duplicate on resize #30788: Avoid binding magnifier events in duplicate on resize

@fredden
Avoid binding events in duplicate
6bec772 
This is particularly important as a resize event will trigger a call to this
(via resize -> _init() -> set() -> image load -> image load -> bindEvents())
and the 'hover' event type also triggers a 'mouseover' event having added an
event listener for the same. This all means that each time a browser sends a
resize event (which can happen on other events than a viewport width/height
change) more event listeners are stacked, leading to significant CPU usage for
no value.
@m2-assistant
Copy link

m2-assistant bot commented Oct 28, 2020

Hi @fredden. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

  • @magento give me test instance - deploy test instance based on PR changes
  • @magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

  • @magento run all tests - run or re-run all required tests against the PR changes
  • @magento run <test-build(s)> - run or re-run specific test build(s)
    For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names. Allowed build names are:

  1. Database Compare
  2. Functional Tests CE
  3. Functional Tests EE,
  4. Functional Tests B2B
  5. Integration Tests
  6. Magento Health Index
  7. Sample Data Tests CE
  8. Sample Data Tests EE
  9. Sample Data Tests B2B
  10. Static Tests
  11. Unit Tests
  12. WebAPI Tests

You can find more information about the builds here

ℹ️ Please run only needed test builds instead of all when developing. Please run all test builds before sending your PR for review.

For more details, please, review the Magento Contributor Guide documentation.

⚠️ According to the Magento Contribution requirements, all Pull Requests must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

🕙 You can find the schedule on the Magento Community Calendar page.

📞 The triage of Pull Requests happens in the queue order. If you want to speed up the delivery of your contribution, please join the Community Contributions Triage session to discuss the appropriate ticket.

🎥 You can find the recording of the previous Community Contributions Triage on the Magento Youtube Channel

✏️ Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

@ihor-sviziev ihor-sviziev self-assigned this Oct 29, 2020
@ihor-sviziev ihor-sviziev added Area: Perf/Frontend All tickets related with improving frontend performance. Auto-Tests: Not Required Changes in Pull Request does not require coverage by auto-tests Award: bug fix Award: category of expertise Progress: pending review and removed Progress: review labels Oct 29, 2020
@ihor-sviziev
Copy link
Contributor

@magento run Functional Tests EE, Functional Tests CE

@ihor-sviziev
Copy link
Contributor

@fredden good catch! Looks like it will be too hard to cover with automated test, so I put label "auto-tests: not required"

@ihor-sviziev
Copy link
Contributor

@magento run Functional Tests B2B

@ghost ghost removed the Progress: review label Oct 30, 2020
@gabrieldagama gabrieldagama added the Priority: P2 A defect with this priority could have functionality issues which are not to expectations. label Mar 30, 2021
@gabrieldagama
Copy link
Contributor

@magento run all tests

@engcom-Oscar engcom-Oscar self-assigned this Mar 31, 2021
@engcom-Oscar
Copy link

engcom-Oscar commented Mar 31, 2021 •
edited
Loading

✔️ QA passed

Was checked case from Manual testing scenarios

  1. Visit a product page with magnifier in use and configured for hover events
  2. Observe the resting CPU usage of the page
  3. Resize the viewport (either height or width)
  4. Observe a spike in CPU usage, which subsides
  5. Resize the viewport several times
  6. Observe a progressively longer spike in CPU usage
  7. Continue resizing the viewport and notice that CPU eventually (after ~8 resizes in my experience) caps out at 100% for an unacceptable amount of time (several minutes), rendering the page useless.

✔️ After:
Screenshot from 2021-03-31 13-35-02

@engcom-Oscar engcom-Oscar added the QA: Added to Regression Scope Scenario was analysed and added to Regression Testing Scope label Mar 31, 2021
@engcom-Foxtrot engcom-Foxtrot self-assigned this Apr 1, 2021
@m2-community-project m2-community-project bot added the Priority: P3 May be fixed according to the position in the backlog. label Apr 11, 2021
magento-engcom-team pushed a commit that referenced this pull request Apr 11, 2021
@gabrieldagama
ENGCOM-8407: Avoid binding magnifier events in duplicate on resize #3…
ff0abd8 
…0695
@magento-engcom-team magento-engcom-team merged commit 9d8c91c into magento:2.4-develop Apr 11, 2021
@m2-assistant
Copy link

m2-assistant bot commented Apr 11, 2021

Hi @fredden, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

@fredden fredden deleted the magnifier-resize-performance branch September 28, 2021 21:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ihor-sviziev ihor-sviziev ihor-sviziev approved these changes

Assignees

@ihor-sviziev ihor-sviziev

@engcom-Foxtrot engcom-Foxtrot

@engcom-Oscar engcom-Oscar

Labels
Area: Lib/Frontend Area: Perf/Frontend All tickets related with improving frontend performance. Auto-Tests: Not Required Changes in Pull Request does not require coverage by auto-tests Award: bug fix Award: category of expertise Partner: Fisheye partners-contribution Pull Request is created by Magento Partner Priority: P2 A defect with this priority could have functionality issues which are not to expectations. Priority: P3 May be fixed according to the position in the backlog. Progress: accept QA: Added to Regression Scope Scenario was analysed and added to Regression Testing Scope Release Line: 2.4 Severity: S3 Affects non-critical data or functionality and does not force users to employ a workaround. Type: Bug Fix
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Issue] Avoid binding magnifier events in duplicate on resize
7 participants
@fredden @ihor-sviziev @magento-engcom-team @sidolov @gabrieldagama @engcom-Oscar @engcom-Foxtrot