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

【问题标题】：Page speed - any problems with simply using defer attribute?页面速度 - 简单地使用 defer 属性有什么问题吗？
【发布时间】：2013-11-16 09:21:28
【问题描述】：

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

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

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

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

更新： 有趣的是，如果您使用的是 google maps API，那么您将无法使用任何脚本加载技术。地图 API 使用 document.write 加载其他脚本，因此它不能用于延迟或异步脚本，也不能注入 DOM，因为 document.write 不会触发。如果 Google 遵循他们自己的建议，那就太好了！

【问题讨论】：

标签： javascript google-maps-api-3 dynamic-script-loading deferred-loading

【解决方案1】：

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

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

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

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

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

关于页面速度的说明

页面速度是帮助优化网站的绝佳工具。我列出了async 属性，因为它允许并行下载地图API（非阻塞）。页面速度建议可能是减少加载时间的最常用方法，但绝对不是唯一方法。

Optimizing map load times

【讨论】：

感谢您对我问题的谷歌地图部分的回答。我会检查的！我指的是 defer 属性而不是 async 属性，所以这只回答了我的一半问题。很抱歉把它变成了一个两部分的问题！（不确定现在是否接受答案！;）
我在答案中添加了 defer 与 asynch 信息。大多数用途使async 更有价值，但defer 也有极少数情况。
defer 脚本按顺序执行，非异步执行。