jQuery-JavaScript:DOM加载事件,执行序列和$(document).ready()

我只是意识到,我不具备将页面加载到浏览器中时会发生什么的基本知识。

假设我有一个这样的结构:

<head>

<script src="jquery.js" type="text/javascript"></script>
<script src="first.js" type="text/javascript"></script>
</head>
<body>
...
<script type="text/javascript" id="middle">
    // some more JS here...
</script>
...
<script src="last.js" type="text/javascript"></script>
</body>

这是我的问题:

  1. 事情按什么顺序发生? 首先是DOM,然后执行JS,反之亦然,或者它是同时执行的(或者在JS文件下载完成后,不考虑DOM)? 我知道脚本是按顺序加载的。

  2. $(document).ready()放在哪里? 在Firebug的“网络”选项卡中,我看到$(document).ready()事件和last.js事件。 DOMContentLoaded事件触发时会触发first.js吗? 找不到关于此的任何具体信息(每个人都只提到“ DOM加载时”)。

  3. “加载DOM时”到底是什么意思? 浏览器已经下载并解析了所有HTML / JS吗? 还是只是HTML?

  4. 是否可能出现以下情况:有一个$(document).ready(),它调用last.js中的代码,但在last.js加载之前运行? 它最有可能在哪里(在first.js或内联代码块中)? 如何防止这种情况?

我想了解什么时候发生什么以及什么取决于什么(如果有的话)的总体情况。

montrealist asked 2019-10-08T20:23:22Z
3个解决方案
36 votes

如所见,JavaScript被执行。 通常,浏览器在看到DOMContentLoaded标记后立即停止解析页面,下载并运行该脚本,然后继续运行。 这就是为什么通常建议在底部放置DOMContentLoaded标记的原因:因此,浏览器等待脚本下载时,用户没有空白页。

但是,从Firefox 3.5开始,脚本将在后台下载,而其余页面将呈现。 如果脚本使用DOMContentLoaded或类似的异常事件,则Firefox将备份并根据需要重新绘制。 我目前不认为其他浏览器会这样做,但是如果即将推出,我也不会感到惊讶,IE至少在ready()标记中支持DOMContentLoaded属性,该属性将延迟加载脚本,直到页面加载完毕。

DOMContentLoaded就是这样:DOM加载后立即触发。 也就是说,浏览器一旦解析了所有HTML并在内部创建了它的树。 它不等待图像,CSS等加载。 DOM是运行所需Javascript通常所需的全部内容,因此不必等待其他资源就很好。 但是,我相信只有Firefox支持DOMContentLoaded; 在其他浏览器中,ready()只会将事件附加到常规的onload上。

保证Javascript会按在HTML中显示的顺序运行,因此,在尝试将其附加到事件之前,请确保已定义函数。

Eevee answered 2019-10-08T20:23:57Z
6 votes
  1. 所有脚本都按顺序出现在HTML中,并在解析HTML时加载。
  2. 这意味着所有dom对象均已加载,并且都包含脚本和css。 (图像可能还没有)。
  3. 见2。
  4. $(document).ready()仅在所有脚本和dom对象加载后才被调用,您应该可以。
Zoidberg answered 2019-10-08T20:24:41Z
4 votes

[http://javascript.about.com/od/hintsandtips/a/exeorder.htm]应该可以帮助您回答

基本上:首先加载所有数据(html),然后加载js头部/身体中未处于功能或就绪状态或类似状态的代码将首先执行。 从那里开始依次处理脚本

重要的是要注意js优先于ie。 CSS加载-因此,从性能角度考虑,您应该在页面底部放置js。

@ 4:您不需要阻止该方案,因为first.js总是在last.js之前被读取/执行。

Niko answered 2019-10-08T20:25:27Z
translate from https://stackoverflow.com:/questions/1307929/javascript-dom-load-events-execution-sequence-and-document-ready