草庐IT

javascript - 异步 Javascript 程序如何交互

coder 2024-05-14 原文

回到网络开发的早期，我学到了一些民间智慧，对于像这样的代码

<script src=".../program1.js"></script>
<script src=".../program2.js"></script>

浏览器会暂停，加载 javascript，编译，执行，移动到下一个 script 标签，然后重复。通过这种方式，浏览器将处理页面上的所有 javascript，并将其视为一个线性程序。

然而，在崭新的现代 javascript 世界中，我们通过 async 属性进行异步加载

<script src=".../program1.js" async></script>
<script src=".../program2.js" async></script>

据我所知，这是一件好事，因为现在浏览器不需要暂停、下载脚本和执行它。相反，它开始下载脚本，但会继续解析 DOM。即网页在等待 javascript 下载时不再阻塞。 (如果这不是真的，我将不胜感激。)

然而，不太清楚(也更难测试)的是这两个程序如何交互。它们似乎在同一个共享空间中运行(即，从用户空间的 Angular 来看，javascript 仍然是具有两个(全局、函数)范围的单线程)。但是，在我阅读的文档中，它们执行的顺序似乎定义不明确。

我已经通读了关于 Concurrency model and Event Loop 的 MDN 文章.虽然有趣且有用，但它并不能完全回答我的问题。据我所知，当浏览器加载 program1.js 或 program2.js 时，javascript 将向事件队列添加一条消息，该消息将作为 javascript 处理引擎通过事件循环运行。

我缺少的是 - 该消息说了什么？每个程序都有一条消息说“编译并执行所有这些javascript代码”吗？还是每个程序都会创建多条消息——在我看来可能类似于

  • 消息 1:从该程序中提取所有函数并编译它们
  • 消息 2:从此程序中提取全局范围内的所有语句和表达式
  • 消息 3-n:将每个语句和表达式添加为单独的队列消息以供稍后处理。

当浏览器正在处理 program1.js 但完成下载 program2.js 时会发生什么？每个程序的语句执行是否可能交错进行？

我意识到，作为客户端开发人员，这里的最佳实践是不依赖于全局范围并编写每个程序和函数，因此它的调用方式无关紧要，并且不会阻止其他人的代码。但是，我花了很多时间处理其他人的代码，其中一些代码表现不佳。我想了解幕后发生的事情，或者这是否是未定义且独立于引擎的行为，并且不会在实现之间排队。

最佳答案

有两篇文章从实际意义上说明了“async”和“defer”属性(我对浏览器内部结构很陌生):

从 2014 年开始，具有优秀+简单的图形: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

从 2016 年开始，为什么异步可能是一种反模式: http://calendar.perfplanet.com/2016/prefer-defer-over-async/

异步

对于您的问题，“异步”指示浏览器执行的操作是:

  1. 尽早开始下载此资源。
  2. 继续并随时并行下载其他资源。
  3. 但是一旦我的下载完成，就停止渲染并尽早开始执行我。

实际上“异步”仍然可以阻止渲染和后续执行，但它允许解析器继续工作直到执行开始。

多个异步脚本无法保证它们的执行顺序。取决于加载的速度。这使得像 RequireJS 这样的 AMD 系统可以定义依赖项和回调以异步加载资源，但将它们的执行排队，直到“全局”环境包含所有先决条件并且可以协商执行顺序(通过 rune 魔法)。

延迟

Defer 的行为是这样的:

  1. 尽早开始下载此资源。
  2. 继续并随时并行下载其他资源。
  3. 但是一旦我的下载完成，在解析器完成之前什么都不做。
  4. 现在按照它们被发现的顺序执行所有脚本。

一方面，“延迟”更快，因为它永远不会阻塞解析器或渲染。但是“延迟”可能会更慢，因为它必须等到管道畅通后才能执行。

听起来“异步”总是更好，但是如果您在具有快速连接的弱 CPU 手机上加载 2 MB 的 JS，您可能最终需要等待 10 秒才能执行，然后允许解析器完成渲染。使用“延迟”可以防止这种情况发生，但代价是您的交互层被延迟。

如果您谈论的是客户端/服务器或客户端应用程序，则区别会更加模糊。在后端繁重的应用程序(例如在服务器端处理渲染的 Magento)中使用 defer 可能更有益。

在完全客户端的应用程序中，在加载 JS 单体之前，您可能获得零内容，因此“延迟”实际上不会为您做任何事情，但如果您的整个应用程序是一个巨大的 JS，那么“异步”也不会捆绑在一起，没有什么可并行进行的。

关于javascript - 异步 Javascript 程序如何交互，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41170128/

javascriptcodescript

有关javascript - 异步 Javascript 程序如何交互的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  4. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  5. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  6. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

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

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

  8. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  9. 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中编写命令行实用程序

  10. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

随机推荐