当前位置: 首页 > 面试题库 >

脚本标签-异步和延迟

胡博艺
2023-03-14
问题内容

我有一对夫妇的有关属性的问题asyncdefer<script>标签,该标签在HTML5的浏览器我的理解只有工作。

我的一个网站有两个外部JavaScript文件,它们当前位于</body>标记上方;第一个是来自Google的jquery,第二个是本地外部脚本。

关于站点加载速度

  1. async在页面底部添加两个脚本是否有任何好处?

  2. async选项添加到两个脚本并将它们放在页面顶部的页面中,会有任何好处<head>吗?

  3. 这是否意味着它们会在页面加载时下载

  4. 我认为这会导致HTML4浏览器的延迟,但是会加快HTML5浏览器的页面加载速度吗?

使用 <script defer src=...

  1. <head>具有属性的两个脚本加载到内部 将defer具有与之前拥有脚本相同的影响</body>
  2. 我再次假设这会使HTML4浏览器变慢。

使用 <script async src=...

如果我async启用了两个脚本

  1. 他们会同时下载吗?
  2. 还是一次与其余页面一起?
  3. 脚本的顺序是否会成为问题?例如,一个脚本依赖于另一个脚本,因此,如果一个脚本下载速度更快,则第二个脚本可能无法正确执行等。

最后,在HTML5更常用之前,我最好还是保持现状吗?


问题答案:

保持脚本正确</body>。在某些情况下,异步可以与位于此处的脚本一起使用(请参见下面的讨论)。Defer不会对位于此处的脚本产生太大的影响,因为DOM解析工作几乎已经完成。

如果您将脚本放在正文的末尾,则HTML将在较早的浏览器中显示得更快</body>。因此,为了保持旧版浏览器的加载速度,您不想将它们放置在其他任何位置。

如果您的第二个脚本依赖于第一个脚本(例如,您的第二个脚本使用第一个脚本中加载的jQuery),那么在没有其他代码控制执行顺序的情况下就无法使它们异步,但是您可以使它们延迟,因为延迟脚本会仍然可以按顺序执行,只是直到文档被解析之后。如果您具有该代码,并且不需要立即运行脚本,则可以使它们异步或延迟。

您可以将脚本放入<head>标记中并将其设置defer为,脚本的加载将推迟到DOM被解析之前,并且将在支持defer的新浏览器中快速显示页面,但对您完全没有帮助。在较旧的浏览器中,它并没有比</body>在所有浏览器中都能正确使用脚本快得多。因此,您可以了解为什么最好将它们放在前面</body>

当您真的不在乎脚本何时加载,并且用户依赖的其他任何内容都不依赖于脚本加载时,异步会更有用。引用次数最多的使用异步的示例是Google
Analytics(分析)之类的分析脚本,您不需要等待任何东西,而且也不是迫切需要立即运行,而且它独立存在,因此没有其他依赖于此的脚本。

通常,jQuery库不是异步的理想选择,因为其他脚本依赖于它,并且您想安装事件处理程序,以便页面可以开始响应用户事件,并且您可能需要运行一些基于jQuery的初始化代码来建立初始状态。页面的
可以异步使用它,但必须对其他脚本进行编码才能在加载jQuery之前执行。



 类似资料:
  • 当考虑到下载后的脚本执行及其对页面性能的影响时,和的使用有何不同? 异步 在执行时阻止页面解析 一旦可用就立即执行 推迟 < li >在页面完成解析后执行 < li >在< code>DOMContentLoaded事件之前执行 < li >尊重脚本顺序 对我来说,的影响似乎较低,因为下载后的执行发生在页面解析之后,而脚本在下载后执行会阻止解析。但是为什么我经常看到和一起使用,后者只是后备?异步似

  • 本文向大家介绍浅谈原生JS中的延迟脚本和异步脚本,包括了浅谈原生JS中的延迟脚本和异步脚本的使用技巧和注意事项,需要的朋友参考一下 一、延迟脚本 defer HTML4.0中为<script> 标签添加了个defer属性。属性的用途是表民脚本在执行时不会影响页面的构造。 脚本会被延迟到页面加载完毕的时候,执行。也就是当浏览器解析到</html> 标签后才会执行代码。在HTML5规范中,defer属

  • 问题内容: 我正在使用JQuery的几个插件,自定义窗口小部件和其他一些库。结果,我有几个.js和.css文件。我需要为网站创建一个加载器,因为加载需要一些时间。如果可以在导入所有内容之前显示加载程序,那就太好了: 我找到了一些教程,这些教程使我能够异步导入JavaScript库。例如,我可以做类似的事情: 由于某种原因,当我对所有文件执行相同操作时,页面将无法正常工作。我已经尝试了很长时间,试图

  • 问题内容: javafx.scene.text.Text和javafx.scene.control.Label有什么区别? 该文档说: 标签是不可编辑的文本控件。 Text类定义一个显示文本的节点。 但是Label类具有方法“ setText”和“ textProperty”,因此是可编辑的。 问题答案: 正如Harry Blargle指出的那样,“不可编辑”是指“用户不可编辑”。因此,Label

  • null 但是Label类有一个方法“SetText”和“TextProperty”,因此是可编辑的。

  • 问题内容: 我遇到了一个场景,为元素赋予属性可以轻松解决问题。然而,阅读后在元素W3Schools的和怪异模式,似乎这样做可能有一些无法预见的后果。 有没有人遇到诸如Chrome,Safari,FF3 up和IE 7 up之类的浏览器中的任何这些问题? 问题答案: 在目前所有的浏览器中都可以。 唯一出错的浏览器是Netscape 4,很久很久以前我们就停止在乎它。 该quirksmode页面似乎已