如何在OpenCart中推迟或异步javascript

Question

I have OpenCart application. 我有OpenCart应用程序。 Javascripts are loaded in settings.php inside path '/catalog/controller//settings.php with similar codes as: 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');

Here, 'theme' means theme name that is installed. 这里，'theme'表示安装的主题名称。 I want to defer or async these javascript loading in OpenCart, how can I do it? 我想在OpenCart中推迟或异步这些javascript加载，我该怎么办呢？

I know that addScript syntax has 1s parameter as file, second location, 3rd defer and 4th async where defer and async can be boolean. 我知道addScript语法有1s参数作为文件，第二个位置，第3个延迟和第4个异步，其中defer和async可以是boolean。 I have tried statement as below to see defer false and async true: 我已经尝试过如下语句来查看推迟false和async true：

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

but I am not sure if this will work or not. 但我不确定这是否有效。 Please suggest 请建议

Answer 1

Here is a script I've been using for quite some time, in the head element. 这是一个我已经使用了很长一段时间的脚本元素。

With this you get good control of your loading of files, and can start loading anything after all the DOM is loaded, just make sure the files is not required anywhere in the DOM upon load. 通过这种方式，您可以很好地控制文件的加载，并且可以在加载所有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>

And here is a good article which describes a few more ways to speed things up, and one of them is combining your js files into 1, or 2-3-4, based on which one needs which. 这里有一篇很好的文章，它描述了一些加快速度的方法，其中之一就是将你的js文件组合成1或2-3-4，根据哪一个需要。 The benefit is less http request. 好处是http请求较少。

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

And google is filled with articles 谷歌充满了文章

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

Answer 2

For reducing page load times, you must do two mainly things 为减少页面加载时间，您必须做两件事

Reduce number of requests 减少请求数量
Reduce package sizes 减少包装尺寸

For reducing number of requests, you may merge all javascripts & css to one file. 为减少请求数，您可以将所有javascripts和css合并到一个文件中。 You should also applying lazy load images (This helps reduce package size too) 您还应该应用延迟加载图像（这有助于减少包大小）

If you are running a VPS, you may try to install mod_pagespeed (developed by google) - It will help decrease a lot page load time. 如果您正在运行VPS，您可以尝试安装mod_pagespeed（由谷歌开发） - 这将有助于减少很多页面加载时间。

I am not sure if you have used gtmetrix.com or http://www.webpagetest.org/ for reviewing your site speed yet. 我不确定您是否使用过gtmetrix.com或http://www.webpagetest.org/来查看您的网站速度。

For my experience, lazy load JavaScript will not help you much 根据我的经验，延迟加载JavaScript对你没有多大帮助

如何在OpenCart中推迟或异步javascript

问题描述

2 个解决方案

解决方案1
3 2016-01-19 20:49:04

解决方案2
0 2016-01-21 17:06:12

如何在OpenCart中推迟或异步javascript

问题描述

2 个解决方案

解决方案1 3 2016-01-19 20:49:04

解决方案2 0 2016-01-21 17:06:12

解决方案1
3 2016-01-19 20:49:04

解决方案2
0 2016-01-21 17:06:12