Javascript 在文档底部而不是顶部加载 JS 的好处
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5329807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Benefits of loading JS at the bottom as opposed to the top of the document
提问by jeffreynolte
What are the real benefits (if any) to loading your JS at the bottom of the document, as opposed to the top. It seems there is a brief delay in page loading and JS dependent functionality.
在文档底部而不是顶部加载 JS 的真正好处（如果有的话）是什么？页面加载和 JS 相关功能似乎有一个短暂的延迟。
I am using html5boilerplatefor beginning all my templates, but am not really sure on how beneficial loading the JS at the bottom is.
我正在使用html5boilerplate来开始我的所有模板，但我不确定在底部加载 JS 有多大好处。
Does it really make all that much of a difference, and if so, why?
它真的有那么大的不同吗，如果有，为什么？
采纳答案by Tim Joyce
If you include external js files at the bottom of your page, you give the priority of your HTTP requests to the visual display that will be presented to the client instead of to the logic of interaction or dynamics. I believe, if you do not use a content delivery network to deliver images to the client then you are only allowed to process a maximum of 2 HTTP requests at a time. You do not want to waste these requests on logic because we all know how impatient the end user is.
By loading js at then end of the file you can access the DOM(most of the time) without having to call a document.ready() function. You know that if the page render finally makes it to your javascript code that the necessary page elements have usually loaded already.
如果您在页面底部包含外部 js 文件，您会将 HTTP 请求的优先级分配给将呈现给客户端的视觉显示，而不是交互或动态逻辑。我相信，如果您不使用内容交付网络向客户端交付图像，那么您一次最多只能处理 2 个 HTTP 请求。您不想将这些请求浪费在逻辑上，因为我们都知道最终用户是多么不耐烦。
通过在文件末尾加载 js，您可以访问 DOM（大部分时间）而无需调用 document.ready() 函数。您知道，如果页面渲染最终进入您的 javascript 代码，则所需的页面元素通常已经加载。
There are a few more reasons out there but these are the important ones that I try to remember when it feels so awkward to place all js at the bottom.
还有其他一些原因，但当将所有 js 放在底部感觉很尴尬时，我会尽量记住这些重要的原因。
回答by Adam Price
As scripts that are referred to are being downloaded, browsers typically won't download other files in parallel, thus slowing the page load.
由于正在下载引用的脚本，浏览器通常不会并行下载其他文件，从而减慢页面加载速度。
refer: Best Practices for Speeding Up Your Web Site
参考：加速网站的最佳实践
回答by JasCav
A Google search will return a large number of results as to why you want to do so and what improvement you'll see. Check out some of these following links:
Google 搜索将返回大量结果，说明您为什么要这样做以及您会看到哪些改进。查看以下链接中的一些：
- High Performance Web Sites: Rule 6 - Move Scripts to the Bottom
- Rails Best Practices: Scripts at Bottom
Basically, the main reason for doing so is that you'll improve render times of your page. From the first article:
基本上，这样做的主要原因是您将改善页面的渲染时间。从第一篇文章：
[I]t's better to move scripts from the top to as low in the page as possible. One reason is to enable progressive rendering, but another is to achieve greater download parallelization.
[我]最好将脚本从页面的顶部移动到尽可能低的位置。一个原因是启用渐进式渲染，但另一个原因是实现更大的下载并行化。
回答by Naftali aka Neal
depending on what is in the js. if only want it to 'go' when the page loads either surround your code by jquery's: $(function(){})or place it at the bottom of the page
取决于js中的内容。如果只希望它在页面加载时“运行”，要么用 jquery's: 包围你的代码，$(function(){})要么将它放在页面底部
