原創(chuàng)作品陌选，請勿抄襲柠贤，翻版必究。轉(zhuǎn)載請注明作者臼勉。
簡介
在上面篇文章中我已經(jīng)提到餐弱，web頁面中將CSS放在底部會導(dǎo)致載網(wǎng)速低的情況下頁面逐漸呈現(xiàn)阻塞囱晴，導(dǎo)致“白屏”畸写，應(yīng)該將CSS引用放在頂部枯芬。而對于JavaScript文件采郎，相反，應(yīng)該放在底部淫痰。
原理
HTML中script有兩個屬性整份，async是異步執(zhí)行，表示下載完js馬上異步執(zhí)行js火俄，不阻塞瀏覽器呈現(xiàn)烛占。defer表示延遲執(zhí)行沟启，需要等頁面資源下載完成后執(zhí)行，相當(dāng)于放在尾部芽卿。既沒有async和defer的屬性胳搞，頁面將在下載后阻塞呈現(xiàn)立即執(zhí)行。 相信看到這篇文章的大部分同學(xué)筷转，都沒有使用到defer和async悬而。這種情況下JavaScript文件放在頂部會導(dǎo)致頁面呈現(xiàn)阻塞。
同樣笨奠，來看看天貓首頁的腳本情況
天貓在html中相當(dāng)一部分使用了async的，這里有他特殊的使用之處到腥，基本是數(shù)據(jù)的獲取，不會對頁面布局有改動配名，我對它的使用不是清楚篓足，如果誰知道栈拖，望告知我没陡。
上面我們說了script的async和defer兩個屬性盼玄，以及沒有這兩個屬性的情況下，腳本阻塞頁面呈現(xiàn)埃儿，導(dǎo)致“白屏”。下面我們重點(diǎn)看下沒有這個兩個屬性的情況精钮。
引用http://stevesouders.com/hpws/move-scripts.php的例子（demo是前輩大神的轨香，我只是借來用用）幼东。
頁面中嵌了2個iframe，左邊的是把腳本放在top的情況脓杉，右邊是腳本放在底部的情況简逮。
上面兩張圖可見腳本放在頂部會導(dǎo)致頁面呈現(xiàn)阻塞沛婴，在網(wǎng)速慢的時候?qū)е隆鞍灼痢焙鹞罚钡侥_本下載完畢泻蚊，頁面才繼續(xù)呈現(xiàn)丑婿。腳本放在底部則可以讓頁面盡快呈現(xiàn)。前端的性能優(yōu)化必須對這些細(xì)節(jié)非常注意秒旋，變量引起質(zhì)變，如果每個地方你都極盡最佳性能迁筛，你開發(fā)出來的網(wǎng)站性能將會尤其突出细卧。
