草庐IT

javascript - 延迟属性(Chrome)

coder 2023-07-05 原文

对于我来说，Chrome一直是Web标准的引用，很遗憾，不支持defer，而IE从5.5版开始就支持它。为什么 ？

js.js 

document.getElementById ("hi").innerHTML = "Hi :)";

HTML 
<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <script defer="defer" src="js.js"></script>
        <title>Hi</title>
    </head>
    <body>
        <div id="hi"></div>
    </body>
</html>

最佳答案

defer和async是什么意思？
默认情况下， <script src=...></script>标签是邪恶的! 浏览器必须停止解析HTML，直到下载并执行脚本为止(因为脚本可能调用document.write(...)或定义以后脚本依赖的全局变量)。这意味着，在脚本标记完成下载和执行之后，脚本标记之后的所有图像和样式表都不会开始下载。外部脚本通常会使Web加载慢得多，这就是NoScript如此流行的原因。
微软推出了defer来解决该问题。如果使用<script defer src=...></script>，则 promise 不会调用document.write(...) 。 defer外部脚本将立即开始下载，但直到页面呈现后才会执行。页面呈现后，所有defer脚本均按照声明的顺序执行。并非所有浏览器都实现defer。
HTML5引入了async属性，该属性可以随时执行-可能在页面完成解析之前甚至在仍在下载的其他defer/async脚本之前执行。但是很难使用多个async脚本，因为不能保证它们的执行顺序。像defer一样，并非所有浏览器都实现async。
执行完所有defer和async脚本后，就会触发DOMContentLoaded和load事件。defer和async的简要历史

  • 1997 IE 4引入了defer。
  • 1998 HTML 4 spec mentions defer ，但是不幸的是，它并没有确切说明defer脚本何时执行(全部顺序？在onload之前？)。因此，没有其他浏览器实现defer，因为没有人希望对IE的行为进行逆向工程或破坏可能取决于IE的特性的脚本。 (例如，参见Mozilla feature request)。
  • 2006 HTML5草案最终描述了实现defer所需的详细信息:defer脚本应在解析页面的其余部分之后，在onload之前按顺序执行。它还引入了async来指定可以在每次下载脚本时执行的脚本，而不必彼此等待。不幸的是，HTML5通过不允许内联defer脚本与IE相矛盾。此打破了不变的，即所有defer脚本均按顺序执行(如果某些defer脚本具有src，而某些具有内联内容)。
  • 2009 Gecko 1.9.1(Firefox 3.5)supports defer 。
  • 2010-01 Gecko 1.9.2(Firefox 3.6)supports async 。
  • 2010-09 defer and async are checked into Webkit。您应该很快就会在Chrome和Safari中看到它(它已经存在于Chrome开发者 channel 中，但是有点bug)。
  • 我们仍在等待Opera实现defer和async以及IE实现async。

    • 那么，Web开发人员应该使用什么呢？
    目前没有可遵循的规则。您必须选择最能平衡访问网站的浏览器集的简单性，页面渲染延迟和脚本执行延迟的解决方案。
  • 正如其他人指出的那样，在脚本执行之前呈现页面的最简单方法是将脚本放在页面底部。但是，如果脚本是必不可少的，或者网页包含很多HTML，则应将脚本放在页面的上方。
  • 如果您的脚本是独立的，并且您的客户使用IE或新版本的Firefox，请使用<script async defer src=...></script>:这允许渲染与IE和最新HTML5浏览器的脚本下载并行进行，但会导致HTML5之前的浏览器(包括Opera的所有版本)封锁。
  • 如果一个外部脚本依赖于另一个脚本，则将它们都标记为defer(而不是async)，它们将按照声明的顺序执行(IE<=9 in certain conditions can execute them out of order除外)。同样，这允许渲染继续与IE和HTML5感知的Gecko/Webkit中的脚本下载并行进行，但是较旧的浏览器和Opera会受到影响。即使脚本位于页面底部，使用defer也是一个好主意，以便它们可以并行下载。
  • 切勿将defer用于内联脚本，因为HTML5草案已取消了执行顺序保证。
  • 如果您的听众包括许多Opera或旧的Firefox/Safari用户，则以下代码段将在大多数HTML5之前的浏览器(IE，Webkit，需要测试旧的Firefox)上解析文档后执行脚本，而最新的支持HTML5的浏览器立即开始下载，但由于async属性而不会阻止执行脚本。换句话说，大多数较旧的浏览器都将其视为页面底部的脚本，而最新的浏览器会识别async。但是Opera用户会遇到两全其美的情况，因为Opera立即开始执行并且不了解async。这是许多网页上的顽童的pattern recommended by Google Analytics。

    • 片段:
    <script>
(function() {
  var script = document.createElement('script');
  script.src = '...';
  script.async = true;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(script, s);
})();
</script>
  • 如果另一个脚本依赖于要加载的第一个脚本，则可以使用与上面相同的模式，但是在执行第二个脚本之前先听第一个脚本元素的onload事件。参见LABjs example for how to wait for another script to load。
  • 如果您具有依赖关系复杂的多个脚本，请使用LAB.js或YUI Loader使其并行下载并以某种有效顺序执行。
  • 如果您使用的是流行的库，例如jQuery，请考虑使用Google's copy而不是您自己的库，以增加浏览器已经对其进行缓存的可能性。

    • 更新:如果您将脚本分为多个模块并希望提高性能，则我建议Steve Souder甚至在“更快的网站”中“耦合异步脚本”一章。它包含提示/技巧，不仅可以控制执行顺序，还可以延迟脚本的解析，以提高性能。

    关于javascript - 延迟属性(Chrome)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3952009/

    javascriptChromecodedeferscriptgoogle-chromeattributes

    有关javascript - 延迟属性(Chrome)的更多相关文章

    1. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

      我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

    2. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

      我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

    3. ruby - 多个属性的 update_column 方法 - 2

      我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

    4. ruby - Nokogiri 剥离所有属性 - 2

      我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点？ 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者，如果您需要做一些更复杂的事情，有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

    5. ruby-on-rails - Rails 模型——非持久类成员或属性？ - 2

      对于Rails模型，是否可以/建议让一个类的成员不持久保存到数据库中？我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量，我想将值存储在一个“虚拟”类成员中，该成员只是将值传递回Controller。你能有这样的类(class)成员吗？ 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中，所有实例变量都是私有(private)的，不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs

    6. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

      所以这可能有点令人困惑，但请耐心等待。简而言之，我想遍历具有特定键值的所有属性，然后如果值不为空，则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

    7. ruby - 获取数组中的值并最小化某个类属性的最优雅的方法是什么？ - 2

      假设我有以下类(class):classPersondefinitialize(name,age)@name=name@age=ageenddefget_agereturn@ageendend我有一组Person对象。是否有一种简洁的、类似于Ruby的方法来获取最小(或最大)年龄的人？如何根据它对它们进行排序？ 最佳答案 这样做会:people_array.min_by(&:get_age)people_array.max_by(&:get_age)people_array.sort_by(&:get_age)

    8. ruby-on-rails - 为模型创建状态属性 - 2

      我想为我的Task模型创建一个status属性，该属性将按以下顺序指示它在三部分进度中的位置:打开=>进行中=>完成。它的工作方式类似于亚马逊包裹的交付方式:已订购=>已发货=>已交付。我想知道设置此属性的最佳方法是什么。我可能是错的，但创建三个独立的bool属性似乎有点多余。实现此目标的最佳方法是什么？ 最佳答案 Rails4有一个内置的enummacro.它使用单个整数列并映射到键列表。classOrderenumstatus:[:ordered,:shipped,:delivered]end状态映射如下:{ordered:0,

    9. ruby-on-rails - 在所有延迟的作业之前 Hook - 2

      是否可以在所有delayed_job任务之前运行一个方法？基本上，我们试图确保每个运行delayed_job的服务器都有我们代码的最新实例，所以我们想运行一个方法来在每个作业运行之前检查它。(我们已经有了“check”方法并在别处使用它。问题只是关于如何从delayed_job中调用它。) 最佳答案 现在有一种官方方法可以通过插件来做到这一点。这篇博文通过示例清楚地描述了如何执行此操作http://www.salsify.com/blog/delayed-jobs-callbacks-and-hooks-in-rails(本文中描述

    10. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

      我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

    随机推荐