[Issue] Optimize number js

[m2-assistant]

This issue is automatically created based on existing pull request: #39132: Optimize number js

---

Description (*)

• only execute js with element display in viewport
• only trigger binding with element display in viewport
• add event mousemove for execute for another js

Self test in default magento:

• number of requests reduced 20-30rq when loading page
• Total Blocking Time reduced 20-30ms on Lighthouse
• JavaScript execution time reduced 1s on Lighthouse

For more complex sites, more optimization may be possible.

Related Pull Requests

Fixed Issues (if relevant)

1. Fixes magento/magento2#<issue_number>

Manual testing scenarios (*)

1. ...
2. ...

Questions or comments

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)
• README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
• All automated tests passed successfully (all builds are green)

[m2-assistant]

Hi @engcom-Hotel. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: 👇

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• 4. Verify that the issue is reproducible on 2.4-develop branch
  Details

  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
• 5. Add label Issue: Confirmed once verification is complete.
• 6. Make sure that automatic system confirms that report has been added to the backlog.

[engcom-Hotel]

Hello @rogerdz,

Thanks for the report and collaboration!

To speed up the processing of this issue, please provide us with the following information:

• Summary of the issue
• Information on your environment
• Steps to reproduce
• Expected and actual results

Thanks

[rogerdz]

Hi @engcom-Hotel, I update:

• Summary of the issue:
  Only execute js with element display in viewport
  Only trigger binding with element display in viewport
  Add event mousemove for execute for another js

• Information on your environment:
  magento 2.4-develop

• Steps to reproduce:
  Open inspect in browser (press f12), select tab network.
  Load site without any action same 'touchstart', 'mouseover', 'wheel', 'scroll', 'keydown' actions.
  Check the number of requests, only javascript related to the element in viewport is loaded.
  Scroll mouse and you will see the remaining javascript loaded.
  Check performance in lighthouse

• Expected results:
  Number of requests reduced 20-30rq when loading page
  Total Blocking Time reduced 20-30ms on Lighthouse
  JavaScript execution time reduced 1s on Lighthouse

[engcom-Hotel]

Hello @rogerdz,
Thanks for the detailed steps!

The issue is not reproducible for us.

We have compared the instances with and without PR changes, but the performance seems degrading. Please have a look at the below screenshots for reference:

Without PR changes:

With PR Changes:

Please let us know if we have missed anything.

Thanks

[engcom-Hotel]

Dear @rogerdz,

We've observed that there haven't been any updates on this issue for quite some time. Therefore, we're assuming it's been resolved and will be closing it. Feel free to open a new ticket or reopen this one if you require further assistance.

Regards