如果我将 JavaScript 代码保留在底部或将 JavaScript 代码保留在<head> inside document.ready，两者是同一件事吗？
我对这两种方法感到困惑，http://api.jquery.com/ready/ http://api.jquery.com/ready/ and http://developer.yahoo.com/performance/rules.html#js_bottom http://developer.yahoo.com/performance/rules.html#js_bottom.
将 JavaScript 代码放在底部（就在</body>）即使我将代码保留在里面。
$(document).ready(function() {
// code here
});
由于 JavaScript 附加在
<head>
<script type="text/javascript" src="example.js"></script>
</head>
一般来说，您应该将 Javascript 文件放在 HTML 文件的底部。
如果您使用“古典”，这一点就更重要<script>标记文件。大多数浏览器（甚至现代浏览器）都会阻止UI thread因此你的渲染过程HTML markup在加载和执行 javascript 时。
这反过来意味着，如果您在页面顶部加载了相当数量的 Javascript，用户将终止页面的“缓慢”加载，因为他会看到您的整个标记after您的所有脚本都已加载并执行。
为了使这个问题变得更糟，大多数浏览器都会not以并行模式下载 javascript 文件。如果你有这样的事情：
<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
在此过程中，双方UI thread并且渲染过程被阻塞。
有些浏览器喜欢Chrome终于开始以并行模式加载脚本文件，这使得整个问题不再是一个问题。
“解决”该问题的另一种方法是使用dynamic script tag insertion。这基本上意味着你只加载一个 javascript 文件<script>标签。然后这个（加载器）脚本动态创建<script>标记并将它们插入到您的标记中。这是异步工作的并且更好（在性能方面）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
