javascript - 异步加载和将脚本放在主体末尾之间的区别/优势

Question

谁能告诉我将下一个脚本标记放在 元素之后和将它放在 元素之前有什么好处？

<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>

Answer 1

2017 编辑

这个答案已经完全过时了。随着现代浏览器中的 http2 和我们堆栈中的模块 bundler ，方向越来越倾向于拥有小的 bundle 。仅在需要时加载的 block 。在移动时代更重要。

旧答案

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

此外，我会坚持将脚本放在 html 正文的末尾，因为即使尚未加载 javascript，也会呈现和显示 html。

带有 async 的脚本标签在每个浏览器中的行为很可能不同(因为它是一个相当新的特性)，而将脚本放在主体的末尾应该在每个主要浏览器中产生相同的结果浏览器。

这是一篇关于 JavaScript 异步加载的文章:Thinking Async