动态脚本添加应该订购吗？

发布于 2024-09-01 03:44:44 字数 2357 浏览 9 评论 0原文

我在页面加载后动态添加一些

我在 Firefox 中看到了预期的行为，但在 Safari 或 Chrome 中却没有看到。查看Chrome开发者工具和Firebug中的文档，都显示以下内容 -

<html>
  <head>
    ...
    <script type="text/javascript" src="A.js"></script>
    <script type="text/javascript" src="B.js"></script>
  </head>
  ...
</html>

然而，查看资源加载视图，chrome似乎解析首先从服务器返回的内容，而firebug总是按照添加脚本标签的顺序加载它们，即使 B 首先从服务器返回。

我应该期望 Chrome/Safari 按指定的顺序解析文件吗？在 OS X 10.6.3 上使用 Chrome 5.0.375.29 beta

编辑（10/5/10）：当我说解析时，我的意思是执行 - 可以看到积极解析的许多好处 - thx rikh

编辑（10/5/10）：好的所以我按照下面 juandopazo 的思路做了一个测试。不过，我添加了一些内容的组合，包括

使用 javascript 直接将脚本元素添加到头部。（测试A -> D）
使用jquery 的append() 方法将脚本元素添加到头部。（测试 E -> H）
使用 jquery 的 getScript() 方法“加载”脚本。（测试 I -> L）

我还尝试了脚本标签上“async”和“defer”属性的所有组合。

您可以在此处访问测试 - http://dyn-script-load.appspot.com/，并查看源代码以了解其工作原理。加载的脚本只需调用 update() 函数即可。

首先要注意的是，只有上述第 1 种和第 3 种方法是并行操作的 - 第二种方法按顺序执行请求。您可以在此处查看该图 -

图 1 - 请求生命周期图
请求生命周期图 http://dyn-script-load.appspot.com/images/ dynScriptGraph.png

同样有趣的是，jquery append() 方法也会阻止 getScript() 调用 - 您可以看到它们都不会执行，直到所有 append() 调用完成为止，然后它们都并行运行。最后要注意的是，一旦脚本标签被执行，jQuery的append()方法显然会从文档头中删除它们。只有第一种方法将脚本标记保留在文档中。

Chrome 结果

结果是，无论测试如何，Chrome 始终执行第一个返回的脚本。这意味着除了 jQuery append() 方法之外，所有测试都“失败”。

图片 2 - Chrome 5.0.375.29 beta 结果
Chrome 结果 http://dyn-script-load.appspot.com/images/chromeDynScript .png

Firefox 结果

然而，在 Firefox 上，如果使用第一种方法，并且 async 为 false（即未设置），则脚本将可靠地按顺序执行。

图 3 - FF 3.6.3 结果
FF 结果 http://dyn-script-load.appspot.com/images/ffDynScript .png

请注意，Safari 似乎以与 Chrome 相同的方式给出不同的结果，这是有道理的。

另外，我在慢速脚本上只有 500 毫秒的延迟，只是为了缩短开始->结束时间。您可能需要刷新几次才能看到 Chrome 和 Safari 全部失败。

在我看来，如果没有一种方法可以做到这一点，我们就无法利用并行检索数据的能力，而且没有理由不这样做（如 Firefox 所示）。

原文

I'm adding some <script> tags dynamically to the head element after page load. I understand the scripts are loaded asynchronously, but can I expect them to be parsed in the order they are added?

I'm seeing the expected behaviour in Firefox, but not in Safari or Chrome. Looking at the document in Chrome developer tools and Firebug, both show the following -

<html>
  <head>
    ...
    <script type="text/javascript" src="A.js"></script>
    <script type="text/javascript" src="B.js"></script>
  </head>
  ...
</html>

However looking at the resource loading view, chrome seems to parse whichever is returned first from the server, while firebug always loads them in the order the script tags were added, even when B is returned first from the server.

Should I expect Chrome/Safari to parse the files in the specified order? Using Chrome 5.0.375.29 beta on OS X 10.6.3

EDIT (10/5/10): When I say parse, I mean execute - can see many benefits of aggressive parsing - thx rikh

EDIT (11/5/10): Ok so I put together a test along the lines of that by juandopazo below. However I have added a combination of things, including

Adding the script element to the head directly with javascript. (Tests A -> D)
Adding the script element to the head using jquery's append() method. (Tests E -> H)
'Loading' the script with jquery's getScript() method. (Tests I -> L)

I also tried all combination of the 'async' and 'defer' attributes on the script tags.

You can access the test here - http://dyn-script-load.appspot.com/, and view source to see how it works. The loaded scripts simply call the update() function.

The first thing to note, is that only the 1st and 3rd methods above operate in parallel - the 2nd executes requests sequentially. You can see a graph of this here -

Image 1 - Graph of Request Lifecycle
Request lifecycle Graph http://dyn-script-load.appspot.com/images/dynScriptGraph.png

It's also interesting that the jquery append() approach also blocks getScript() calls - you can see that none of them execute until all of the append() calls are complete, and then they all run in parallel. Final note on this is that the jQuery append() method apparently removes the script tags from the document head once they have executed. Only the first method leaves the script tags in the document.

Chrome Results

The results are that Chrome always executes the first script to return, regardless of the test. This means all the test 'fail', except the jQuery append() method.

Image 2 - Chrome 5.0.375.29 beta Results
Chrome Results http://dyn-script-load.appspot.com/images/chromeDynScript.png

Firefox Results

On firefox, however, it appears that if the first method is used, and async is false (i.e. not set), then the scripts will reliably execute in order.

Image 3 - FF 3.6.3 Results
FF Results http://dyn-script-load.appspot.com/images/ffDynScript.png

Note that Safari seems to give varied results in the same manner as Chrome, which makes sense.

Also, I only have a 500ms delay on the slow script, just to keep the start->finish time down. You may have to refresh a couple of times to see Chrome and Safari fail on everything.

It seems to me that without a method for doing this, we are not taking advantage of the ability to retrieve data in parallel, and there is no reason why we shouldn't (as firefox shows).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ら栖息 2024-09-08 03:44:44

很抱歉回答我自己的问题，但已经有一段时间了，我们确实找到了解决方案。我们想到的是将 JavaScript 作为包含在 json 对象中的文本同时加载，然后在它们全部加载后使用 eval() 以正确的顺序执行它们。并发加载加上有序执行。根据您的用例，您可能不需要 json。粗略地说，这里有一些代码显示了我们所做的事情 -

// 'requests' is an array of url's to javascript resources
var loadCounter = requests.length;
var results = {};

for(var i = 0; i < requests.length; i++) {
   $.getJSON(requests[i], function(result) {
      results[result.id] = result;
      ...
      if(--loadCounter == 0) finish();
   });
}

function finish() {
  // This is not ordered - modify the algorithm to reflect the order you want
  for(var resultId in results) eval(results[resultId].jsString);
}

Sorry for answering my own question, but its been a while and we did come up with a solution. What we came up with was to load the javascript concurrently as text contained in a json object, and then used eval() once they were all loaded to execute them in the correct order. Concurrent load plus ordered execution. Depending on your use case you may not need the json. Roughly, here is some code that shows what we did -

// 'requests' is an array of url's to javascript resources
var loadCounter = requests.length;
var results = {};

for(var i = 0; i < requests.length; i++) {
   $.getJSON(requests[i], function(result) {
      results[result.id] = result;
      ...
      if(--loadCounter == 0) finish();
   });
}

function finish() {
  // This is not ordered - modify the algorithm to reflect the order you want
  for(var resultId in results) eval(results[resultId].jsString);
}

回复收藏 0 原文

软的没边 2024-09-08 03:44:44

据我了解，它们应该按照它们在文档中出现的顺序执行。某些浏览器可能能够无序地执行一些解析，但它们仍然必须以正确的顺序执行。

回复收藏 0 原文

じее 2024-09-08 03:44:44

不，您不能期望所有浏览器都会推迟两个脚本的执行，直到两个脚本都加载完毕（**特别是当您动态添加它们时）。

如果您想仅在加载 A.js 后才执行 B.js 中的代码，那么最好的选择是将 onload 回调添加到 < code>A.js 设置一个变量，另一个变量设置为 B.js，检查该变量是否已设置，然后在 B 中执行必要的函数。 js（如果已加载）（如果 A.js 尚未加载，它会启动一个计时器，定期检查直到加载）。