jjzjj

javascript - 应该添加动态脚本命令？

coder 2025-01-14 原文

我正在添加一些 <script>页面加载后动态标记到 head 元素。我知道脚本是异步加载的，但我可以期望它们按照添加的顺序进行解析吗？

我在 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>

但是从资源加载 View 来看，chrome 似乎会解析首先从服务器返回的那个，而 firebug 总是按照添加脚本标签的顺序加载它们，即使 B 首先从服务器返回也是如此。

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

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

编辑(2010 年 11 月 5 日):好的，所以我按照下面 juandopazo 的说法整理了一个测试。但是我添加了一些东西的组合，包括

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

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

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

首先要注意的是，只有上面的第一种和第三种方法是并行操作的——第二种方法是顺序执行请求。您可以在此处查看图表 -

图 1 - 请求生命周期图
Request lifecycle Graph 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 测试版结果
Chrome Results http://dyn-script-load.appspot.com/images/chromeDynScript.png

Firefox 结果

然而，在 firefox 上，如果使用第一种方法，并且 async 为 false(即未设置)，那么脚本将可靠地按顺序执行。

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

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

此外，我在慢速脚本上只有 500 毫秒的延迟，只是为了缩短开始-> 完成时间。您可能需要刷新几次才能看到 Chrome 和 Safari 无法正常运行。

在我看来，如果没有这样做的方法，我们就没有利用并行检索数据的能力，而且我们没有理由不这样做(如 firefox 所示)。

最佳答案

很抱歉回答我自己的问题，但已经有一段时间了，我们确实想出了一个解决方案。我们想到的是将 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);
}

关于javascript - 应该添加动态脚本命令？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2804212/

javascript应该scriptdyn-script-loadChromedynamic-script-loading

有关javascript - 应该添加动态脚本命令？的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  2. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  3. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  4. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  5. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  6. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  7. ruby-on-rails - 独立 ruby​​ 脚本的配置文件 - 2

    我有一个在Linux服务器上运行的ruby​​脚本。它不使用rails或任何东西。它基本上是一个命令行ruby​​脚本，可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中？您能否举例说明如何做到这一点？提前谢谢你。 最佳答案 首先，您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后，在您的应用中阅读它:require"yaml"arg

  8. ruby - 可以通过多少种方法将方法添加到 ruby​​ 对象？ - 2

    当谈到运行时自省(introspection)和动态代码生成时，我认为ruby​​没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby​​的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资

  9. ruby - 如何在 Ruby 中向现有方法定义添加语句 - 2

    我注意到类定义，如果我打开classMyClass，并在不覆盖的情况下添加一些东西我仍然得到了之前定义的原始方法。添加的新语句扩充了现有语句。但是对于方法定义，我仍然想要与类定义相同的行为，但是当我打开defmy_method时似乎,def中的现有语句和end被覆盖了，我需要重写一遍。那么有什么方法可以使方法定义的行为与定义相同，类似于super，但不一定是子类？ 最佳答案 我想您正在寻找alias_method:classAalias_method:old_func,:funcdeffuncold_func#similartoca

  10. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

随机推荐