Google Maps在异步加载和一般脚本标记之间存在差异 [英] Google Maps differences between async loading and general script tag

问题描述

为了尝试异步加载谷歌地图，我查看了谷歌的异步页面

基本上，我正在寻找API中document.write的替代方法，并根据此谷歌小组帖子使用异步版本将处理这种情况。

我的问题是为什么这个脚本：

 < script src = https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE
 type =text / javascript>< / script> 
  

与以下任何不同：

  var script = document.createElement（script）; 
 script.type =text / javascript; 
 script.src =https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize; 
 document.body.appendChild（script）; 
  

当第一个和第二个都调用同一个js文件时，它显然具有document.write吗？另外，为什么更新的API想要考虑使用document.write而不是appeat，如果写入通常违背内容安全策略？

作为一个小背景信息，我正在尝试Google的打包应用程序和它们的 csp 不允许document.write。

解决方案

加载脚本（或其他资源）异步/动态的主要优点是它可以显着加快您的页面加载时间。

来自Google的开发人员最佳做法：

https：//开发者.google.com / speed / docs / best-practices / rtt＃PreferAsyncResources

当浏览器解析传统脚本标记，它必须等待
脚本下载，解析并执行，然后再渲染
后面的任何HTML。但是，使用异步脚本，浏览器可以
继续解析并呈现异步脚本
之后的HTML，而无需等待该脚本完成。当一个脚本被异步加载
时，它会尽快被获取，但是它的执行
被延迟，直到浏览器的UI线程不忙于执行某些
else操作，例如渲染网页。

我用来决定是否异步加载脚本（例如Google Maps API）的另一个技巧是，我问自己：用户是否有机会看到，受益或与加载脚本的结果互动？。如果答案是肯定的，那么我通常会将脚本加载到一些DOM事件中（比如按钮点击等）。换句话说，如果一个用户必须点击我网页上的按钮才能查看我的Google地图;为什么打算加载所有额外的脚本，如果有机会，用户永远不会看到它？相反，单击按钮时异步加载脚本，然后加载我的地​​图。

In an attempt to load google maps asynchronously I took a look at google's async page

Essentially I am looking for an alternative to document.write in the API and according to some users on this google group post Using the async version will handle this scenario.

My question is why would this script:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"
type="text/javascript"></script>

Be any different than:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);

when the first and second both call the same js file which obviously has the document.write within it? Also why would an updated API want to consider using document.write over append if write generally goes against content security policy?

As a little background info I'm experimenting with Google's packaged apps and their csp doesn't allow for document.write.

解决方案

One of the main advantage of loading scripts (or other resources) asynchronously/dynamically is that it can dramatically speed up your page load times.

From Google's Developer best practices:

https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources

When a browser parses a traditional script tag, it must wait for the script to download, parse, and execute before rendering any HTML that comes after it. With an asynchronous script, however, the browser can continue parsing and rendering HTML that comes after the async script, without waiting for that script to complete. When a script is loaded asynchronously, it is fetched as soon as possible, but its execution is deferred until the browser's UI thread is not busy doing something else, such as rendering the web page.

Another trick I use to decide on whether or not to load a script (such as the Google Maps API) asynchronously is, I ask myself, "Is there a chance that the user will not see, benefit or interact with the results of the loaded script?". If the answer is yes, then I'll usually tie the loading of the script to some DOM event (such as button click etc).

In other words, if a user has to click a button on my web page to view my Google Map; why bother loading all that extra script if there's a chance the user will never even see it? Instead, load the script asynchronously when a button is clicked, and then load my map.

这篇关于Google Maps在异步加载和一般脚本标记之间存在差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！