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