javascript - 为什么将 defer 与 Google Maps Javascript 一起使用？

Question

Google map javascript 执行一些繁重的 DOM 操作。即便如此，the fine docs建议使用 defer 标志加载它:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

为什么要为执行 DOM 操作的脚本建议使用 defer 标志？ 我要求同时了解 defer 标志和 Google Maps API，因为我似乎对其中一个正在做的事情有误解。

Answer 1

通常，一个 script标记告诉浏览器停止解析 HTML，获取脚本，运行它，然后才继续解析 HTML。这是因为脚本代码可能使用 document.write输出到 HTML token 流。

async and defer 这两种机制都可以告诉浏览器可以继续并在下载脚本文件的同时继续解析 HTML，并稍后运行脚本文件，而不是立即运行。

虽然它们略有不同；此图来自 the script section WHAT-WG 版本的 HTML 规范对于设想差异很有用:

上面链接规范中的完整详细信息，但简而言之，对于“经典”脚本(您习惯的那种；但模块脚本即将推出!):

• 两者都是 async和 defer允许继续解析 HTML，而无需等待脚本下载。
• defer将使浏览器等待执行脚本，直到解析完成。
• async只会让浏览器等待脚本下载完成，这意味着它可能会在解析完成之前或之后运行脚本，具体取决于下载完成的时间(请记住它可能来自缓存)。
• 如果async存在并受浏览器支持，它优先于 defer .
• async脚本可以按任何顺序运行，无论它们在 HTML 中出现的顺序如何。
• defer解析完成后，脚本将按照它们在 HTML 中出现的顺序运行。
• async和 defer即使在半现代浏览器中也得到了很好的支持，但在 IE9 和更早版本中没有得到正确支持，请参阅 here和 here .

Why would the defer flag be suggested for a script that performs DOM manipulations?

两个原因:

1. 它允许在下载脚本时继续解析，并且
2. 这意味着脚本在解析完成之前不会运行。

如果你没有使用 defer然后你把你的script非最佳标记，使用 defer通过让浏览器在脚本尝试操作 DOM 之前完成构建 DOM，帮助 API 脚本正常运行。

很多人还是放script head 中的标签文档的一部分，即使那通常是放置它们的最糟糕的地方除非您使用defer (或 async )。在大多数情况下，最好的地方(除非你有理由做其他事情)是在最后结束，就在收盘之前</body>标记，以便 A) 您的网站可以快速呈现，无需等待脚本； B) 在您尝试操作 DOM 之前，DOM 已完全构建。推荐defer可能会帮助他们避免人们将他们的 script 放在支持上的麻烦标签在 HTML 中太早了。