- css一般放在head標簽中,js一般放在body的結束標簽前
JS是阻塞加載，會影響頁面加載的速度，如果js文件比較大，算法也比較復雜的話，影響更大。CSS放在前端是頁面渲染時首先是根據DOM結構生成一個DOM樹然后加上CSS樣式生成一個渲染樹，如果CSS放在后面可能頁面會出現閃跳的感覺，或者是白屏或者布局混亂樣式很丑直到CSS加載完成。js非阻塞加載解決方案也有，1是用defer標簽，2是用createElement來動態生成，但是這樣有一個問題就是加載順序在IE下不一定會是按代碼寫的順序來加載，可能會影響到依賴項，有些文件就是必須在另一個文件前引用。火狐跟opera是按順序加載的，3是用ajax加載，也是非阻塞似的但是這種方法不支持CDN。 - 白屏問題：在IE低版本中的一些情況下（新窗口打開，重新加載，作為主頁打開）會出現，原因是低版本的IE是要等待css加載成功后才會對HTML進行渲染和展示。所以如果把css樣式放在底部，就會出現白屏問題。（如果使用@import加載樣式，即使css樣式在頭部，也可能會出現白屏問題）。解決方法是把css樣式放在head標簽中，并且避免使用@import。
FOUC：除了IE瀏覽器，大部分瀏覽器都是先對HTML進行渲染和展示，在等待css加載完成后重新對樣式進行修改。所以會出現FOUC。故如果把css樣式放在底部，則會一直出現FOUC。解決方法是把css樣式放在head標簽中（即頭部）。
綜上所述，一般而言，css放在head標簽中是最好的，無論什么瀏覽器，都可以解決FOUC或白屏的問題。
- async:加載和渲染后續文檔元素的過程和js的加載與執行并行進行（異步加載）；
- defer:加載后續文檔元素的過程和js的加載并行進行但js的執行要等所有元素解析完成之后，DOMContentloaded事件觸發之前完成。
- 解析HTML標簽，構建DOM樹。
- 解析css標簽，構建CSSOM樹。
- 把DOM和CSSOM組合成渲染樹（render tree）
- 在渲染樹的基礎上進行布局，計算每個節點的幾何結構。
- 把每個節點繪制到屏幕上。
