v
一、JS阻塞
所有的瀏覽器在下載JS文件的時候,會阻塞頁面上的其他活動,包括其他資源的下載以及頁面內(nèi)容的呈現(xiàn)等等,只有當JS下載、解析、執(zhí)行完,才會進行后面的 操作。在現(xiàn)代的瀏覽器中CSS資源和圖片image資源是并行下載的,在IE6中默認的并行的加載數(shù)目是2個,在IE6以后以及其他的瀏覽器中的默認的并行加載數(shù)目是6個。
在瀏覽器從服務(wù)器接收到HTML文檔后,并把HTML在內(nèi)存中轉(zhuǎn)換為DOM樹,在轉(zhuǎn)換節(jié)點的過程中如果引入了CSS文件以及添加了images,則會在文檔加載的同時并行的加載CSS文件以及圖片。但是JS不一樣,因為瀏覽器需要1個穩(wěn)定的DOM樹結(jié)構(gòu),而JS中很有可能有代碼直接改變了DOM樹結(jié)構(gòu),比如使用document.write 或 appendChild,甚至是直接使用的location.href進行跳轉(zhuǎn),瀏覽器為了防止出現(xiàn)JS修改DOM樹,需要重新構(gòu)建DOM樹的情況,所以就會阻塞其他的下載和呈現(xiàn).在沒有使用異步加載(async)或者是延遲加載(defer)的情況下,只有在一個JS文件加載解析完后才能加載后面的JS文件。利用延遲腳本和異步腳本可以實現(xiàn)腳本的并行加載。以下討論都是在沒有這兩個屬性的情況下。
(1)內(nèi)嵌腳本的阻塞
直接寫在HTML文檔中的js代碼就是內(nèi)嵌JS,內(nèi)嵌腳本無需加載,可以直接執(zhí)行,所以當頁面有內(nèi)嵌的腳本時,可以直接執(zhí)行,導(dǎo)致會阻塞所有資源的加載和頁面的呈現(xiàn)。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>內(nèi)嵌JS會阻塞頁面上的所有內(nèi)容的呈現(xiàn)</title></head><body><div><ul> <li>blogjavaspan style="color: #800000;"</li> &