异步加载和将脚本放在正文末尾之间的区别/优势

Differences/Advantages between async loading and putting script at the end of body

本文关键字：之间 区别 优势 正文 加载 脚本 异步      更新时间：2023-09-26

有人能告诉我把下一个脚本标记放在<body>元素，并将其放在<身体>元素？

<script>
(function (){
var script = document.createElement("script");
script.async = true;
script.type = "text/javascript";
script.src = "foo.js";
document.getElementsByTagName("head")[0].appendChild(script);}
());
</script>

2017编辑

这个答案完全过时了。随着http2在现代浏览器中的出现和模块捆绑器在我们的堆栈中的出现，拥有小捆绑包的方向越来越大。仅在需要时加载的块。在移动时代更为重要。

老答案

最佳解决方案是一个单独的javascript文件，其中包含当前页面所需的所有内容。只有一个请求意味着更好的性能。对于生产，可以压缩单个文件，这比压缩多个文件要好。

此外，我会坚持把脚本放在html主体的末尾，因为即使javascript还没有加载，html也会被渲染和显示。

带有async的脚本标记在每个浏览器中的行为很可能会有所不同（因为这是一个全新的功能），而将脚本放在主体的末尾在每个主要浏览器中都会产生相同的结果。

以下是JavaScript异步加载的一篇文章：Thinking async

相关文章：