這是今天我一個同事問我的問題，我憑着印象中關於瀏覽器的js載入特性敷衍了 他一下，我說現在的瀏覽器是多個js同時載入，我印象中有篇文章介紹chrome 好像是一次載入5個js 文件依次這樣，我都是印象，或者看書上網上的一些文章，爲何不自己驗證一下，那就試試吧，
1：環境Chrome 瀏覽器，
2：若干js文件，其中一個特別大js文件大概10M，主要問了驗證js 的阻塞效果
瀏覽器一次載入多少個JS文件？
下邊是使用一個10M的大js文件造成加載的是阻塞，後邊是跟30個非常小的js 看一下效果
<HEAD>
<TITLE> history </TITLE>
<script src="res/10M.js.js"></script>
<script src="res/test.js"></script>
<script src="res/test1.js"></script>
<script src="res/test2.js"></script>
<script src="res/test3.js"></script>
<script src="res/test4.js"></script>
<script src="res/test5.js"></script>
<script src="res/test6.js"></script>
<script src="res/test7.js"></script>
<script src="res/test8.js"></script>
<script src="res/test9.js"></script>
<script src="res/test10.js"></script>
<script src="res/test11.js"></script>
<script src="res/test12.js"></script>
<script src="res/test13.js"></script>
<script src="res/test14.js"></script>
<script src="res/test15.js"></script>
</HEAD>下圖是測試結果
很明顯看到10M.js 還在pending 但是下邊的所有test1-20.js 都已經Finished， 說明了現代瀏覽器確實是一次載入多個js，是同時加載而且不會產生阻塞，那麼是不是加載5個js，肯定不是了，我最多加到了30個js文件，也是同時一次載入的，起碼在chrome 瀏覽器中所有的js 文件是一次載入的。
js載入後立即行嗎？
如果讓我回答，我看到幾乎所有的資料介紹js 的加載機制都是載入既執行，因爲js是腳本語言，是沒有編譯過程的，但是如果看到上一個實驗，會發現這種說法跟瀏覽器載入js的機制是有悖論的，還是實踐出真知吧， 這次我在第一個10m.js 文件的最後加了一句console,其他的小文件也都加入console，下邊看看結果
明顯最後載入完成的10m.js 如果按照以前網上的一些說法，應該是10m.js 是最後打印console。
這裏是執行結果
this is 10m.js....... test1.js test2.js test3.js test4.js test5.js
10m.js 中的console確實第一個打印，
所以以上證明了一個問題，js 真正載入邏輯是“並行載入，順序執行”，所以js 載入後是不是直接執行的，而在瀏覽器的內存中等待其他所有js 成功載入後在順序執行，所以也就保證了我們js前後依賴是沒有問題的。這裏問題又來，如果有js 載入失敗怎麼辦？通過其他的js 失敗加載的實驗，這裏就不貼出了，如果你寫的js無法加載瀏覽器不會一直等待，所以你的個別js 不能加載並不能影響整個網頁中js 加載執行的順序，可以說是毫無影響的
JS載入到底會不會阻塞DOM渲染
我從所有的資料中看到都是js加載和執行過程都會阻塞dom 的渲染，那就試試吧，下邊我在測試的網頁上隨便寫了幾個按鈕的dom節點
當在51m的時候10m.js 還沒有加載完成，當然你可以看到頁面還是處於空白，所以證明一個問題
js 的加載是會阻塞DOM渲染的
面試經常問到問題，如何加快頁面響應，其中就有一個回到是使用async屬性
async到底能不能？我很好奇
來吧還是上例子，我把10m.js 的屬性修改爲async，如果按照很多人的說法，那麼在10m.js 沒有加載完成的時候dom應該已經渲染完了，看看結果吧騷年
