瀏覽器是否在單個線程中執行加載的腳本？

Question

我可以寫下面的內容：

<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個腳本的總執行時間與第一個塊沒有區別，只有執行順序可能不同。 我對嗎？

Answer 1

如果我對性能提升感興趣，第二個塊可以更快地執行嗎？

由於腳本將被異步下載和執行，是的，它將減少頁面加載時間。

腳本注入的“異步腳本”被認為有害的作者比較了三種包含腳本的方法：注入腳本，阻塞腳本和具有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.js和test2.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中選中了Timeline選項卡：

test1.html ：

test2.html ：

如您所見，在這兩種情況下，腳本都不是異步執行的。

另請參見： JavaScript是否保證是單線程的？ 。

瀏覽器是否在單個線程中執行加載的腳本？

問題描述

1 個解決方案

解決方案1
6 已采納 2016-04-12 07:21:42

瀏覽器是否在單個線程中執行加載的腳本？

問題描述

1 個解決方案

解決方案1 6 已采納 2016-04-12 07:21:42

解決方案1
6 已采納 2016-04-12 07:21:42