注册异步JavaScript，声明性（静态）与动态 [英] Registering an async javascript, declarative (static) vs dynamic
问题描述
静态或动态地声明我的 async javascript有什么区别吗？
静态
< html> ;
< head>
...
< / head>
< body>
...
< div id ='my-script-needs-me'>< / div>
< script type =text / javascriptsrc =https://foo.bar/myscript.jsasync>
< / script>
...
< / body>
< / html>
动态
< HTML>
< head>
...
< / head>
< body>
...
< div id ='my-script-needs-me'>< / div>
< script type =text / javascript>
var myScript = document.createElement（script）;
myScript.src ='https://foo.bar/myscript.js';
myScript.async =！0;
myScript.type ='text / javascript';
document.getElementsByTagName（'head'）[0] .appendChild（myScript）;
< / script>
...
< / body>
< / html>
我注意到静态声明一个脚本让浏览器检测到它并预加载（chrome + firefox）。
我的目标是以 async 方式加载JavaScript，以免阻止HTML渲染和其他脚本执行。 Sametime，我希望它一下载就执行，记住它需要一个元素在DOM中。一旦下载完成，脚本就会执行并访问 my-script-needs-me div。一个限制，我不能改变脚本本身。
支持允许异步调用此异步的异步参数。 b
$ b
您描述的第二种方式允许您将url作为参数并绑定它。
当你的脚本被加载时，它也允许使用回调来做一些事情。
let scriptElement = document .createElement（ '脚本'）;
let url =`https://maps.googleapis.com/maps/api/js?key=${apiKey}`;//&libraries=geometry
scriptElement.src = url;
// API付费Google
scriptElement.onload =（）=> {
// APIchargée，peut lancer l'initialisation du composant
this._initializeMap（）;
};
我使用它来加载Google Maps API，它不直接在HTML中，所以我可以修改我的网页加载时的网址。当API加载时，我需要使用此API的启动治疗。
Is there any difference in declaring my async javascript statically vs dynamically?
static
<html>
<head>
...
</head>
<body>
...
<div id='my-script-needs-me'></div>
<script type="text/javascript" src="https://foo.bar/myscript.js" async>
</script>
...
</body>
</html>
dynamic
<html>
<head>
...
</head>
<body>
...
<div id='my-script-needs-me'></div>
<script type="text/javascript">
var myScript = document.createElement("script");
myScript.src = 'https://foo.bar/myscript.js';
myScript.async = !0;
myScript.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(myScript);
</script>
...
</body>
</html>
I noticed that declaring a script statically let a browser detect it earlier and preload (chrome + firefox).
My goal is to load a javascript in async way in order not to block HTML rendering and other scripts execution. Sametime, I want it to be executed as soon as it's downloaded, having in mind that it requires one element to be in the DOM already. Once downloaded the script is executed and it accesses the my-script-needs-me div. One limitation, I cannot change the script itself.
supports async parameters allowing to make this call asynchronous.
The second way you described allows you to have the url as a parameter and bind it. It allows too the use of a callback to do some stuff when your script is loaded.
let scriptElement = document.createElement('script');
let url = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;//&libraries=geometry
scriptElement.src = url;
//Chargement de l'API Google
scriptElement.onload = () => {
//API chargée, on peut lancer l'initialisation du composant
this._initializeMap();
};
I used this to load Google Maps API, it's not directly in the HTML, so i can modify the URL when my page loads. And when the API is loaded, I an launch treatments that need this API.
这篇关于注册异步JavaScript，声明性（静态）与动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
