javascript - 页面速度 - 简单地使用 defer 属性有什么问题吗？

Question

Google 建议“推迟”脚本，但他们没有提及 defer <script> 的属性标签。我想知道为什么他们甚至不提它，考虑到它已经存在了一段时间了。

相反，他们建议将脚本注入(inject) DOM。与使用更简单、更干净的方式相比，这样做有什么特别的好处吗defer属性？

https://developers.google.com/speed/docs/best-practices/payload?csw=1#DeferLoadingJS

我发现旧浏览器存在一些小问题，但我不支持 IE10 之前的任何内容，并且最感兴趣的是针对移动浏览器进行优化。

更新:有趣的是，如果您使用谷歌地图 API，则无法使用任何脚本加载技术。 map API 使用 document.write加载其他脚本，因此它不能在延迟或异步脚本中使用，也不能注入(inject)到 DOM 中，因为 document.write不会着火。如果 Google 遵循他们自己的建议，那就太好了!

Answer 1

您可以通过在现代浏览器上使用 async 属性来防止脚本在加载期间阻塞:

<script async
  src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=apiloaded">
</script>

defer 属性表示在页面 DOM 完全加载之前根本不加载。延迟意味着异步。

对于较旧的浏览器支持，您链接的页面速度代码是正确的。

使用 Google Maps API，异步加载 API 时必须使用回调参数。这会导致 api 使用动态脚本插入，而不是内部调用 document.write 。您也可以指定一个空的回调参数。

关于页面速度的说明

页面速度是帮助优化网站的出色工具。我列出了 async 属性，因为它允许并行下载 map api(非阻塞)。页面速度建议可能是减少加载时间的最常见方法，但它们绝对不是唯一的方法。

Optimizing map load times