页面底部的JavaScript？ [英] JavaScript on the bottom of the page?
问题描述
我读过最好将所有JavaScript文件保留在网页底部。 HTML5 Boilerplate模板似乎同意： http://html5boilerplate.com/
似乎被广泛使用。
我的问题是：首先，这是否有任何实际依据？我已经完成了Firebug的测试，它似乎有一些小的影响，但它是微不足道的？在加载CSS文件和脚本文件之前，图像和其他来源似乎不会开始加载，但将它们粘贴在底部似乎没有多大区别。
当你有脚本加载时在你的头部，他们停止发生其他下载！这包括您的样式，并且也会停止下载图像直到脚本完成。
这是因为JavaScript文件同步加载。
另外请注意，如果您在加载过程中，您将在加载过程中获得无风格内容（FOUT）的闪现 不要将您的JavaScript文件移动到页面底部。这是因为在脚本完成加载之前，您的CSS不会下载。
以下是雅虎性能规则6的摘录。
由脚本引起的第二个问题是阻止并行下载。 HTTP / 1.1规范建议浏览器每个主机名并行下载至少两个组件。如果您从多个主机名提供图像，则可以同时发生两个以上的下载。 （我已经让Internet Explorer同时下载了100多个图像）。然而，当脚本正在下载时，浏览器将不会启动任何其他下载，即使是在不同的主机名下。
参考资料
http://developer.yahoo.com/performance/rules.html/
特别注意规则6 。
I've read that it is better to keep all of your JavaScript files on the bottom of the webpage. The HTML5 Boilerplate template seems to agree: http://html5boilerplate.com/
And seems to be widely used.
My question is: first, does this have any real basis? I've done testing in Firebug and it seems to have some small effect, but is it trivial? Images and other sources don't seem to start loading until CSS files and script files have loaded, but sticking them on the bottom doesn't seem to make much difference in this at all.
It is very important for best practice reasons.
When you have scripts loading in your header, they stop other downloads from taking place! This includes your styling, and will also stop your images from downloading until the script has finished.
This is because JavaScript files load synchronously.
Also note that you will get a flash of unstyled content (FOUT) during loading if you do not move your JavaScript files to the bottom of your page. This is because your CSS will not download until the script has finished loading.
Here is an excerpt from Yahoo performance rule 6.
The second problem caused by scripts is blocking parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. (I've gotten Internet Explorer to download over 100 images in parallel.) While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.
References
http://developer.yahoo.com/performance/rules.html/
Especially note rule 6.
这篇关于页面底部的JavaScript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
