Как я могу отложить или асинхронный javascript в OpenCart

У меня есть приложение OpenCart. Javascripts загружаются в settings.php внутри пути '/catalog/controller//settings.php с похожими кодами как:

 $this->document->addScript('catalog/view/theme/<theme>/lib/lazy/jquery.lazy.1.6.min.js');
    $this->journal2->minifier->addScript('catalog/view/theme/<theme>/lib/actual/jquery.actual.min.js', 'header');
    $this->journal2->minifier->addScript('catalog/view/theme/<theme>/lib/hover-intent/jquery.hoverIntent.min.js', 'footer');

Здесь "тема" означает имя темы, которое установлено. Я хочу отложить или асинхронно загрузить эти javascript в OpenCart, как я могу это сделать?

Я знаю, что синтаксис addScript имеет 1-й параметр как файл, второе место, 3-й отложенный и 4-й асинхронный, где отсрочка и асинхронные операции могут быть логическими. Я попробовал инструкцию, как показано ниже, чтобы увидеть отложенное ложное и асинхронное значение true:

 $this->journal2->minifier->addScript('catalog/view/theme/<theme>/lib/hover-intent/jquery.hoverIntent.min.js', 'footer', false, true);

но я не уверен, что это сработает или нет. Пожалуйста, предложите

Ответ 1

Вот script, который я использовал в течение некоторого времени в элементе head.

С этим вы получаете хороший контроль над загрузкой файлов и можете загружать что-либо после загрузки DOM, просто убедитесь, что файлы не требуются нигде в DOM при загрузке.

<head>
    <title></title>
    <link rel='stylesheet' type='text/css' href='css.css' />
    <script type='text/javascript'>         

        var DomLoaded = {
            done: false, onload: [],
            loaded: function () {
                if (DomLoaded.done) return;
                DomLoaded.done = true;
                if (document.removeEventListener) { document.removeEventListener('DOMContentLoaded', DomLoaded.loaded, false); }
                for (i = 0; i < DomLoaded.onload.length; i++) DomLoaded.onload[i]();
            },
            load: function (fireThis) {
                this.onload.push(fireThis);
                if (document.addEventListener) {
                    document.addEventListener('DOMContentLoaded', DomLoaded.loaded, false);
                } else {
                    /*IE<=8*/
                    if (/MSIE/i.test(navigator.userAgent) && !window.opera) {
                        (function () {
                            try { document.body.doScroll('up'); return DomLoaded.loaded(); } catch (e) { }
                            if (/loaded|complete/.test(document.readyState)) return DomLoaded.loaded();
                            if (!DomLoaded.done) setTimeout(arguments.callee, 10);
                        })();
                    }
                }
                /* fallback */
                window.onload = DomLoaded.loaded;
            }
        };

        DomLoaded.load(function () {
            var d = document;
            var h = d.getElementsByTagName('head')[0];
            var s = d.createElement('script');
            s.setAttribute('type', 'text/javascript');
            s.setAttribute('async', true);
            s.setAttribute('defer', true);
            s.setAttribute('src', '/path/to/scripts.js');
            h.appendChild(s);
        });

    </script>
</head>

И вот хорошая статья, в которой описывается еще несколько способов ускорить процесс, и один из них объединяет ваши файлы js в 1 или 2-3-4, на основе которых он нуждается. Преимущество - это меньше HTTP-запроса.

http://exisweb.net/web-site-optimization-making-javascript-load-faster

И google заполняется статьями

https://www.google.com/search?q=speed%20up%20loading%20javascript%20files&rct=j

Ответ 2

Для уменьшения времени загрузки страницы вы должны сделать две вещи в основном:

Уменьшить количество запросов
Уменьшить размеры пакетов

Для уменьшения количества запросов вы можете объединить все javascripts и css в один файл. Вы также должны применять ленивые изображения загрузки (Это также помогает уменьшить размер пакета)

Если вы используете VPS, вы можете попробовать установить mod_pagespeed (разработанный google). Это поможет уменьшить время загрузки страницы.

Я не уверен, что вы использовали gtmetrix.com или http://www.webpagetest.org/ для проверки скорости вашего сайта.

По моему опыту, ленивая загрузка JavaScript вам не поможет.