Optimize number js

app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js

@@ -120,7 +120,9 @@ define([
          * Close mini shopping cart.
          */
         closeMinicart: function () {
-            $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog('close');
+            try {
+                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog('close');
+            } catch (err) {}
         },
 
         /**

lib/web/mage/apply/main.js

@@ -13,6 +13,8 @@ define([
     var dataAttr = 'data-mage-init',
         nodeSelector = '[' + dataAttr + ']';
 
+    const idleCallback = 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,19 @@ define([
         });
     }
 
+    function isInViewport(el) {
+        if (!el.checkVisibility()) return false;
+        const rect = el.getBoundingClientRect();
+        const vWidth = window.innerWidth || doc.documentElement.clientWidth;
+        const 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 +84,35 @@ define([
         };
     }
 
+    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);
+            }
+        });
+    }
+
+    function lazyProcess(element, itemContainer) {
+        document.addEventListener('mousemove', function (e) {
+            process(element, itemContainer)
+        }, { once: true });
+    }
+
     return {
         /**
          * Initializes components assigned to HTML elements via [data-mage-init].
@@ -84,29 +130,17 @@ 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

lib/web/mage/bootstrap.js

@@ -14,9 +14,11 @@ define([
         cache: false
     });
 
+    const idleCallback = 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);
 });