可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

If I keep JavaScript code at bottom or keep JavaScript code in <head> inside document.ready, are both same thing?

I'm confused between these two methodologies, http://api.jquery.com/ready/ and http://developer.yahoo.com/performance/rules.html#js_bottom.

Is there any benefit to putting JavaScript code at bottom (just before </body>) even if I keep the code inside.

   $(document).ready(function() {
       // code here
   });

As JavaScript is attached in

<head>
    <script type="text/javascript" src="example.js"></script>
</head>

回答1:

In General, your should put your Javascript files at the bottom of your HTML file.

That is even more important if you're using "classical" <script> tag files. Most browsers (even modern ones) will block the UI thread and therefore the render process of your HTML markup while loading & executing javascript.

That in turn means, if you're loading a decent amount of Javascript at the top of your page, the user will expire a "slow" loading of your page, because he will see your whole markup after all your script has been loaded and executed.

To make this problem even worse, most browsers will not download javascript files in a parallel mode. If you have a something like this:

<script type="javascript" src="/path/file1.js"></script>
<script type="javascript" src="/path/file2.js"></script>
<script type="javascript" src="/path/file3.js"></script>

your browser will

load file1.js
execute file1.js
load file2.js
execute file2.js
load file3.js
execute file3.js

and while doing so, both the UI thread and the rendering process are blocked.

Some browsers like Chrome finally started to load script files in parallel mode which makes that whole problem a little bit less of an issue.

Another way to "workaround" that problem is to use dynamic script tag insertion. Which basically means you only load one javascript file over a <script> tag. This (loader) script then dynamically creates <script> tags and inserts them into your markup. That works asyncronously and is way better (in terms of performance).

回答2:

They will load all the same in terms of you being able to access the code.

The differences are in the perceived speed of loading of the page. If the javascript is last it will not block any CSS that is trying to be downloaded, which should always be at the top, and will not block any images that need to be downloaded.

Browsers only ask for items as they find them in the HTML but they only have a limited amount of download streams (~10 in modern browsers) so if you doing a lot of requests for images/css and for JS something is going to lose and the perceived speed/ user experience of the page load of your page will take a hit.

回答3:

They are not the same thing as the ready event is fired when the DOM tree has been built, while scripts at the end of the page may actually execute afterward.

Either way, they're both safe entry points for your app's execution.

回答4:

The Yahoo! Developer site is saying that if you put JavaScript at the bottom of the page, it won't block loading of other resources by the browser. This will make the page's initial load quicker.

jQuery is specifying a function to load when the entire page has loaded.

If you have a function which executes on page load, it won't matter whether you include it in <head> or at the bottom of the page, it will be executed at the same time.

回答5:

It's important to consider what the JavaScript is actually doing on your page when deciding where to put it. In most cases, the time it takes to load and run JavaScript makes placing it at the end of the page more logical. However, if the page rendering itself depends on Ajax calls or similar, this might not be the case.

Here's a good read on the subject of document.ready() not being appropriate for all JS.

回答6:

Position of <script> tag don't involve your script if you use document.ready. It seems JavaScript is charged faster when placed before </body> but I'm not sure.

回答7:

Even with the script at the bottom of the HTML document, the DOM may not be fully loaded. All closed elements above the script will typically be ready, a DOM ready event may be necessary in corner cases.