如何在 OpenCart 中延迟或异步 javascript答案

【问题标题】：How can I defer or async javascript in OpenCart如何在 OpenCart 中延迟或异步 javascript
【发布时间】：2015-08-04 10:23:24
【问题描述】：

我有 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');

这里，“主题”是指已安装的主题名称。我想在 OpenCart 中延迟或异步加载这些 javascript，我该怎么做？

我知道 addScript 语法有 1s 参数作为文件、第二个位置、第三个延迟和第四个异步，其中延迟和异步可以是布尔值。我尝试了如下语句来查看 defer false 和 async true：

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

但我不确定这是否可行。请推荐

【问题讨论】：

defer 和 async 标志只会将同名的属性添加到生成的 <script> 标记中。你的实际问题是什么，你想达到什么目的？因为async 加载 JavaScript 会导致一些问题，必须正确完成。例如：一段代码想要使用一个尚未加载的库。
我想减少 OpenCart 中的 javascript 加载时间。当 OpenCart 主页加载时，它会加载大约 27 个 javascript 文件，这使得加载速度很慢。我想以某种方式快速加载。谢谢。
为了让未来的用户知道，请接受一个最能解决您问题的答案（如果有的话）。如果我的回答不清楚或仍然没有帮助，请随时提问。

标签： javascript opencart deferred

【解决方案1】：

这是一个我已经使用了一段时间的脚本，在 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

而且谷歌充斥着文章

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

【讨论】：

【解决方案2】：

为了减少页面加载时间，您必须做两件事

减少请求数
减小封装尺寸

为了减少请求的数量，您可以将所有 javascripts 和 css 合并到一个文件中。您还应该申请lazy load images（这也有助于减小包大小）

如果您运行的是 VPS，您可以尝试安装 mod_pagespeed（由 google 开发） - 这将有助于减少很多页面加载时间。

我不确定您是否使用过 gtmetrix.com 或 http://www.webpagetest.org/ 尚未审核您的网站速度。

根据我的经验，延迟加载 JavaScript 对你没有多大帮助

【讨论】：