瀏覽器渲染網頁時遇到腳本標籤

後讀how browser works和瀏覽器rendering process，我仍然對瀏覽器的解析過程中的混亂時遇到<script>標籤，該帖子沒有真正覆蓋。瀏覽器渲染網頁時遇到腳本標籤

主要過程是在以下PIC描述： enter image description here

假設我們有一個簡單的HTML

<html> 
<head> 
<link rel="stylesheet" href="main.css"> 
<script src="main.js"></script> 
<link rel="stylesheet" href="another.css"> 
</head> 
<body> 
</body> 
</html>

問題：

瀏覽器是單線程的，所以如何沒有HTML解析器和CSS解析器工作平行
在HTML解析器，當遇到<script>標籤：瀏覽器停止直到js文件被下載並執行完成？對於這個例子，瀏覽器不會下載another.css直到main.js下載並執行？

來源

2013-10-31 jason

'「瀏覽器：

您可以通過一個事件監聽連接到body.onload事件 <body onload="load()">其中load（）方法是在你的main.js功能

看看這個做到這一點是單線程「 - 說誰？ –

關於'script'標籤，瀏覽器等待它無論腳本標籤（頭部或身體）：例如，當它在頭，瀏覽器完全停止渲染'body'之前解析它。 – Bigood

@Bigood，所以當解析腳本時，一切都停止了，只是等待它完成？任何下載也停止？ – jason

1：瀏覽器不是單線程的，如果你留意你的taskmanager，你會發現瀏覽器實際上使用了多個線程。我認爲瀏覽器爲htmlpage保留1個線程，並創建一個新的線程/重用線程來獲取圖像，CSS和JS，因此不阻止主要的HTML線程。

2：當HTML解析器遇到<script src="main.js"></script>標記時，它會將main.js下載到客戶端並執行它可以找到的任何js代碼。

通常情況下這將是您的最佳利益，制止JS的執行。這就是爲什麼你通常把你所有的JS功能集成到功能，具有當裝上htmlpage所有元素觸發您的JS一個初始化或加載功能。 Link

來源

2013-10-31 11:08:16 Raveno

對於第二個問題，當下載main.js並執行代碼時，其他的東西都被中止了？在執行main.js之前，瀏覽器不會下載another.css？如果是這樣，任何工具要觀察？ – jason

處理main.js的線程在完成任務之前不會執行任何其他操作。其他需要下載的元素，比如another.css，會被另一個線程處理，不會阻止html或js的執行。這又是爲什麼你會想要在body onload事件上執行你的js。對於工具，如果您使用的是Chrome，則可以通過按Ctrl + Shift + I並選擇網絡選項卡來檢查網絡流量。在這裏你會發現多個請求（線程）正在同時運行。 – Raveno

瀏覽器渲染網頁時遇到腳本標籤

回答

相關問題