admin 管理员组

文章数量: 1086019

I need to load a script asynchronously onto a page. I am using the createElement method to dynamically insert a script tag in the head. What is happening is First the page source loads. When this finishes, all the elements included in the head loads in parallel. Once this is all loaded, the script which I dynamically add loads.

This logically makes sense, but what I am looking for is a way where I can accelerate the loading of my dynamic script. I still want it to be asynchronous (don't want to do document.write) but still would love if this script could be loaded in parallel with other scripts of the head element. Any way I can get this working?

I need to load a script asynchronously onto a page. I am using the createElement method to dynamically insert a script tag in the head. What is happening is First the page source loads. When this finishes, all the elements included in the head loads in parallel. Once this is all loaded, the script which I dynamically add loads.

This logically makes sense, but what I am looking for is a way where I can accelerate the loading of my dynamic script. I still want it to be asynchronous (don't want to do document.write) but still would love if this script could be loaded in parallel with other scripts of the head element. Any way I can get this working?

  • javascript
  • html
  • dom-events
Share Improve this question edited Aug 17, 2022 at 19:41 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jul 13, 2011 at 17:55 Sparsh GuptaSparsh Gupta 2,2335 gold badges20 silver badges21 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

Put a few lines of javascript at the top creating the dynamic script tag. 

<script>
var script = document.createElement("script");
    script.src = "yourfile.js";
    script.async = true; //asynchronous
    document.getElementsByTagName("head")[0].appendChild(script);
</script>

For other alternatives check out this link: http://friendlybit./js/lazy-loading-asyncronous-javascript/

You can add the attribute async to the script element if you use HTML5. This is the simplest method, wherever you load (but not the most patible). Just to be clear, even the code provided above will only work if you are working with HTML5. The thing is, you don't have to go through all that trouble of adding such a script at all in the first place.

<script src="/path/to/your/js/here" async></script>

Also note that XHTML does not allow attribute minimisation, so in XHTML you have to use

<script src="/path/to/your/js/here" async="async"></script>

Also, you have a defer attribute which defers parsing of javascript until the document has loaded, which can also be used as defer="defer" thse same way I have shown an example script inclusion using async. Both async and defer tags can be used in the same script element.

Also note that these attributes can only be added to an off-document script and not an inline script, which means you can't use async and defer if you don't use the src attribute.

Hope that helps! :)

本文标签： javascriptAsync JS loading in headStack Overflow

版权声明：本文标题：javascript - Async JS loading in head - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744044862a2523931.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。