将脚本放在底部的两种不同方式 - 有什么区别？

Question

将脚本放在底部的两种不同方式 - 有什么区别？

Zo7*_*o72 18 html javascript asynchronous-javascript

以下两种解决方案有何区别？特别是,有一个很好的理由支持2超过1.(注意:请假设要加载的脚本的名称是已知的.问题是关于创建最小脚本以在给定的脚本中加载脚本是否有价值情况)

1 - 底部的脚本

<html>
<body>
...
...
<script src='myScript.js'></script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

gue*_*est 11

第二个的一个重要特性是它允许浏览器立即完成对页面的解析,而无需等待脚本加载.这是因为第一个示例允许脚本用于document.write更改<script>标记周围的解析状态,而第二个示例则不允许.

现在,我们知道它位于页面的底部,因此没有任何重要内容可供解析,但这仍然是一个重要的区别.直到解析完成后,浏览器才会触发流行DOMContentLoaded事件.在方法1中,事件在脚本加载并执行后触发.在方法2中,事件在脚本开始加载之前触发.

这里有些例子.在这些演示中,DOMContentLoaded听众将背景颜色更改为黄色.我们尝试加载一个需要3秒钟才能加载的脚本.

(编辑:也许jsfiddle不是举办这些演示的最佳场所.在缓慢加载脚本加载之前,它不会显示结果.请确保在加载后再次单击"运行",以查看会发生什么.)

选择最适合您应用的方法.如果您知道之前需要运行脚本DOMContentLoaded,请使用方法1.否则,在大多数情况下,方法2非常好.

如果没有提及延迟/异步,这又是怎样的答案呢？ (2认同)

Answer 2

Sal*_*n A 5

1.底部的脚本

当您使用"同步"脚本标记时,它将阻止浏览器呈现页面,直到加载并执行脚本.此方法具有以下效果:

无论您放置脚本标记的位置如何,在下载并执行脚本之前,浏览器都无法触发DOMContentLoaded.
在底部放置这样的脚本标记只能确保浏览器在被脚本阻止之前呈现所有内容.

2.底部的脚本加载外部脚本

当您使用JavaScript注入脚本标记时,它将创建一个不会阻止浏览器的"异步"脚本标记.此方法具有以下效果:

无论您在何处放置生成脚本标记的JavaScript代码,浏览器都会在可用时立即执行它而不会阻止该页面.DOMContentLoaded应该触发它; 无论脚本是否已下载/执行.

第二种方法具有以下优点:

注入脚本标记的脚本可以放在任何位置,包括文档头.
该脚本不会阻止渲染.
DOMContentLoaded事件不等待脚本.

第二种方法有以下缺点:

你不能document.write在这样的脚本中使用.如果这样做,此类语句可能会擦除文档.
异步执行并不意味着浏览器已经完成了对页面的解析.保持脚本在可用时尽快执行.
执行订单无法保证.示例:如果使用注入的脚本标记加载"library.js"和"use-library.js",则可以在"library.js"之前加载并执行"use-library.js".

说了这么多,还有另一种加载脚本的方法,有三种变化:

<script src="myScript.js" async></script>
<script src="myScript.js" defer></script>
<script src="myScript.js" async defer></script>

Run Code Online (Sandbox Code Playgroud)

关于Steve Souders的工作:他提出了6种无需阻塞的脚本加载技术.在async和deferHTML5中引入的属性覆盖脚本DOM元素和脚本推迟的技术和他们的浏览器支持是绰绰有余为你担心其他技术.

****这是一个有价值的赏金猎人答案! (2认同)

归档时间：	11 年，11 月前
查看次数：	663 次
最近记录：	6 年，9 月前