我使用动态脚本加载来减少初始页面加载的持续时间.为确保可以访问脚本定义的函数和对象,我需要确保脚本已完全加载.
为此我开发了自己的Javascript库,因此对该主题进行了大量研究,研究了它在不同库中的完成情况.在与此问题相关的讨论中,LABjs的作者Kyle Simpson 表示:
LABjs(以及许多其他加载器)在所有脚本元素上设置"onload"和"onreadystatechange",知道某些浏览器会触发一个,有些浏览器会触发另一个...
在撰写本文时,您可以在当前版本的jQuery中找到此示例,v1.3.2:
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function(){
if ( !done && (!this.readyState ||
this.readyState == "loaded" || this.readyState == "complete") ) {
done = true;
success();
complete();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
head.removeChild( script );
}
};
这是最先进的技术,但在分析Opera 9.64中的一个奇怪的行为时,我得出的结论是,使用这种技术,onload回调过早被解雇了.
我会在回答这个问题时发表自己的研究结果,并希望收集社区的进一步证据和反馈.
我正在寻找一种干净的方式来异步加载以下类型的javascript文件:一个"核心"js文件(嗯,我只是叫它,哦,我不知道,"jquery!"哈哈),x个js依赖于正在加载的"核心"js文件的文件,以及y个其他不相关的js文件.我有几个关于如何去做的想法,但不知道最好的方法是什么.我想避免在文档正文中加载脚本.
因此,例如,我希望以下4个javascript文件异步加载,适当命名:
/js/my-contact-page-js-functions.js // unrelated/independent script
/js/jquery-1.3.2.min.js // the "core" script
/js/jquery.color.min.js // dependent on jquery being loaded
http://thirdparty.com/js/third-party-tracking-script.js // another unrelated/independent script
但这不起作用,因为它不能保证在颜色插件之前加载jQuery ...
(function() {
var a=[
'/js/my-contact-page-functions.js',
'/js/jquery-1.4.2.min.js',
'/js/jquery.color.js',
'http://cdn.thirdparty.com/third-party-tracking-script.js',
],
d=document,
h=d.getElementsByTagName('head')[0],
s,
i,
l=a.length;
for(i=0;i<l;i++){
s=d.createElement('script');
s.type='text/javascript';
s.async=true;
s.src=a[i];
h.appendChild(s);
}
})();
几乎不可能异步加载jquery和颜色插件？(因为颜色插件需要首先加载jQuery.)
我考虑的第一种方法是将颜色插件脚本和jQuery源组合到一个文件中.
然后我的另一个想法是加载颜色插件,如下所示:
$(window).ready(function() {
$.getScript("/js/jquery.color.js");
});
任何人都对你如何做到这一点有任何想法？谢谢!
我最近改用了LABjs在SharePoint Webparts(2010)中加载脚本.这样做的主要原因是,如果将多个Web部件添加到同一页面,则不要多次向页面加载相同的库(如jquery和jquery.ui).这样,他们每个人都可以单独指定其依赖关系,而无需警告已经或可能添加了哪些其他Web部件.
两者LABjs和另一个包含脚本链的文件都是通过<script>Webpart标记底部的标记加载的.
10次中有9次,Javascript执行没有任何问题.不过,每隔一段时间,就会抛出一个异常,说明TypeError: $(...).button is not a function.
即使页面上只有一个Webpart并且似乎与浏览器无关(在页面强制使用FireFox 38,Chrome 43和IE 11/IE 8中测试),也会发生这种情况.
链看起来像这样(为清晰起见编辑):
$LAB.setOptions({Debug:true})
.script("../js/jquery-1.11.3.min.js").wait()
.script("../js/jquery-migrate-1.2.1.min.js").wait()
.script("../js/jquery-ui.min.js").wait()
.script("../js/core.js")
.wait(function(){
jQuery(function() {
init(); // The jQuery UI .button() call
});
})
.script("../js/jquery.multiselect.min.js").wait()
.script("../js/jquery.multiselect.filter.min.js")
.script("../js/rte/jquery.rte.js").wait()
.script("../js/rte/jquery.rte.tb.js")
.script("../js/rte/jquery.ocupload-1.1.4.js")
.wait(function () {
jQuery(function() {
// Some DOM-dependant code lives here
});
});
这是调试器输出的内容(为清晰起见,也进行了编辑):
start script load (ordered async): ../js/jquery-1.11.3.min.js
start script load (ordered async): ../js/jquery-migrate-1.2.1.min.js
start script load (ordered async): …我使用yepnope.js作为资源加载.我想只在加载了该模块的所有依赖项时才在我的JS模块中执行代码.我不想加载已经加载的JS依赖项.
假设,我有依赖D1.js和D2.js. 我试过了
yepnope({
load: ['D1.js', 'D2.js],
complete: function() {
//execute my code here
}
});
这是有效的,但是,每次都会加载资源,即使它们之前已经加载过.
如果我做那样的多个测试:
yepnope([{
test: $().d1,
nope: 'D1.js'
},
{
test: $().d2,
nope: 'D2.js'
}]);
目前尚不清楚在哪里放置整体已完成的功能 - 在所有资源加载后运行的功能.
是否可以使用yepnope执行此操作,还是需要使用其他组件？
谢谢.
我试图找到如何将ExtJs和ExtJs模块包装起来用于javascript依赖框架(如RequireJS或LAB)的示例.
我正在使用一个基于ExtJs的大型项目,并且有许多单独的模块文件,这些文件只是大量包含在各处,它有点失控.
有没有人使用现有的ExtJs依赖管理框架？(我知道ExtJs 4可能包含类似的东西,但我修复了使用ExtJs 3)
蝙蝠Magento带有超过6个JavaScript库,这些库对已经很繁琐的加载时间没有帮助.有没有人能够成功地使用像head.js或labjs这样的脚本加载器和Magento,以便它们可以异步加载？我一直在尝试,但无法让它工作.
似乎页面上的内联脚本在加载库之前触发.我知道head.js有一个像head.ready这样的函数来告诉脚本执行,但是有很多内联脚本将它添加到整个站点中的每个事件都是不切实际的.
我想通过资源加载器加载javascript和css文件.我最初使用的是LabJs,但我发现YepNope在我的场景中更优雅,更容易使用.然而,我发现它非常缓慢,这很奇怪,因为在大多数情况下它显然可以与LabJs相媲美.
我有一件事是Etags,我确信它会减慢一切,因为它仍然要求从服务器请求而不是仅仅处理客户端缓存.
无论如何,主要的YepNope网站之外没有多少,并且他们还没有在他们的问题列表上发布一个新版本,所以我想知道那里还有其他选择...
我的要求是:
我希望YepNope有点活跃但是想要权衡其他选择......
问题是关于http://labjs.com - 一个非阻塞的JavaScript加载和依赖项管理的很棒的库.
我已经阅读了文档,但我必须太累或者其他东西 - 我找不到关于DOM ready事件的任何内容.在DOM准备好之后是否执行脚本？
也许如果我这样做:
$LAB.script('my-library.js').wait(function(){
// interacting with DOM
});
它会安全吗？或者我应该使用某种$(function() {})等？
我在我开发的一个站点中使用实验室j进行了一些测试,并在页面加载时减少了200ms.后端处理后现在花费的总时间约为1.5秒.
如果值得这么麻烦,我就在徘徊.200ms是一个巨大的收益？一个荒谬的？我知道页面加载时间会影响页面排名,但200ms会产生如此大的差异吗？
加载我的Angular应用程序时,我一直收到此错误.在Chrome中,一对夫妇刷新,我的应用程序将运行,但IE和FF是不行.
该错误将我链接到此错误页面,但我真的不明白它的含义.
我正在使用LabsJS加载我的应用程序,包括控制器和服务.
// spAppLoader.js
$LAB
.script("../js/app.js").wait()
.script("../js/controllers/userCtrl.js")
.script("../js/controllers/groupCtrl.js")
.script("../js/controllers/siteCtrl.js")
.script("../js/services/userServices.js")
.script("../js/services/groupServices.js")
.script("../js/services/siteServices.js")
标记:
<div id="mdContainer" ng-app="spApp" ng-cloak>
...
</div>
<script type="text/javascript" src="../js/spAppLoader.js"></script>
我想发布更多的代码,但我不知道从哪里开始,而角度一切都在多个文件中.我通过github上传了它.
我确信我不完全理解这个问题,但似乎我们在我的项目中看到IE9上的奇怪行为,不知何故与通过调用注入的JavaScript的无序执行有关document.write,例如:
document.write('<scr'+'ipt type="text/javascript" src="'+file1+'"></src'+'ipt>');
document.write('<scr'+'ipt type="text/javascript" src="'+file2+'"></src'+'ipt>');
document.write('<scr'+'ipt type="text/javascript" src="'+file3+'"></src'+'ipt>');
我有限的谷歌研究表明,IE9将以与其他浏览器不同的顺序执行以这种方式注入的脚本(特别是Firefox和Chrome).有没有更好的方法来实现我们的目标,这将确保所有浏览器的执行顺序相同？
我把它拿回来了:我们并不关心所有浏览器,只关注Chrome和IE9.
javascript internet-explorer google-chrome javascript-injection labjs