Javascript非阻塞脚本，为什么不简单地将所有脚本放在< / body>之前标签？ [英] Javascript non-blocking scripts, why don't simply put all scripts before </body> tag?
问题描述
为了避免javascript阻止网页呈现，我们不能简单地在结束< / body> <之前加载/执行所有JS文件/代码/ code> tag？
所有JS文件和代码只有在渲染完所有页面后才会下载和执行，所以需要什么对于像本文中建议的关于 加载JS文件的非阻塞技术 。他基本上建议使用以下代码：
All JS files and code would be downloaded and executed only after the all page has being rendered, so what's the need for tricks like the one suggested in this article about non blocking techniques to load JS files. He basically suggests to use code like:
document.getElementsByTagName（head）[0] .appendChild（script）;
为了在渲染网页的同时推迟脚本，从而提高了网页的渲染速度。
in order to defer script laod while letting the webpage to be rendered, thus resulting in fast rendering speed of the webpage.
但不使用这种类型的非阻塞技术（或其他类似技术），我们不会通过简单地放置所有JS文件来实现相同的非阻塞结果（在结束< / body> 标签之前加载/执行？
But without using this type of non-blocking technique (or other similar techniques), wouldn't we achieve the same non-blocking result by simply placing all our JS files (to be loaded/executed) before the closing </body> tag?
我更惊讶因为作者（在同一篇文章中）建议将他的代码放在结束< / body> 标签之前（参见文章的脚本放置部分），所以他基本上是在结束< / body> 标签之前加载脚本。他的代码需要什么呢？
I'm even more surprised because the author (in the same article) suggests to put his code before the closing </body> tag (see the "Script placement" section of the article), so he is basically loading the scripts before the closing </body> tag anyway. What's the need for his code then?
我很困惑，任何帮助表示赞赏，谢谢！
I'm confused, any help appreciated, thanks!
更新
仅供参考我们Google Analytics正在使用类似的非阻止技术加载其跟踪代码：
FYI Google Analytics is using similar non-blocking technique to load their tracking code:
<script type="text/javascript">
...
(function()
{
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'your-script-name-here.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s); //why do they insert it before the 1st script instead of appending to body/head could be the hint for another question.
})();
</script>
</head>
推荐答案
如果你想要asynchonous脚本。
如果您所使用的浏览器中有（HTML5）异步标记，请使用该标记。这就是Google Analytics在您发布的代码中所做的事情（特别是行 ga.async = true MDN Link，向下滚动以查看异步）。
但是，这可能导致您的脚本在页面加载期间的任意时间加载 - 这可能是不合需要的。在选择使用异步之前，有必要问自己以下问题。
However, this can cause your script to load at arbitrary times during the page load - which might be undesirable. It's worth asking yourself the following questions before choosing to use async.
不需要用户输入？然后使用async属性。
Don't need user input? Then using the async attribute.
需要回复按钮或导航吗？然后你需要将它们放在页面顶部（头部）而不是使用async标签。
Need to respond to buttons or navigation? Then you need to put them at the top of the page (in head) and not use the async tag.
异步脚本以任何顺序运行，因此如果您的脚本依赖于（例如）jQuery，并且jQuery被加载到另一个标记中，那么您的脚本可能会在jQuery之前运行脚本确实 - 导致错误。
Async scripts run in any order, so if your script is depending on (say) jQuery, and jQuery is loaded in another tag, your script might run before the jQuery script does - resulting in errors.
为什么不人们放身体标签底部的东西？如果脚本花了足够的时间加载它会减慢/暂停网站的负载，那么该脚本很可能会在网站后暂停/挂起网站已加载（期望在不同的浏览器上有不同的行为） - 使您的网站看起来没有响应（点击按钮，没有任何反应S）。在大多数的情况下，这并不理想，这就是async属性被发明的原因。
Why don't people put things at the bottom of the body tag? If the script is taking enough time to load that it's slowing/pausing the load of the website, it's quite possible that that script is going to pause/hang the website after the website has loaded (expect different behaviour on different browsers) - making your website appear unresponsive (click on a button and nothing happens). In most cases this is not ideal, which is why the async attribute was invented.
或者如果你的话脚本需要很长时间才能加载 - 您可能希望（经过测试）缩小并连接您的脚本，然后再将其发送到服务器。
Alternatively if your script is taking a long time to load - you might want to (after testing) minify and concatenate your script before sending it up to the server.
我建议使用 require.js 进行缩小和连接，这是易于运行和使用。
I recommend using require.js for minifying and concatenation, it's easy to get running and to use.
缩小可减少需要下载的数据量。
Minifying reduces the amount of data that needs to be downloaded.
连接脚本减少了到服务器的往返次数（对于远程服务器，200毫秒ping，5个请求需要1秒）。
Concatenating scripts reduces the number of "round-trips" to the server (for a far away server with 200ms ping, 5 requests takes 1 second).
这篇关于Javascript非阻塞脚本，为什么不简单地将所有脚本放在< / body>之前标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
