延迟脚本和 DOM

Question

只有当 DOM 准备好时我才需要运行脚本，因为脚本会重写某些标签的某些属性。

目前我在DOMContentLoaded 上使用document.addEventListener，或者如果在onreadystatechange 上不可用document.attachEvent，如果两者都没有，我使用window.onload 功能。

我读到了 defer 标记应该在文档被解析之后执行的脚本。

• 这是否意味着通过设置defer 属性我可以在DOM 准备好时轻松执行我的脚本？
• 我可能会错过一些隐藏的东西吗？
• 对 Opera、WebKit、Firefox、IE 的支持情况如何？

编辑：我知道像 JQuery 这样的库，但我不能使用它们，因为我需要非常小的脚本，所以我需要一个低级解决方案。

Answer 1

defer 属性的正确实现将在 DOM 完成解析后自动运行脚本，因此脚本中的任何代码都不必在加载 DOM 时执行其自己的逻辑。你可以阅读this Mozilla article了解更多详情。

但是，并非所有旧版浏览器都支持defer 属性，因此您必须确定要支持的浏览器以及对于不支持延迟的浏览器的策略。您可以在this SO post 中阅读浏览器实现的历史。在 switcheroo 中，它首先在 IE 中实现，然后在 Firefox 中，然后在 Safari 和 Chrome 中。从那篇文章中的日期/版本来看，除了 Opera 之外，现在依赖它似乎很安全，但您必须深入了解该文章中的细节，以确保它符合您的要求。

下面的图表显示了浏览器对defer 的支持：http://caniuse.com/script-defer。

据我所知，与defer 的主要争议是多个defer 脚本是否按顺序执行（它们应该按顺序执行）以及它们如何与使用async 的脚本交互。标准和实施现在很清楚，但并非总是如此。但是，如果您只有一个独立的 defer 脚本，您只关心在解析 DOM 后执行，那么您应该是安全的。

Answer 2

如果您愿意使用 JQuery (http://jquery.com/)，那么您可以使用：

$(document).ready(
    function(){
    //do something here, the DOM is ready!
    }
);

详情请访问http://api.jquery.com/ready/

.ready 函数将在 DOM 准备好后加载，我相信（尽管我可能会弄错）JQuery 团队已经在很大程度上处理了您（或我）可能错过的任何事情。

虽然您可以在没有 JQuery 开销的情况下解决这个问题，但根据我的（新手）经验，不值得麻烦。此外，JQuery 还有很多其他漂亮的工具。 :)