Question

我有一个剪切，放在任何网站内，位于文档中间，就像在文章中间，而不是在<head>内。此脚本通过附加<script>标记在我的域上加载外部脚本（非常类似于Google Analytics分析代码）。

我的问题是，如果该脚本放在正文中，DOM是否尚未被解析，那么我可以安全地假设我可以在评估脚本时操作DOM而无需等待DOMReady事件？

我问，因为我的脚本开始执行时以及DOMReady事件触发时有很大的延迟（参见棕色条）。我正在使用这个DOMReady implementation

主机网站

<html>

<head>
  ...
</head>

<body>
  Website content
  ...
  <div>
    
  <!-- Snippet -->
  <div id="myContainer"></div> <!------(I should be able to query this div) -->
  <script type="text/javascript">
    function() {
      var ga = document.createElement('script');
      ga.type = 'text/javascript';
      ga.async = true;
      ga.src = 'http://example.com/script.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga, s);
    })();
  </script>
  <!-- Snippet End -->
  
  <div>
  More content
  ...
</body>
</html>

example.com / script.js

(function(){
    //by this time div#myContainer should exist, right?
    var div = document.getElementById('myContainer');
    div.innerHTML = "Hello World!";
})();

一些注意事项：

我无法控制主页，它可以包含任何内容。
支持旧浏览器是一个问题。
我应该能够尽快添加内容，我不能等待其他库和图像完成加载。
每次都应该可靠的工作。

Answer 1

是的，没错。如果正文底部有一个脚本标记，那么在脚本运行之前，所有内容都会在此之前呈现。

W3Schools有一篇关于这个主题的好文章。

<head>

中的脚本

调用它们或触发事件时要执行的脚本放在函数中。     将您的功能放在head部分，这样它们就在一个地方，并且它们不会干扰页面内容。

<body>

中的脚本

如果您不希望将脚本放在函数中，或者您的脚本应该编写页面内容，则应将其放在正文部分中。

在正文树中执行脚本时DOM是否准备好了？

1 个答案: