为什么要使用Google Maps Javascript推迟？

Question

Google Maps javascript会执行一些繁重的DOM操作.即便如此,优秀的文档建议加载defer旗帜:

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

为什么会defer为执行DOM操作的脚本建议标志？我要求了解有关defer旗帜的信息,并了解Google Maps API,因为我似乎对其中的一个做了什么有误解.

Answer 1

通常,script标记告诉浏览器停止解析HTML,获取脚本,运行它,然后继续解析HTML.这是因为脚本代码可能用于document.write输出到HTML令牌流.

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

但他们略有不同; 从该图的script部分的HTML规范的WHAT-WG版本是设想的差异有用:

上面链接规范的完整细节,但简而言之,对于"经典"脚本(您习惯的那种;但模块脚本即将推出!):

• 双方async并defer允许HTML的解析,继续无需等待脚本下载.
• defer 将使浏览器等待执行脚本,直到解析完成.
• async 只会使浏览器等到脚本下载完成,这意味着它可以在解析完成之前或之后运行脚本,具体取决于下载完成时(并记住它可能来自缓存).
• 如果async浏览器存在并支持,则优先于defer.
• async 脚本可以按任何顺序运行,无论它们在HTML中出现的顺序如何.
• defer 解析完成后,脚本将按照它们在HTML中出现的顺序运行.
• async和defer被很好的支持甚至半现代的浏览器,但不是在IE9正确和更早版本支持,看到这里和这里.

为什么会defer为执行DOM操作的脚本建议标志？

两个原因:

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

如果您没有使用defer并且您以script非最佳方式放置了标记,则defer在脚本尝试操作之前让浏览器完成构建DOM ,以帮助API脚本正常运行.

很多人仍然在文档script的head部分放置标签,即使这通常是放置它们的最糟糕的地方,除非你使用defer(或async).在大多数情况下,最好的地方(除非你有理由做其他事情)是在最后,就在结束</body>标记之前,以便A)你的网站快速呈现,而不需要等待脚本; 和B)在您尝试操作它之前完全构建DOM.推荐defer可能是因为人们script在HTML中过早放置标签而避免支持麻烦.