- css一般放在head標(biāo)簽中,js一般放在body的結(jié)束標(biāo)簽前
JS是阻塞加載，會影響頁面加載的速度猖毫，如果js文件比較大吃度，算法也比較復(fù)雜的話，影響更大责语。CSS放在前端是頁面渲染時首先是根據(jù)DOM結(jié)構(gòu)生成一個DOM樹然后加上CSS樣式生成一個渲染樹炮障，如果CSS放在后面可能頁面會出現(xiàn)閃跳的感覺，或者是白屏或者布局混亂樣式很丑直到CSS加載完成坤候。js非阻塞加載解決方案也有胁赢，1是用defer標(biāo)簽，2是用createElement來動態(tài)生成白筹，但是這樣有一個問題就是加載順序在IE下不一定會是按代碼寫的順序來加載智末，可能會影響到依賴項谅摄，有些文件就是必須在另一個文件前引用∠倒荩火狐跟opera是按順序加載的送漠，3是用ajax加載，也是非阻塞似的但是這種方法不支持CDN由蘑。 - 白屏問題：在IE低版本中的一些情況下（新窗口打開螺男，重新加載，作為主頁打開）會出現(xiàn)纵穿，原因是低版本的IE是要等待css加載成功后才會對HTML進(jìn)行渲染和展示。所以如果把css樣式放在底部奢人，就會出現(xiàn)白屏問題谓媒。（如果使用@import加載樣式，即使css樣式在頭部何乎，也可能會出現(xiàn)白屏問題）句惯。解決方法是把css樣式放在head標(biāo)簽中，并且避免使用@import支救。
FOUC：除了IE瀏覽器抢野，大部分瀏覽器都是先對HTML進(jìn)行渲染和展示，在等待css加載完成后重新對樣式進(jìn)行修改各墨。所以會出現(xiàn)FOUC指孤。故如果把css樣式放在底部，則會一直出現(xiàn)FOUC贬堵。解決方法是把css樣式放在head標(biāo)簽中（即頭部）恃轩。
綜上所述，一般而言黎做，css放在head標(biāo)簽中是最好的叉跛，無論什么瀏覽器，都可以解決FOUC或白屏的問題蒸殿。
- async:加載和渲染后續(xù)文檔元素的過程和js的加載與執(zhí)行并行進(jìn)行（異步加載）筷厘；
- defer:加載后續(xù)文檔元素的過程和js的加載并行進(jìn)行但js的執(zhí)行要等所有元素解析完成之后，DOMContentloaded事件觸發(fā)之前完成宏所。
- 解析HTML標(biāo)簽酥艳，構(gòu)建DOM樹。
- 解析css標(biāo)簽楣铁，構(gòu)建CSSOM樹玖雁。
- 把DOM和CSSOM組合成渲染樹（render tree）
- 在渲染樹的基礎(chǔ)上進(jìn)行布局，計算每個節(jié)點的幾何結(jié)構(gòu)盖腕。
- 把每個節(jié)點繪制到屏幕上赫冬。
