[英]How can I defer or async javascript in 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');
这里,'theme'表示安装的主题名称。 我想在OpenCart中推迟或异步这些javascript加载,我该怎么办呢?
我知道addScript语法有1s参数作为文件,第二个位置,第3个延迟和第4个异步,其中defer和async可以是boolean。 我已经尝试过如下语句来查看推迟false和async true:
$this->journal2->minifier->addScript('catalog/view/theme/<theme>/lib/hover-intent/jquery.hoverIntent.min.js', 'footer', false, true);
但我不确定这是否有效。 请建议
这是一个我已经使用了很长一段时间的脚本元素。
通过这种方式,您可以很好地控制文件的加载,并且可以在加载所有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
为减少页面加载时间,您必须做两件事
为减少请求数,您可以将所有javascripts和css合并到一个文件中。 您还应该应用延迟加载图像 (这有助于减少包大小)
如果您正在运行VPS,您可以尝试安装mod_pagespeed(由谷歌开发) - 这将有助于减少很多页面加载时间。
我不确定您是否使用过gtmetrix.com或http://www.webpagetest.org/来查看您的网站速度。
根据我的经验,延迟加载JavaScript对你没有多大帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.