Optimize number js

[rogerdz]

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)

Resolved issues:

1. resolves [Issue] Optimize number js #39200: Optimize number js

[m2-assistant]

Hi @rogerdz. Thank you for your contribution!
Here are some useful tips on 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
13. Semantic Version Checker

You can find more information about the builds here
ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

---

For more details, review the Code Contributions documentation.
Join Magento Community Engineering Slack and ask your questions in #github channel.

[rogerdz]

@magento run all tests

[rogerdz]

@magento run all tests

[engcom-Hotel]

@magento run all tests

[engcom-Hotel]

@magento run Unit Tests, Static Tests, Functional Tests EE, Functional Tests CE, Functional Tests B2B

[engcom-Hotel]

@magento run Unit Tests, Static Tests, Functional Tests EE, Functional Tests CE, Functional Tests B2B

[engcom-Hotel]

Hello @rogerdz,

Gentle reminder for this PR.

Thanks

[engcom-Hotel]

Hello @rogerdz,

Have you got a chance to pick this PR further?

Thanks

[rogerdz]

Hi @engcom-Hotel,
I’ve updated my part of the code and there’s nothing more to be done on my end.

[engcom-Hotel]

Thanks @rogerdz for the reply & contribution!

Let us pick this PR for further processing.

[engcom-Hotel]

@magento run all tests

[engcom-Hotel]

Hello @rogerdz,

I guess there are multiple tests are failing due to this change. Please check and resolve it.

Thanks

[rogerdz]

@magento run all tests

[iparmentier]

Hello @rogerdz !

Just a message to know if you proceeded to some speed tests with your code change.
If yes, what are the results ?

I did a patch in a local environment, and I do not have the speed results expected as your first commit (with Magento 2.4.6 - Currently with 2.4.8-p1)

Looking forward with your results.

Thank you,

Ilan

[rogerdz]

Hi @iparmentier,
This PR will improve pagespeed score ( I hope so) by reducing the number of javascript requests that need to be loaded when entering the site without any action (click, scroll, wheel, ...)
You can see the test results here: #39132 (comment)

[iparmentier]

Thank you @rogerdz,

I saw the previous results, thank you. Unfortunatly, when you enabled merged js in Magento 2 (for us, we are currently using a forked Magepack module; Magepack use Puppeteer (Chrome) to retrieve all js files and as your code waiting for scrolling actions, the collector doesn't get all files), the results are less impressive.

I tried to improve the old luma theme by removing all unnecessary js files (#32985). By example, Modifiing web/mage/dropdown.js (removing jquery-ui-modules/dialog dependecy which load Draggable/resizable/position ui files) lead to save ~100 kb js files (uncompressed)

Anyway, thank your for contribution, I will look forward for the adobe/magento team review.

[engcom-Hotel]

Hello @rogerdz,

Gentle reminder to check failed tests.

Thanks

[rogerdz]

@magento run all tests

[rogerdz]

@magento run Static Tests, Unit Tests, WebAPI Tests

[rogerdz]

Hi @engcom-Hotel,
Seem like check failed unrelated my change

[engcom-Hotel]

@magento run all tests

[engcom-Hotel]

Hello @rogerdz,

Please refer to the functional tests failure, for e.g. the below link:

https://public-results-storage-prod.magento-testing-service.engineering/reports/magento/magento2/pull/39132/f0e3003769a2c58a7a9e133d922ec924/Functional/allure-report-ce/index.html#categories/7454029496fd96244803d445d93e929a/96b78d14cfc25078/

You can see various failures. It might due to the PR changes because the tests are not failing on other PRs. Please take a look.

Thanks

[engcom-Hotel]

Hello @rogerdz,

Gentle reminder for this PR.

Thanks