如果我保持JavaScript在底部或保持JavaScript< head>里面的document.ready，都是一样的东西？ [英] If I keep JavaScript at bottom or keep JavaScript in <head> inside document.ready, are both same thing?
问题描述
如果我将JavaScript代码保留在底部或将< head> 中的JavaScript代码保留在 document.ready
If I keep JavaScript code at bottom or keep JavaScript code in <head> inside document.ready, are both same thing?
我在这两种方法之间感到困惑， http://api.jquery.com/ready/ 和 http ：//developer.yahoo.com/performance/rules.html#js_bottom 。
I'm confused between these two methodologies, http://api.jquery.com/ready/ and http://developer.yahoo.com/performance/rules.html#js_bottom.
将JavaScript代码放在底部（在<
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
});
<head>
<script type="text/javascript" src="example.js"></script>
</head>
推荐答案
一般来说，
这是更重要的，如果你使用古典< script> 标签文件。大多数浏览器（即使是现代的）会阻塞 UI线程，因此在加载& amp;时会阻塞 HTML标记 ;执行javascript。
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.
这反过来意味着，如果您在页面顶部加载了大量的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.
为了让这个问题更糟糕，大部分的网页都会显示在您的网页上，因为他浏览器将不以并行模式下载javascript文件。如果你有这样的：
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>
您的浏览器将
- 加载file1.js
- 执行file1.js
- 加载file2.js
- 执行file2.js
- 加载file3.js
- 执行file3.js
- load file1.js
- execute file1.js
- load file2.js
- execute file2.js
- load file3.js
- execute file3.js
，并且在这样做的时候， UI线程和渲染过程都被阻止。
and while doing so, both the UI thread and the rendering process are blocked.
某些浏览器像 Chrome 终于开始以并行模式加载脚本文件，这使得整个问题少一点问题。
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.
另一种解决方法的问题是使用动态脚本标记插入。这基本上意味着您只需通过< script> 标记加载一个javascript文件。这个（加载器）脚本然后动态创建< script> 标签，并将它们插入到您的标记中。这种方式异步运行，效果更好（在性能方面）。
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).
这篇关于如果我保持JavaScript在底部或保持JavaScript< head>里面的document.ready，都是一样的东西？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
