如果我在正文标签的末尾放置脚本标签,我是否应该等待 DOMContentLoaded 事件

Should I wait for DOMContentLoaded event if I place a script tag at the end of a body tag

本文关键字:标签 是否 等待 DOMContentLoaded 脚本 事件 正文 如果      更新时间:2023-09-26

如果我在body标签的末尾放置一个带有相应 JS 文件的 script 标签,我应该等待DOMContentLoaded事件吗?

索引.html

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="popup.css">
  </head>
  <body>
    <div id="container"></div>
    <script src="popup.js"></script>
  </body>
</html>

弹出窗口.js

document.addEventListener('DOMContentLoaded', onDOMContentLoaded);

基本上没有。如果脚本修改元素,它需要存在。
如果将脚本放在该元素之后,则它存在。
如果将其放在 Before,则它不存在,您可能希望使用 DOMContentLoaded 来等待脚本执行,直到确定它存在。

<div id="myid"></div>
<script>
    getElementById('myid'); // it will work, Element myid Is defined
<script>

但是这个

<script>
    getElementById('myid'); // it will fail, it's not yet defined, it will be
    // Using DomContentLoaded here would be requrired
<script>
<div id="myid"></div>

<script></script>标签用于允许在代码中使用客户端脚本。当浏览器获取HTML代码时,它首先下载所有脚本。如果它们不是动态加载的,例如标记为延迟或异步,它们将按顺序加载。内联脚本在首先加载外部脚本后加载。在异步模式下加载脚本时没有完美的顺序。