页面速度 - 仅使用 defer 属性的任何问题

Page speed - any problems with simply using defer attribute?

本文关键字：属性 defer 任何 问题 速度      更新时间：2023-09-26

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

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

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

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

更新：作为一个有趣的说明，事实证明，如果您使用的是谷歌地图API，则无法使用任何脚本加载技术。maps API 使用 document.write 来加载其他脚本，因此它不能在延迟或异步脚本中使用，也不能注入到 DOM 中，因为document.write不会触发。如果谷歌遵循他们自己的建议，那就太好了！

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

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

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

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

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

关于页面速度的说明

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

优化地图加载时间

相关文章：