如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
为了避免 javascript 阻止网页渲染，我们不能将所有要加载/执行的所有 JS 文件/代码放在结束 标记之前吗？< /strong>
所有的 JS 文件和代码只有在整个页面渲染完毕后才会被下载并执行，所以需要像这篇关于 非阻塞技术加载JS文件< /a>。他基本上建议使用如下代码：
document.getElementsByTagName("head")[0].appendChild(script);
以便推迟脚本 laod，同时让网页呈现，从而导致快速网页的渲染速度。
但是如果不使用这种类型的非阻塞技术（或其他类似的技术），我们只需将所有（要加载/执行的）JS 文件放在前面，难道就不能达到相同的非阻塞结果吗？结束 标记？
我更惊讶的是，因为作者（在同一篇文章中）建议将他的代码放在结束 标记之前（请参阅文章的“脚本放置”部分），所以无论如何，他基本上是在结束 标记之前加载脚本。那么他的代码有什么必要呢？
我很困惑，感谢任何帮助，谢谢！
更新
仅供参考 Google Analytics正在使用类似的非阻塞技术来加载他们的跟踪代码：
<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>
In order to avoid javascript to block webpage rendering, can't we just put all all our JS files/code to be loaded/executed simply before the closing </body> tag?
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.
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?
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!
UPDATE
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>
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论（3）
如果您想要异步脚本。
如果 (HTML5) 异步标记在您使用的浏览器中可用，请使用该标记。这就是 Google Analytics（分析）在您发布的代码中所做的事情（特别是行
ga.async = trueMDN 链接，向下滚动异步）。但是，这可能会导致您的脚本在页面加载期间的任意时间加载 - 这可能是不可取的。在选择使用异步之前，值得问自己以下问题。
不需要用户输入？然后使用 async 属性。
需要响应按钮或导航？然后您需要将它们放在页面顶部（头部）并且不使用异步标记。
异步脚本以任何顺序运行，因此如果您的脚本依赖于（例如）jQuery，并且 jQuery 加载到另一个标记中，则您的脚本可能会在 jQuery 脚本之前运行 - 从而导致错误。
为什么人们不把内容放在 body 标记的底部？如果脚本需要足够的时间来加载，从而减慢/暂停了网站的加载，那么它就是该脚本很可能会在网站加载后暂停/挂起网站（预计不同浏览器上会有不同的行为） - 使您的网站显得无响应（单击按钮但没有任何反应）。在大多数情况下，这并不理想，这就是发明异步属性的原因。
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 进行缩小和连接，它很容易运行和使用。
缩小减少了需要下载的数据量。
串联脚本减少了到服务器的“往返”次数（对于 200 毫秒 ping 的远程服务器，5 个请求需要 1 秒）。
If you want asynchonous scripts.
Use the (HTML5) async tag if it is availble in the browser you're in. This is what Google Analytics is doing in the code you posted (specifically the line
ga.async = trueMDN Link, scroll down for async).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.
Don't need user input? Then using the async attribute.
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.
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.
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.
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.
Concatenating scripts reduces the number of "round-trips" to the server (for a far away server with 200ms ping, 5 requests takes 1 second).
一般说不。即使脚本将在页面的所有内容之后加载，脚本的加载和执行也会阻塞页面。原因是脚本中可能存在写入命令。
但是，如果您想要实现的只是加载页面内容的速度，则将脚本标签放置在
标签之前的结果与动态创建脚本标签的结果相同。最显着的区别是，当您以常见的静态方式加载脚本时，它们是一一执行的，换句话说，没有并行执行脚本文件（在旧浏览器中下载脚本也是如此）。Generally saying no. Even if scripts will be loaded after all the content of the page, loading and executing of the scripts will block the page. The reason for that is possibility of presence of write commands in your scripts.
However if all you want to achieve is the speed of loading page contents, the result of placing script tags right before
</body>tag is the same as for creating script tags dynamically. The most significant difference is that when you load scripts in common static way they are executed one by one, in other words no parallel execution of script file (in old browsers the same true is for downloading of the script too).异步加载（尤其是分析代码片段之类的内容）的一个优点是，至少如果您将其放置在顶部，它将尽快加载，而无需花费任何时间来渲染页面。因此，通过分析，在用户离开页面之前（可能在页面完全加载之前）实际跟踪用户的机会将会更高。
并且使用 insertBefore 而不是append，因为如果我没记错的话，存在一个错误（我认为在某些 IE 版本中，另请参阅下面的链接，评论中有相关内容）。
对我来说这个链接：
异步 JS
是迄今为止我发现的最有用的。特别是因为它还带来了一个问题，即使使用谷歌分析代码，onload 事件仍然会被阻止（至少在某些浏览器中）。如果您不希望发生这种情况，最好将该函数附加到 onload 事件。
为了将异步代码片段放在底部，这实际上在您发布的链接中进行了解释。他似乎只是为了确保 DOM 完全加载而没有使用 onload 事件。因此，这可能取决于您的脚本正在做什么，如果您不操作 DOM，则没有理由将其添加到正文的底部。除此之外，我个人更喜欢将其添加到 onload-event 中。
One advantage of asynchronous loading (especially with something like the analytics snippet) is, at least if you would place it on the top, that it would be loaded as soon as possible without costing any time in rendering the page. So with analytics the chances to actually track a user before he leaves the page (maybe before the page was fully loaded) will be higher.
And the insertBefore is used instead of append, because if I remember correctly there was a bug (I think in some IE versions, see also link below theres something in the comments about that).
For me this link:
Async JS
was the most useful I found so far. Especially because it also brings up the issue, that even with googles analytic code the onload event will still be blocked (at least in some browsers). If you want this to not happen, better attach the function to the onload event.
For putting the asynchronous snippet on the bottom, that is actually explained in the link you posted. He seems to just do it to make sure that the DOM is completely loaded without using the onload event. So it may depend on what you're scripts are doing, if you're not manipulating the DOM there should be no reason for adding it on the bottom of body. Besides that, I personally would prefer adding it to the onload-event anyway.