Optimize number js

app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html

@@ -25,7 +25,7 @@
                 attr: {
                     title: $t('Close')
                 },
-                click: closeMinicart()
+                click: closeMinicart
             ">
         <span translate="'Close'"></span>
     </button>
@@ -57,7 +57,7 @@
                             attr: {
                                 title: $t('Proceed to Checkout')
                             },
-                            click: closeMinicart()
+                            click: closeMinicart
                         "
                         translate="'Proceed to Checkout'">
                 </button>

app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/scope.js

@@ -9,10 +9,35 @@ define([
     'mage/translate',
     '../template/renderer',
     'jquery',
-    '../../logger/console-logger'
-], function (ko, registry, $t, renderer, $, consoleLogger) {
+    '../../logger/console-logger',
+    'underscore'
+], function (ko, registry, $t, renderer, $, consoleLogger, _) {
     'use strict';
 
+    /**
+     * Check if an element is visible in the viewport
+     *
+     * @param {HTMLElement} el
+     * @returns bool
+     */
+    function isInViewport(el) {
+        if ((!_.isFunction(el.checkVisibility)) || !el.checkVisibility()) {
+            return false;
+        }
+
+        const rect = el.getBoundingClientRect(),
+            vWidth = window.innerWidth || doc.documentElement.clientWidth,
+            vHeight = window.innerHeight || doc.documentElement.clientHeight;
+
+        // Check if the element is out of bounds
+        if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) {
+            return false;
+        }
+
+        // Return true if any of the above disjunctions are false
+        return true;
+    }
+
     /**
      * Creates child context with passed component param as $data. Extends context with $t helper.
      * Applies bindings to descendant nodes.
@@ -21,7 +46,7 @@ define([
      * @param {Promise} promise - instance of jQuery promise
      * @param {Object} component - component instance to attach to new context
      */
-    function applyComponents(el, bindingContext, promise, component) {
+    function runApplyComponents(el, bindingContext, promise, component) {
         promise.resolve();
         component = bindingContext.createChildContext(component);
 
@@ -34,6 +59,29 @@ define([
         ko.applyBindingsToDescendants(component, el);
     }
 
+    /**
+     *  Check condition apply components
+     *
+     * @param {HTMLElement} el - element to apply bindings to.
+     * @param {ko.bindingContext} bindingContext - instance of ko.bindingContext, passed to binding initially.
+     * @param {Promise} promise - instance of jQuery promise
+     * @param {Object} component - component instance to attach to new context
+     */
+    function applyComponents(el, bindingContext, promise, component) {
+        if (isInViewport(el)) {
+            runApplyComponents(el, bindingContext, promise, component);
+        } else {
+            (events => {
+                const lazyLoadJs = () => {
+                    events.forEach(type => window.removeEventListener(type, lazyLoadJs))
+                    runApplyComponents(el, bindingContext, promise, component);
+                };
+
+                events.forEach(type => window.addEventListener(type, lazyLoadJs, {once: true}))
+            })(['touchstart', 'mouseover', 'wheel', 'scroll', 'keydown']);
+        }
+    }
+
     ko.bindingHandlers.scope = {
 
         /**

app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js

@@ -16,6 +16,24 @@ define([
         NativeTemplateEngine = ko.nativeTemplateEngine,
         sources = {};
 
+    function isInViewport(el) {
+        if (!el || (!_.isFunction(el.checkVisibility)) || !el.checkVisibility()) {
+            return false;
+        }
+
+        const rect = el.getBoundingClientRect(),
+            vWidth = window.innerWidth || doc.documentElement.clientWidth,
+            vHeight = window.innerHeight || doc.documentElement.clientHeight;
+
+        // Check if the element is out of bounds
+        if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) {
+            return false;
+        }
+
+        // Return true if any of the above disjunctions are false
+        return true;
+    }
+
     /**
      * Remote template engine class. Is used to be able to load remote templates via knockout template binding.
      */
@@ -58,6 +76,32 @@ define([
          * @returns {*}
          */
         ko.bindingHandlers.template.update = function (element, valueAccessor, allBindings, viewModel, bindingContext) {
+            /*eslint-enable no-unused-vars*/
+            if (isInViewport(element.previousElementSibling) || isInViewport(element.parentElement)) {
+                return ko.bindingHandlers.template._updateTemplate.apply(this, arguments);
+            } else {
+                (events => {
+                    const lazyLoadJs = () => {
+                        events.forEach(type => window.removeEventListener(type, lazyLoadJs))
+                        return ko.bindingHandlers.template._updateTemplate.apply(this, arguments);
+                    };
+
+                    events.forEach(type => window.addEventListener(type, lazyLoadJs, {once: true}))
+                })(['touchstart', 'mouseover', 'wheel', 'scroll', 'keydown']);
+            }
+        };
+
+        /**
+         * Decorate update method
+         *
+         * @param {HTMLElement} element
+         * @param {Function} valueAccessor
+         * @param {Object} allBindings
+         * @param {Object} viewModel
+         * @param {ko.bindingContext} bindingContext
+         * @returns {*}
+         */
+        ko.bindingHandlers.template._updateTemplate = function (element, valueAccessor, allBindings, viewModel, bindingContext) {
             /*eslint-enable no-unused-vars*/
             var options = ko.utils.peekObservable(valueAccessor()),
                 templateName,

lib/web/mage/apply/main.js

@@ -13,6 +13,8 @@ define([
     var dataAttr = 'data-mage-init',
         nodeSelector = '[' + dataAttr + ']';
 
+    const idleCallback = window.requestIdleCallback ?? setTimeout;
+
     /**
      * Initializes components assigned to a specified element via data-* attribute.
      *
@@ -39,7 +41,9 @@ define([
                 }
             }
             // Init module in separate task to prevent blocking main thread.
-            setTimeout(fn);
+            if (fn) {
+                idleCallback(fn);
+            }
         }, function (error) {
             if ('console' in window && typeof window.console.error === 'function') {
                 console.error(error);
@@ -49,6 +53,52 @@ define([
         });
     }
 
+    /**
+     * Initializes components assigned to a specified element via mage.applyFor
+     *
+     * @param {HTMLElement} el
+     * @param {Object|String} config
+     * @param {String} component
+     */
+    function applyFor(el, config, component) {
+        if (!el || isInViewport(el)) {
+            init(el, config, component)
+        } else {
+            (events => {
+                const lazyLoadJs = () => {
+                    events.forEach(type => window.removeEventListener(type, lazyLoadJs))
+                    init(el, config, component);
+                };
+
+                events.forEach(type => window.addEventListener(type, lazyLoadJs, {once: true}))
+            })(['touchstart', 'mouseover', 'wheel', 'scroll', 'keydown']);
+        }
+    }
+
+    /**
+     * Check if an element is visible in the viewport
+     *
+     * @param {HTMLElement} el
+     * @returns bool
+     */
+    function isInViewport(el) {
+        if ((!_.isFunction(el.checkVisibility)) || !el.checkVisibility()) {
+            return false;
+        }
+
+        const rect = el.getBoundingClientRect(),
+            vWidth = window.innerWidth || doc.documentElement.clientWidth,
+            vHeight = window.innerHeight || doc.documentElement.clientHeight;
+
+        // Check if the element is out of bounds
+        if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) {
+            return false;
+        }
+
+        // Return true if any of the above disjunctions are false
+        return true;
+    }
+
     /**
      * Parses elements 'data-mage-init' attribute as a valid JSON data.
      * Note: data-mage-init attribute will be removed.
@@ -67,6 +117,52 @@ define([
         };
     }
 
+    /**
+     * Process component
+     *
+     * @param {HTMLElement} element
+     * @param {Object} itemContainer
+     */
+    function process(element, itemContainer) {
+        _.each(itemContainer.data, function (obj, key) {
+            if (obj.mixins) {
+                require(obj.mixins, function () { //eslint-disable-line max-nested-callbacks
+                    var i, len;
+
+                    for (i = 0, len = arguments.length; i < len; i++) {
+                        $.extend(
+                            true,
+                            itemContainer.data[key],
+                            arguments[i](itemContainer.data[key], element)
+                        );
+                    }
+
+                    delete obj.mixins;
+                    init.call(null, element, obj, key);
+                });
+            } else {
+                init.call(null, element, obj, key);
+            }
+        });
+    }
+
+    /**
+     * Lazy process component via event
+     *
+     * @param {HTMLElement} element
+     * @param {Object} itemContainer
+     */
+    function lazyProcess(element, itemContainer) {
+        (events => {
+            const lazyLoadJs = () => {
+                events.forEach(type => window.removeEventListener(type, lazyLoadJs))
+                process(element, itemContainer);
+            };
+
+            events.forEach(type => window.addEventListener(type, lazyLoadJs, {once: true}))
+        })(['touchstart', 'mouseover', 'wheel', 'scroll', 'keydown']);
+    }
+
     return {
         /**
          * Initializes components assigned to HTML elements via [data-mage-init].
@@ -84,31 +180,19 @@ define([
                 .forEach(function (itemContainer) {
                     var element = itemContainer.el;
 
-                    _.each(itemContainer.data, function (obj, key) {
-                            if (obj.mixins) {
-                                require(obj.mixins, function () { //eslint-disable-line max-nested-callbacks
-                                    var i, len;
-
-                                    for (i = 0, len = arguments.length; i < len; i++) {
-                                        $.extend(
-                                            true,
-                                            itemContainer.data[key],
-                                            arguments[i](itemContainer.data[key], element)
-                                        );
-                                    }
-
-                                    delete obj.mixins;
-                                    init.call(null, element, obj, key);
-                                });
-                            } else {
-                                init.call(null, element, obj, key);
-                            }
-
+                    if (!element) {
+                        idleCallback(function () {
+                            process(element, itemContainer);
+                        });
+                    } else {
+                        if (isInViewport(element)) {
+                            process(element, itemContainer);
+                        } else {
+                            lazyProcess(element, itemContainer);
                         }
-                    );
-
+                    };
                 });
         },
-        applyFor: init
+        applyFor: applyFor
     };
 });

lib/web/mage/bootstrap.js

@@ -14,9 +14,11 @@ define([
         cache: false
     });
 
+    const idleCallback = window.requestIdleCallback ?? setTimeout;
+
     /**
      * Init all components defined via data-mage-init attribute.
      * Execute in a separate task to prevent main thread blocking.
      */
-    setTimeout(mage.apply);
+    idleCallback(mage.apply);
 });