一、CSS和JS在網(wǎng)頁中的放置順序？
CSS應(yīng)放在頭部;
一般情況下，JS應(yīng)放在body結(jié)束標(biāo)簽前。
<!--頭部引入CSS-->
<head>
<link rel="stylesheet" href="css/layout.css" type="text/css">
</head>
<!--body閉合標(biāo)簽前引入JS-->
<script type="text/javascript" src="script.js"></script>
</body>
二、解釋白屏和FOUC
- 原因：當(dāng)把css樣式放在底部或者使用@import方式引入樣式時
- 影響：
- 一些瀏覽器例如Chrome,他的加載和渲染機制是等css全部加載解析完后再渲染展示頁面,而這個等待的時間就為白屏。
- 另一些瀏覽器例如Firefox,他會在css未加載前先展現(xiàn)頁面,等css加載后再重繪一次,這就造成了FOUC (無樣式內(nèi)容閃爍)。
三、async和defer的作用和區(qū)別
參考文獻
1.async vs defer attributes
2.瀏覽器環(huán)境下JavaScript腳本加載與執(zhí)行探析之defer與async特性
3.script的defer和async
async:異步下載腳本；下載完成后立即執(zhí)行，不分腳本的順序；執(zhí)行過程還是會阻塞頁面解析的；
defer: 設(shè)置了defer的腳本下載時不會阻塞頁面的解析，而是等到頁面解析結(jié)束之后再執(zhí)行。
- 相同點：
- 下載都不會阻止html頁面解析
- 對外鏈js有效
- 區(qū)別：
- async下載完立即執(zhí)行，defer在頁面解析完成后執(zhí)行；
- async可能未按照順序執(zhí)行，defer還是按順序執(zhí)行；
<script src="script1.js" async></script><!--async-->
<script src="script2.js" defer></script><!--defer->
<script src="script3.js"></script><!--normal-->
async defer and normal attributes
