延迟脚本和DOM [英] Deferred scripts and DOM

问题描述

我仅在DOM准备就绪时才需要运行脚本，因为脚本会对某些标记的某些属性进行一些重写.

I need to run script only when DOM is ready as script does some rewriting of certain attributes of certain tags.

当前，我在DOMContentLoaded上使用document.addEventListener，或者在onreadystatechange上使用document.attachEvent(如果不可用)，并且如果都未提供，我将使用window.onload功能.

Currently I use document.addEventListener on DOMContentLoaded or if not available document.attachEvent on onreadystatechange and if both not given I use window.onload functionality.

我了解了defer标记，该标记表示应在 文档解析后执行的脚本.

I read about defer tag for scripts that should be executed after document is parsed.

• 这是否意味着通过设置defer属性，我可以在DOM准备就绪时轻松地执行脚本?
• 有没有我可能会想念的隐藏东西?
• Opera，WebKit，Firefox，IE的支持程度如何?

• Does this mean that by setting defer attribute I can easily execute my script when DOM is ready?
• Is there some hidden stuff I may miss?
• How well is supported i.e. Opera, WebKit, Firefox, IE?

我知道像JQuery这样的库，但是由于需要很小的脚本，所以我不能使用它们，所以我需要一个低级的解决方案.

I'm aware of libraries like JQuery but I can't use them as I need very small script so I need a low level solution.

推荐答案

defer属性的正确实现将在DOM完成解析后自动运行脚本，因此脚本中的任何代码都不必自己执行加载DOM的逻辑.您可以阅读此Mozilla文章以了解更多详细信息.

A proper implementation of the defer attribute will automatically run the script after the DOM has finished parsing so any code in the script does not have to do it's own logic for when the DOM is loaded. You can read this Mozilla article for more details.

但是，并非所有较旧的浏览器都支持defer属性，因此您必须确定要支持的浏览器以及不支持延迟的浏览器的策略.您可以在这篇SO帖子中阅读浏览器实现的历史记录.在switcheroo中，它首先在IE中实现，然后在Firefox中实现，然后在Safari和Chrome中实现.从该帖子中的日期/版本来看，除了Opera之外，现在依靠它看起来很安全，但是您必须深入研究该帖子中的详细信息，以确保它满足您的要求.

However, the defer attribute is not supported in all older browsers so you have to decide what browsers you want to support and what your strategy is for any that don't support defer. You can read the history of browser implementation in this SO post. In a switcheroo, it was implemented first in IE, then in Firefox, then in Safari and Chrome. Judging by the dates/versions in that post, it looks like it's pretty safe to rely on it now except for Opera, but you'll have to dive into the details in that post to be sure it meets your requirements.

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

Here's a chart that shows browser support for defer: http://caniuse.com/script-defer.

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

As best I can tell, the main controversy with defer is whether multiple defer scripts execute in order or not (they are supposed to execute in order) and how they interact with scripts that use async. The standards and implementations are now clear, but were not always. But, if you just have one stand-alone defer script that you only care about executing after the DOM is parsed, you should be safe.

这篇关于延迟脚本和DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！