是js的載入阻塞了頁面的渲染還是js的執行阻塞了頁面的渲染？

01-02

1，html與js是否是並行下載
2，是js的下載阻塞了頁面的渲染還是js的執行阻塞了頁面的渲染，還是兩者都會阻塞頁面
3，script標籤放在head中與放在body中，是影響了js的下載開始時間還是執行開始時間

4，css，圖片以及一些其它的外部資源的下載是否與html，js的下載並行

1，html與js是否是並行下載

如果你想問的是，在頁面 HTML 載入完成之前，瀏覽器是不是會載入外聯 js ，那麼是的，你可以拿 Node.js 寫一個 request handler ，在多次 flush 之間弄一個時間間隔試試。

2，是js的下載阻塞了頁面的渲染還是js的執行阻塞了頁面的渲染，還是兩者都會阻塞頁面

DOM 樹解析到非非同步的外聯 js 時會阻塞住，在它載入並且執行完之前，不會往下解析 DOM 樹。

3，script標籤放在head中與放在body中，是影響了js的下載開始時間還是執行開始時間

如果不考慮 http 並發請求數的限制，並且忽略掉接收頁面 response body 的耗時的話，在有預解析的瀏覽器上，外聯的 script 放哪都不會（太）影響載入開始時間。

需要注意的是，雖然載入是並行化的，但 js 會阻塞住 dom 樹解析，因而你把 script[src]放在 head 中會阻塞住首屏渲染，最好還是放在 body 尾部。

4，css，圖片以及一些其它的外部資源的下載是否與html，js的下載並行

情況還挺複雜的，基本上指導原則是瀏覽器會嘗試把所有的載入都並行化，儘可能快地完成載入，但也要考慮並發請求數的限制。

並且如上一條所述，並行化載入，但 dom 樹解析、js執行和首屏渲染卻是串列的，瀏覽器會儘可能快地完成載入，不代表這些元素放置的順序就不重要。

瀏覽器網路拉取資源是多線程的。但是dom樹的操作都是在一個線程中的。所以網頁資源的解析和js載入執行，以及dom樹渲染都是一個線程執行。一個線程的任務就會相互搶佔，先來先執行。

1 ，html與js是否是並行下載

html下載構建dom後讀取到外聯js tag才會下載

2，是js的下載阻塞了頁面的渲染還是js的執行阻塞了頁面的渲染，還是兩者都會阻塞頁面

css下載完會構建cssom，js由於可能會改變cssom所以必須等待cssom構建後才開始parse，並且js會阻塞dom構建，如圖，所以dom構建會被js下載阻塞

3，script標籤放在head中與放在body中，是影響了js的下載開始時間還是執行開始時間。

放在head和body並不影響js，js會阻塞dom構建不過放在head上由於dom未構建完成可能會找不到dom元素。

4，css，圖片以及一些其它的外部資源的下載是否與html，js的下載並行

圖片和其他資源並不會和（必要css，js資源）並行下載，構建dom 和 cssom的時候才開始下載。

請看上圖，css開始時間在24.70ms也就是html下載完dom構建中，svg開始在1.74s，css下載完，cssom構建中

基本上，放在&里的都會載入完後才開始渲染，放在&里的則是順序渲染，所以不想阻塞渲染的js需要放在&的最後。

客戶端請求伺服器後，伺服器會返回html。html是順序從頭到尾下載的，所以，如果js是直接寫在html里的，也會順序下載。如果是外部文件的放式，客戶端下載完src後就會另起一http去下載那段外部js，這時候題主可以理解為並行下載！其他資源，圖片等也是這種方式下載！

2.頁面的渲染肯定是所有html和js，包括外部js一起下載後再開始的。所以js的下載和執行都影響了頁面的呈現！

3.js最快執行的是onload事件里的，其他就是html里靠頂下載的。其他就是各種事件觸發。