页面速度 - 简单使用defer属性的任何问题？ [英] Page speed - any problems with simply using defer attribute?

问题描述

Google建议脚本应该延迟，但是他们没有提及< script> defer 属性c>标签。我想知道为什么他们甚至没有提到它，因为它已经有一段时间了。

相反，他们建议将脚本注入到DOM中。使用更简单更清洁的 defer 属性有没有什么特别的好处？

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

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

$ b

更新：
作为一个有趣的笔记，事实证明，如果您使用的是Google Maps API，则不能使用任何脚本加载技术。 maps API使用 document.write 来加载其他脚本，因此它不能用于延迟脚本或异步脚本，也不能注入到DOM中，因为 document.write 不会触发。如果Google遵循他们自己的建议，这将是一件好事！

解决方案

您可以通过使用<$现代浏览器上的c $ c> async 属性：

 <脚本异步
 src = https://maps.googleapis.com/maps/api/js?sensor=false&callback=apiloaded > 
< / script> 
  

defer 属性指示不加载直到页面DOM完全加载。推迟意味着异步。

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

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

关于Page Speed的注释

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

优化地图加载时间

Google recommends scripts should be "deferred", but they do not mention the defer attribute of the <script> tag. I wonder why they don't even mention it, considering it has been around a while.

Instead they suggest injecting scripts into the DOM. Is there any particular benefit of this over using the much simpler and cleaner defer attribute?

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

I gather there are some minor issues with old browsers but I am not supporting anything before IE10 and mostly interested in optimising for mobile browsers.

UPDATE: As an interesting note it turns out you can't use any script loading technique if you are using google maps API. The maps API uses document.write to load other scripts, so it cannot be used in a deferred or async script and it cannot be injected into the DOM either, because the document.write will not fire. It would be nice if Google followed their own recommendations!

解决方案

You can prevent a script from blocking during load by using the async attribute on modern browsers:

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

The defer attribute indicates not to load at all until the page DOM has completely loaded. Defer implies async.

For older browser support, the page speed code you linked is correct.

With the Google Maps API, you must use a callback parameter when loading the API asynchronously. This causes the api to use dynamic script insertion rather than document.write calls internally. You can specify an empty callback parameter as well.

A note on Page Speed

Page speed is an excellent tool to help optimize a web site. I listed the async attribute because it allows the maps api to be downloaded in parallel (non-blocking). Page speed recommendations may show the most common way to decrease load times, but they are definitely not the only way.

Optimizing map load times

这篇关于页面速度 - 简单使用defer属性的任何问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！