我可以写以下内容:

<script src="file1.js" defer></script>
<script src="file2.js" defer></script>
<script src="file3.js" defer></script>

这意味着文件可以并行下载,但只能一个接一个地执行。但是,我可以添加async属性,以允许浏览器以随机顺序执行代码。
<script src="file1.js" async></script>
<script src="file2.js" async></script>
<script src="file3.js" async></script>

如果我对性能提升感兴趣,可以更快地执行第二个块吗?如我所见,如果浏览器在一个线程中执行所有JavaScript,那么3个脚本的总执行时间将与第一个程序段相同,只是执行顺序可能不同。我对吗?

最佳答案



由于脚本将以异步方式下载和执行,因此可以,这将减少页面加载时间。

Script-injected "async scripts" considered harmful的作者比较了包括脚本的三种方法:注入(inject)脚本,阻止脚本和具有async属性的脚本。结果是:

                    script execution   onload
 ----------------- ------------------ --------
  script-injected   ~3.7s              ~3.7s
  blocking script   ~2.7s              ~2.7s
  async attribute   ~1.7s              ~2.7s

如您所见,async属性可提供最佳性能。如果脚本执行顺序无关紧要,则一定要使用它。

至于您的标题问题:



是的,因为JavaScript是单线程的,但是在性能方面并不重要。下载脚本要比实际执行花费更长的时间,因此您应该集中精力优化下载部分。

我做了一个测试。我创建了一个简单的脚本:
for (var i = 0; i < 1e8; i++);

我将相同的脚本放入了两个文件test1.jstest2.js。然后,我制作了两个HTML文件,第一个没有async,第二个有:
test1.html:
<!DOCTYPE html>
<script src="test1.js"></script>
<script src="test2.js"></script>
test2.html:
<!DOCTYPE html>
<script src="test1.js" async></script>
<script src="test2.js" async></script>

然后,我在浏览器中打开了这些HTML文件,并在Chrome DevTools中选中了“时间轴”标签:
test1.html:

javascript - 浏览器是否在单个线程中执行加载的脚本?-LMLPHP
test2.html:

javascript - 浏览器是否在单个线程中执行加载的脚本?-LMLPHP

如您所见,在两种情况下,脚本都不是异步执行的。

另请参阅:Is JavaScript guaranteed to be single-threaded?

关于javascript - 浏览器是否在单个线程中执行加载的脚本?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36565888/

10-12 12:28
查看更多