注入的脚本会减慢Google Maps相关页面的速度

时间:2019-05-06 17:14:35

标签: javascript html angularjs

因此,我将一些html注入页面(以angular.js编写的扩展名),并在带有Google地图框架(如airbnb)的页面上加载速度减慢。所以我不知道我会如何影响。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

从第三方加载JavaScript时,应该异步进行。您可能还希望异步加载自己的脚本,但是在本文中,我们将重点放在第三方上。

有两个原因:

  1. 如果第三方崩溃或运行缓慢,则不会阻止您的页面 尝试加载该资源。
  2. 它可以加快页面加载速度。

在Wufoo,我们刚刚切换到异步嵌入代码段。现在建议使用Wufoo构建表单并将其嵌入到自己网站中的用户使用它。正是出于上述原因,我们才这样做。对于要求人们链接到该服务站点上的资源的Web服务,这是负责任的事情。

这里涉及一些术语,可以帮助我们理解总括的“异步”术语。

“解析器阻止” -浏览器读取您的HTML,当涉及到HTML时,它将下载整个资源,然后再继续解析。这无疑会减慢页面加载速度,尤其是在脚本位于头部或任何其他可视元素上方的情况下。如果您不使用async属性,则在较旧的浏览器和现代浏览器中都是如此(稍后会有更多介绍)。来自MDN文档:“在不支持async属性的旧版浏览器中,插入解析器的脚本会阻止解析器...”

为防止解析器阻塞,可以先“插入脚本”(即使用JavaScript插入另一个脚本),然后强制脚本异步执行(在Opera或4.0之前的Firefox中除外)。

“资源阻止” -在下载脚本时,它可以阻止其他资源同时下载。 IE 6和7可以做到这一点,一次只能下载一个脚本,而不能下载其他任何脚本。 IE 8和Safari 4允许并行下载多个脚本,但阻止任何其他资源(参考)。

理想情况下,我们要同时应对这两个问题,并提高页面加载速度(实际速度和感知速度)。

https://css-tricks.com/thinking-async/