Question

我知道通常，脚本会按顺序加载和执行。但是我遇到的问题是它们没有以正确的顺序执行，有时执行第二个脚本然后执行第一个脚本。

我正在使用jsp和tile。在jsp模板中，我只加载常见的js文件，然后为特定的tile

加载特定的js文件

似乎浏览器加载并异步执行脚本

如何强制它按顺序加载和执行脚本？

我在很多地方搜索了答案但没有工作。

模板：

<html>
    <head>
    <title></title>
    //load common js files
    </head>
    <body>
    <tiles:insert attribute="header"/>
    <tiles:insert attribute="content"/>
    <tiles:insert attribute="footer"/>
    </body>
</html>

特定图块：

<div>
    Test
</div>
//load js files
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
<script type="text/javascript" src="3.js"></script>

编辑：

这些javascript文件非常简单，只打印出数字1,2和3

但有时打印错误的订单。

＆＃34;内容＆＃34; div将被替换为tile，我不知道它是否是一种动态加载资源：Dynamically loading JavaScript synchronously

Answer 1

关于脚本加载的html5rocks上有一篇很棒的文章。

http://www.html5rocks.com/en/tutorials/speed/script-loading/

最简单的方法是使用defer，但IED＆lt; 10和opera mini不支持它。

<script src="//other-domain.com/1.js" defer></script>
<script src="2.js" defer></script>

规范说：一起下载，按顺序执行 DOMContentLoaded。在没有“src”的脚本上忽略“延迟”。
IE＆lt; 10说：我可能在执行1.js的过程中执行2.js。不是很有趣吗？

最终解决方案但支持较少的是动态包含和强制异步属性组合为false。

[
  '1.js',
  '2.js'
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});

它需要在IE＆lt; 10

上使用onreadystatechange

javascript arena＃39; t在现代浏览器中按顺序执行？

1 个答案: