将脚本放在底部的两种不同方式-有什么不同？
下面的两个解决方案之间有什么区别？特别是，是否有充分的理由支持2而不是1。(注意:请假设要加载的脚本的名称是已知的。问题是，在给定的情况下，创建一个最小的脚本来加载脚本是否有价值)
1 -底部的脚本
<html>
<body>
...
...
<script src='myScript.js'></script>
</body>
</html>2 -底部的脚本加载外部脚本
<html>
<body>
...
...
<script>
// minimal script to load another script
var script = document.createElement('script');
script.src = 'myScript.js'
document.body.appendChild(script);
</script>
</body>
</html>回答 5
Stack Overflow用户
发布于 2014-04-09 16:40:39
1.底部的脚本
当您使用“同步”脚本标记时，它将阻止浏览器呈现页面，直到脚本加载并执行。此方法具有以下效果：
- 无论您将脚本标记放在何处，在下载脚本之前，浏览器都无法触发，并且在底部放置这样的脚本标记只会确保浏览器在被脚本阻止之前呈现所有内容。
2.底部的脚本加载外部脚本
当您使用JavaScript注入脚本标记时，它将创建一个不会阻塞浏览器的“异步”脚本标记。此方法具有以下效果：
- 无论您将生成脚本标记的JavaScript代码放在什么位置，只要它可用，浏览器就会立即执行它，而不会阻塞页面。无论脚本是否具有downloaded/executed.
，DOMContentLoaded都会在应该触发的时候触发
第二种方法有以下优点：
插入脚本标记的脚本可以放在任何位置，包括文档头。
- 脚本不会阻止rendering.
- DOMContentLoaded事件不会等待脚本。
第二种方法有以下缺点：
- 您不能在此类脚本中使用
document.write。如果这样做，这样的语句可能会擦除文档clean. - Asynchronous执行并不意味着浏览器已经完成了对页面的分析。保持脚本在可用时立即执行不保证mind.
- Execution顺序中的子句。示例:如果您使用插入的脚本标记加载"library.js“和"use-library.js”，则"use-library.js“有可能在"library.js".
之前加载和执行
话虽如此，还有另一种加载脚本的方法，有三种变体：
<script src="myScript.js" async></script>
<script src="myScript.js" defer></script>
<script src="myScript.js" async defer></script>关于Steve Souders的工作:他为loading scripts without blocking提出了6种技术。HTML5中引入的async和defer属性涵盖了脚本、DOM元素、和脚本延迟技术，它们的浏览器支持足以让您担心其他技术。
Stack Overflow用户
发布于 2014-04-03 06:25:01
第二个脚本的一个重要特性是，它允许浏览器立即完成对页面的解析，而无需等待脚本加载。这是因为第一个示例允许脚本使用document.write更改<script>标记周围的解析状态，而第二个示例不允许。
现在，我们知道它在页面的底部，所以没有任何重要的内容需要解析，但这仍然是一个重要的区别。直到解析完成，浏览器才会触发流行的DOMContentLoaded事件。在方法1中，事件在脚本加载和执行后触发。在方法2中，事件在脚本开始加载之前触发。
这里有一些例子。在这些演示中，DOMContentLoaded侦听器将背景颜色更改为黄色。我们尝试加载一个需要3秒加载的脚本。
(编辑:也许jsfiddle不是托管这些演示的最佳地方。在加载慢速脚本之前，它不会显示结果。确保在加载后再次单击Run，以查看发生了什么情况。)
选择最适合您的应用程序的方法。如果您知道需要在DOMContentLoaded之前运行脚本，请使用方法1。否则，方法2在大多数情况下都很好。
Stack Overflow用户
发布于 2014-03-31 17:43:57
这两种初始化脚本的方法基本上是相同的，尽管如果可以直接输入结果，就没有理由使用第二种方法。但是，您可以将第二个示例包装在$(document).ready()方法中，例如，这将导致某种延迟加载效果。这基本上意味着页面将首先加载，在页面加载完成后，它将加载脚本。当然，您也可以创建一个方法，以这种方式初始化某个脚本。当你有一个只在某些情况下使用的大脚本时，它很有用。这将防止加载它，除非您需要它，因此减少了整体加载时间。
https://stackoverflow.com/questions/22758207
复制相似问题