BX9013: 动态引入的外部 JS 文件在各浏览器中的加载顺序不一致

时间:2023-01-22 19:43:28
现在页面开发过程中,为了减少页面加载时外部 JS 文件静态引用过多,导致页面呈线性加载状态而使整体效果无法及时显示的情况,一般情况下会在页面内容加载完成后采用动态引入的外部 JS 文件的方法来加快页面显示速度,这就导致了各种常用动态引入的外部脚本文件在在各浏览器中的执行顺序不一致。

本文地址: http://www.w3help.org/zh-cn/causes/BX9013

本帖为以上问题的讨论专区,欢迎踊跃发帖,提出您的宝贵意见和建议,谢谢!

4 个解决方案

#1


firefox 与IE 都有这方面的插件,可以查看的。

#2


现在页面开发过程中,为了减少页面加载时外部 JS 文件静态引用过多,导致页面呈线性加载状态而使整体效果无法及时显示的情况,一般情况下会在页面内容加载完成后采用动态引入的外部 JS 文件的方法来加快页面显示速度。但各种常用动态引入的外部脚本文件在各浏览器中的执行顺序不一致。

#3


if ( onload ) {
domscript.onloadDone = false;
domscript.onload = onload;
domscript.onreadystatechange = function() {
if ( "loaded" === domscript.readyState && domscript.onloadDone ) {
domscript.onloadDone = true;
domscript.onload();
domscript.removeNode(true);
}
}
}
这段代码中domscript.onloadDone = false;之后if ( "loaded" === domscript.readyState && domscript.onloadDone ) {}貌似永远执行不到因为domscript.onloadDone为false,那位高手能给解释下?

#4


因为动态加载的js是放入已经存在的执行队列中。因此,执行顺序跟放入队列的顺序有关。动态加载的js在加载完成后会被马上放入执行队列,因此,执行顺序与每个js文件加载所需的时间有关系,是不确定的。

这一点不要与浏览器解析html时中加载js弄糊涂了。虽然现在的浏览器可以同步下载脚本,但在解析html时,脚本的执行顺序是有规定的,放入js执行队列的顺序与<script>标签的顺序一样。

#1


firefox 与IE 都有这方面的插件,可以查看的。

#2


现在页面开发过程中,为了减少页面加载时外部 JS 文件静态引用过多,导致页面呈线性加载状态而使整体效果无法及时显示的情况,一般情况下会在页面内容加载完成后采用动态引入的外部 JS 文件的方法来加快页面显示速度。但各种常用动态引入的外部脚本文件在各浏览器中的执行顺序不一致。

#3


if ( onload ) {
domscript.onloadDone = false;
domscript.onload = onload;
domscript.onreadystatechange = function() {
if ( "loaded" === domscript.readyState && domscript.onloadDone ) {
domscript.onloadDone = true;
domscript.onload();
domscript.removeNode(true);
}
}
}
这段代码中domscript.onloadDone = false;之后if ( "loaded" === domscript.readyState && domscript.onloadDone ) {}貌似永远执行不到因为domscript.onloadDone为false,那位高手能给解释下?

#4


因为动态加载的js是放入已经存在的执行队列中。因此,执行顺序跟放入队列的顺序有关。动态加载的js在加载完成后会被马上放入执行队列,因此,执行顺序与每个js文件加载所需的时间有关系,是不确定的。

这一点不要与浏览器解析html时中加载js弄糊涂了。虽然现在的浏览器可以同步下载脚本,但在解析html时,脚本的执行顺序是有规定的,放入js执行队列的顺序与<script>标签的顺序一样。