JavaScript加載很多時候能夠決定用戶從打開頁面看到頁面的時間，JavaScript的加載與樣式表和DOM以及圖片等資源的加載既有相 同之處，又有很大的不同之處。最大的不同就是JavaScript的加載完成后會立即執行并阻塞頁面的渲染，這就讓腳本的加載與其他資源的加載有了很大的 不同。
在頁面中直接引用的JavaScript會阻塞整個頁面的加載，這就意味著每加載一個script標簽就會有兩種副作用：
1. 多占用一個Http的請求資源；
2. 加載完成后阻塞頁面，直到JavaScript執行完畢。
HTTP/1.1的標準建議瀏覽器對同一個主機名只能并行下載不超過2個文件（事實上現在的瀏覽器的限制的數目都超過2個），這就意味著你引用的文件越多頁面加載的速度將會變得越慢，因為很多文件都處于等待下載的狀態中。要解決HTTP請求這個問題可以從兩個方面著手：
1. 從多個主機名加載資源，這個可以使用多個二級域名的辦法來實現，但是增加的引用文件的混亂程度；
2. 減少引用的資源數目。
具體到JavaScript的載入，當前比較常用的方法是使用壓縮工具將多個JavaScript合并成一個文件，同時也能減小 JavaScript文件的體積。另外一個是通過統一的接口加載Script資源，后臺程序將請求的文件合并成一個文件輸出，并按照版本號進行緩存，后臺 判斷如果有緩存的版本且緩存未過期將直接輸出緩存文件。后一種方法在wordpress中有類似的使用，但是未見wordpress進行文件的緩存，我曾 經寫過一個類似的實現，將在后續的文章中放出。但是這個方法也有一個問題，因為要對文件進行合并，讀寫操作，另外考慮到后臺語言的運行效率，所以對服務器 也將增加不少壓力。
至于JavaScript加載過程中會阻塞頁面，這個問題可以通過把JavaScript放到頁面代碼的最底部進行加載，這樣會在頁面顯示完成之后 在執行JavaScript。當然script標簽有個defer屬性，可以讓script標簽在頁面DOM加載完成之后執行，但是由于瀏覽器的支持程度 不同，所以使用defer屬性不是一個穩妥的解決方案。
事實上當前還有一種比較流行的解決方案，就是使用JavaScript動態生成script節點，然后將其插入到文檔中。動態的生成script節點插入文檔的加載方式可以實現無阻塞的加載腳本資源，提高了下載的效率。通過兩幅圖對比一下：
圖1：靜態引入script標簽時頁面加載的時間條
圖2：動態引入script標簽時頁面加載的時間條
圖3：使用后臺程序（PHP）合并之后輸出
通過一次的測試并不能證明載入速度的快慢，所以載入時間在這里是無意義的。但是，通過查看載入的方式可以了解到，動態加載腳本的模式下，腳本的加載未阻塞圖片的加載，而傳統的方式則會在腳本加載完成之后再加載下面的內容。
動態載入script節點能夠解決并行下載的問題，但是并無法解決JavaScript執行阻塞的問題，上面兩圖時間線中土黃色部分即為腳本執行的 阻塞時間，可以看到阻塞的時間甚至比加載的時間要長。上面提到了，解決這個問題的辦法是把JavaScript放到文檔的結尾處。如果使用script標 簽動態加載的話這里就很方便，可以在DOM Ready或者Page onload的時候加載腳本，或者按需加載即什么時候用到什么時候加載，這樣就不會阻塞頁面的渲染。當然這個加載的時機還是要慎重考慮，根據腳本的作用進 行不同的調整。