From 72528980ddc2ed2232f6dd01e031c65101255d1a Mon Sep 17 00:00:00 2001
From: Roger <rogerdz88@hotmail.com>
Date: Sun, 1 Sep 2024 18:11:05 +0000
Subject: [PATCH 01/11] optimize call js

---
 .../view/frontend/web/js/view/minicart.js     |  4 +-
 lib/web/mage/apply/main.js                    | 77 +++++++++++++------
 2 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js b/app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js
index d3890556f3ccd..2677e91136303 100644
--- a/app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js
+++ b/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) {}
         },
 
         /**
diff --git a/lib/web/mage/apply/main.js b/lib/web/mage/apply/main.js
index 9442bffdb959b..f62d325e31ccf 100644
--- a/lib/web/mage/apply/main.js
+++ b/lib/web/mage/apply/main.js
@@ -49,6 +49,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 +80,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].
@@ -76,7 +118,8 @@ define([
          */
         apply: function (context) {
             var virtuals = processScripts(!context ? document : context),
-                nodes = document.querySelectorAll(nodeSelector);
+                nodes = document.querySelectorAll(nodeSelector),
+                idleCallback = requestIdleCallback || setTimeout;
 
             _.toArray(nodes)
                 .map(getData)
@@ -84,29 +127,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

From db93a7a56a4da3547a84b3a6250f0b38c65c8a55 Mon Sep 17 00:00:00 2001
From: Roger <rogerdz88@hotmail.com>
Date: Mon, 2 Sep 2024 04:22:44 +0000
Subject: [PATCH 02/11] update code

---
 lib/web/mage/apply/main.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/lib/web/mage/apply/main.js b/lib/web/mage/apply/main.js
index f62d325e31ccf..cbca9238cd8d9 100644
--- a/lib/web/mage/apply/main.js
+++ b/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,7 @@ define([
                 }
             }
             // Init module in separate task to prevent blocking main thread.
-            setTimeout(fn);
+            idleCallback(fn);
         }, function (error) {
             if ('console' in window && typeof window.console.error === 'function') {
                 console.error(error);
@@ -118,8 +120,7 @@ define([
          */
         apply: function (context) {
             var virtuals = processScripts(!context ? document : context),
-                nodes = document.querySelectorAll(nodeSelector),
-                idleCallback = requestIdleCallback || setTimeout;
+                nodes = document.querySelectorAll(nodeSelector);
 
             _.toArray(nodes)
                 .map(getData)

From c0474746d416b735b86c49b75bdf59c8badde9e0 Mon Sep 17 00:00:00 2001
From: Roger <rogerdz88@hotmail.com>
Date: Mon, 2 Sep 2024 07:46:18 +0000
Subject: [PATCH 03/11] update code

---
 lib/web/mage/apply/main.js | 4 +++-
 lib/web/mage/bootstrap.js  | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/web/mage/apply/main.js b/lib/web/mage/apply/main.js
index cbca9238cd8d9..9d93726350073 100644
--- a/lib/web/mage/apply/main.js
+++ b/lib/web/mage/apply/main.js
@@ -41,7 +41,9 @@ define([
                 }
             }
             // Init module in separate task to prevent blocking main thread.
-            idleCallback(fn);
+            if (fn) {
+                idleCallback(fn);
+            }
         }, function (error) {
             if ('console' in window && typeof window.console.error === 'function') {
                 console.error(error);
diff --git a/lib/web/mage/bootstrap.js b/lib/web/mage/bootstrap.js
index 924b1628f3eb9..bad813ff11954 100644
--- a/lib/web/mage/bootstrap.js
+++ b/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);
 });

From 7e5480f6f746a8ab851a317c988fc9c5054f0368 Mon Sep 17 00:00:00 2001
From: Roger <rogerdz88@hotmail.com>
Date: Mon, 2 Sep 2024 16:03:38 +0000
Subject: [PATCH 04/11] update code

---
 lib/web/mage/apply/main.js | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/lib/web/mage/apply/main.js b/lib/web/mage/apply/main.js
index 9d93726350073..efdba134df3d9 100644
--- a/lib/web/mage/apply/main.js
+++ b/lib/web/mage/apply/main.js
@@ -53,6 +53,29 @@ 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 {
+            document.addEventListener('mousemove', function (e) {
+                init(el, config, component)
+            }, { once: true });
+        }
+    }
+
+    /**
+     * Check if an element is visible in the viewport
+     *
+     * @param {HTMLElement} el
+     * @returns bool
+     */
     function isInViewport(el) {
         if (!el.checkVisibility()) return false;
         const rect = el.getBoundingClientRect();
@@ -84,6 +107,12 @@ define([
         };
     }
 
+    /**
+     * Process component
+     *
+     * @param {HTMLElement} element
+     * @param {Object} itemContainer
+     */
     function process(element, itemContainer) {
         _.each(itemContainer.data, function (obj, key) {
             if (obj.mixins) {
@@ -107,6 +136,12 @@ define([
         });
     }
 
+    /**
+     * Lazy process component via event
+     *
+     * @param {HTMLElement} element
+     * @param {Object} itemContainer
+     */
     function lazyProcess(element, itemContainer) {
         document.addEventListener('mousemove', function (e) {
             process(element, itemContainer)
@@ -143,6 +178,6 @@ define([
                     };
                 });
         },
-        applyFor: init
+        applyFor: applyFor
     };
 });

From ac45f9abaf72817d68a37d096bac77166389c823 Mon Sep 17 00:00:00 2001
From: Roger <rogerdz88@hotmail.com>
Date: Mon, 2 Sep 2024 16:28:13 +0000
Subject: [PATCH 05/11] update code

---
 .../web/js/lib/knockout/bindings/scope.js     | 39 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/scope.js b/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/scope.js
index 59e82eb88a299..2867da9fe4feb 100644
--- a/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/scope.js
+++ b/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/scope.js
@@ -13,6 +13,43 @@ define([
 ], 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 (!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;
+    }
+
+    /**
+     *  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 {
+            document.addEventListener('mousemove', function (e) {
+                runApplyComponents(el, bindingContext, promise, component);
+            }, { once: true });
+        }
+    }
+
     /**
      * Creates child context with passed component param as $data. Extends context with $t helper.
      * Applies bindings to descendant nodes.
@@ -21,7 +58,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);
 

From 6f6fc1af0dba7f78ec458ae331ce4f9193c3499d Mon Sep 17 00:00:00 2001
From: Roger <rogerdz88@hotmail.com>
Date: Mon, 2 Sep 2024 16:52:47 +0000
Subject: [PATCH 06/11] update code

---
 .../Magento/Checkout/view/frontend/web/js/view/minicart.js    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js b/app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js
index 2677e91136303..d3890556f3ccd 100644
--- a/app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js
+++ b/app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js
@@ -120,9 +120,7 @@ define([
          * Close mini shopping cart.
          */
         closeMinicart: function () {
-            try {
-                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog('close');
-            } catch (err) {}
+            $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog('close');
         },
 
         /**

From 2df45b5e850dc69ea7b068a57f272df4b7c570f5 Mon Sep 17 00:00:00 2001
From: Roger <rogerdz88@hotmail.com>
Date: Thu, 5 Sep 2024 04:31:32 +0000
Subject: [PATCH 07/11] update code

---
 .../view/frontend/web/template/minicart/content.html        | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html b/app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html
index ab2e495730a11..78551dbfcc3af 100644
--- a/app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html
+++ b/app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html
@@ -25,7 +25,8 @@
                 attr: {
                     title: $t('Close')
                 },
-                click: closeMinicart()
+                click: closeMinicart(),
+                clickBubble: false
             ">
         <span translate="'Close'"></span>
     </button>
@@ -57,7 +58,8 @@
                             attr: {
                                 title: $t('Proceed to Checkout')
                             },
-                            click: closeMinicart()
+                            click: closeMinicart(),
+                            clickBubble: false
                         "
                         translate="'Proceed to Checkout'">
                 </button>

From 1bde1a9b1c54d7936a70182fb49cbc03deed0aac Mon Sep 17 00:00:00 2001
From: Roger <rogerdz88@hotmail.com>
Date: Tue, 10 Sep 2024 04:21:48 +0000
Subject: [PATCH 08/11] update code

---
 .../web/template/minicart/content.html        |  6 +-
 .../web/js/lib/knockout/bindings/scope.js     | 61 +++++++++++--------
 lib/web/mage/apply/main.js                    | 39 ++++++++----
 lib/web/mage/bootstrap.js                     |  2 +-
 4 files changed, 66 insertions(+), 42 deletions(-)

diff --git a/app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html b/app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html
index 78551dbfcc3af..f3df8a88eaaf7 100644
--- a/app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html
+++ b/app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html
@@ -25,8 +25,7 @@
                 attr: {
                     title: $t('Close')
                 },
-                click: closeMinicart(),
-                clickBubble: false
+                click: closeMinicart
             ">
         <span translate="'Close'"></span>
     </button>
@@ -58,8 +57,7 @@
                             attr: {
                                 title: $t('Proceed to Checkout')
                             },
-                            click: closeMinicart(),
-                            clickBubble: false
+                            click: closeMinicart
                         "
                         translate="'Proceed to Checkout'">
                 </button>
diff --git a/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/scope.js b/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/scope.js
index 2867da9fe4feb..08ffcd0e7f8de 100644
--- a/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/scope.js
+++ b/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/scope.js
@@ -9,8 +9,9 @@ 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';
 
     /**
@@ -20,36 +21,23 @@ define([
      * @returns bool
      */
     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;
+        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;
+        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;
     }
 
-    /**
-     *  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 {
-            document.addEventListener('mousemove', function (e) {
-                runApplyComponents(el, bindingContext, promise, component);
-            }, { once: true });
-        }
-    }
-
     /**
      * Creates child context with passed component param as $data. Extends context with $t helper.
      * Applies bindings to descendant nodes.
@@ -71,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 = {
 
         /**
diff --git a/lib/web/mage/apply/main.js b/lib/web/mage/apply/main.js
index efdba134df3d9..68029f9275adc 100644
--- a/lib/web/mage/apply/main.js
+++ b/lib/web/mage/apply/main.js
@@ -13,7 +13,7 @@ define([
     var dataAttr = 'data-mage-init',
         nodeSelector = '[' + dataAttr + ']';
 
-    const idleCallback = requestIdleCallback || setTimeout;
+    const idleCallback = window.requestIdleCallback ?? setTimeout;
 
     /**
      * Initializes components assigned to a specified element via data-* attribute.
@@ -64,9 +64,14 @@ define([
         if (!el || isInViewport(el)) {
             init(el, config, component)
         } else {
-            document.addEventListener('mousemove', function (e) {
-                init(el, config, component)
-            }, { once: true });
+            (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']);
         }
     }
 
@@ -77,13 +82,18 @@ define([
      * @returns bool
      */
     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;
+        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;
+        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;
@@ -143,9 +153,14 @@ define([
      * @param {Object} itemContainer
      */
     function lazyProcess(element, itemContainer) {
-        document.addEventListener('mousemove', function (e) {
-            process(element, itemContainer)
-        }, { once: true });
+        (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 {
diff --git a/lib/web/mage/bootstrap.js b/lib/web/mage/bootstrap.js
index bad813ff11954..6f0fd14795f27 100644
--- a/lib/web/mage/bootstrap.js
+++ b/lib/web/mage/bootstrap.js
@@ -14,7 +14,7 @@ define([
         cache: false
     });
 
-    const idleCallback = requestIdleCallback || setTimeout;
+    const idleCallback = window.requestIdleCallback ?? setTimeout;
 
     /**
      * Init all components defined via data-mage-init attribute.

From 342d58465ad4cd2ef1a22acdaf72153b1b7ebd90 Mon Sep 17 00:00:00 2001
From: Roger <rogerdz88@hotmail.com>
Date: Wed, 18 Dec 2024 07:23:29 +0000
Subject: [PATCH 09/11] add lazy ko template

---
 .../web/js/lib/knockout/template/engine.js    | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js b/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js
index 3575225c74602..fef32d698c38a 100644
--- a/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js
+++ b/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 ((!_.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.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,

From 51f0784cebb74bfa0369d5b9e4955cd54ec0d48e Mon Sep 17 00:00:00 2001
From: Roger <rogerdz88@hotmail.com>
Date: Wed, 18 Dec 2024 08:18:59 +0000
Subject: [PATCH 10/11] add lazy ko template

---
 .../Ui/view/base/web/js/lib/knockout/template/engine.js       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js b/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js
index fef32d698c38a..b855f846dc36c 100644
--- a/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js
+++ b/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js
@@ -17,7 +17,7 @@ define([
         sources = {};
 
     function isInViewport(el) {
-        if ((!_.isFunction(el.checkVisibility)) || !el.checkVisibility()) {
+        if (!el || (!_.isFunction(el.checkVisibility)) || !el.checkVisibility()) {
             return false;
         }
 
@@ -77,7 +77,7 @@ define([
          */
         ko.bindingHandlers.template.update = function (element, valueAccessor, allBindings, viewModel, bindingContext) {
             /*eslint-enable no-unused-vars*/
-            if (isInViewport(element.parentElement)) {
+            if (isInViewport(element.previousElementSibling) || isInViewport(element.parentElement)) {
                 return ko.bindingHandlers.template._updateTemplate.apply(this, arguments);
             } else {
                 (events => {

From 778cb17cffe20dbadf2bc9a35cd3ebfddc9f3939 Mon Sep 17 00:00:00 2001
From: rogerdz <rogerdz88@hotmail.com>
Date: Thu, 15 May 2025 09:32:47 +0000
Subject: [PATCH 11/11] update code

---
 .../Customer/view/frontend/templates/js/customer-data.phtml | 3 +--
 .../Magento/Theme/view/frontend/templates/html/header.phtml | 6 +++---
 lib/web/mage/apply/main.js                                  | 4 +---
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/app/code/Magento/Customer/view/frontend/templates/js/customer-data.phtml b/app/code/Magento/Customer/view/frontend/templates/js/customer-data.phtml
index 9e4d5b97dc967..675fc35c18765 100644
--- a/app/code/Magento/Customer/view/frontend/templates/js/customer-data.phtml
+++ b/app/code/Magento/Customer/view/frontend/templates/js/customer-data.phtml
@@ -3,7 +3,6 @@
  * Copyright 2015 Adobe
  * All Rights Reserved.
  */
-use Magento\Customer\ViewModel\Customer\Data;
 use Magento\Customer\ViewModel\CookieSettings;
 
 /**
@@ -23,7 +22,7 @@ $cookieSettings = $block->getCookieSettings();
 ?>
 <script type="text/x-magento-init">
     {
-        "*": {
+        "header": {
             "Magento_Customer/js/customer-data": {
                 "sectionLoadUrl": "<?= $escaper->escapeJs($block->getCustomerDataUrl('customer/section/load')) ?>",
                 "expirableSectionLifetime": <?= (int)$block->getExpirableSectionLifetime() ?>,
diff --git a/app/code/Magento/Theme/view/frontend/templates/html/header.phtml b/app/code/Magento/Theme/view/frontend/templates/html/header.phtml
index 1b43e801ed2a7..5f293b3b60465 100644
--- a/app/code/Magento/Theme/view/frontend/templates/html/header.phtml
+++ b/app/code/Magento/Theme/view/frontend/templates/html/header.phtml
@@ -1,7 +1,7 @@
 <?php
 /**
- * Copyright © Magento, Inc. All rights reserved.
- * See COPYING.txt for license details.
+ * Copyright 2014 Adobe
+ * All Rights Reserved.
  */
 
 /**
@@ -27,7 +27,7 @@ $welcomeMessage = $block->getWelcome();
     <?php // phpcs:ignore Magento2.Legacy.PhtmlTemplate ?>
     <script type="text/x-magento-init">
         {
-            "*": {
+            ".welcome": {
                 "Magento_Ui/js/core/app": {
                     "components": {
                         "customer": {
diff --git a/lib/web/mage/apply/main.js b/lib/web/mage/apply/main.js
index 68029f9275adc..d54e9c17ae030 100644
--- a/lib/web/mage/apply/main.js
+++ b/lib/web/mage/apply/main.js
@@ -181,9 +181,7 @@ define([
                     var element = itemContainer.el;
 
                     if (!element) {
-                        idleCallback(function () {
-                            process(element, itemContainer);
-                        });
+                        lazyProcess(element, itemContainer);
                     } else {
                         if (isInViewport(element)) {
                             process(element, itemContainer);