CSS和JS在網頁中的放置位置是怎樣的？

CSS和JS可以放置在頁面的任何位置，但是為了避免一些問題，一般將CSS放置在head標簽里面，而將JS放置在body標簽的最下面。

解釋白屏和FOUC

白屏：對于IE，如果將樣式表放置在底部，在某些場景（如：新窗口打開，刷新等）會出現頁面白屏，而不是內容逐步展開。
如果使用了@import，不管樣式表位于何處，都有可能出現白屏。
如果將JS放置在頂部，在加載JavaScript時，會禁用并發，并且阻止其他內容的加載，這時也會出現白屏。

FOUC：flash of unstyled content ，無樣式內容閃爍，逐步加載無樣式的內容，等CSS加載完成后頁面突然展現樣式。如果將樣式表放在底部：對于IE，在某些場景（如：點擊鏈接，輸入URL，從書簽進入等）會出現FOUC；對于Firefox，則一直表現出FOUC。

async和defer的作用是什么？有什么區別？

async和defer的作用是加載和渲染后續文檔元素的過程將和JS的加載與執行并行進行，即加載異步。

區別
async：文檔解析時，遇到async腳本，加載腳本，但是文檔解析不中斷，當腳本加載完成后，文檔停止解析，執行腳本，執行完成后，文檔繼續解析。
defer：文檔解析是，遇到defer腳本，加載腳本，同時文檔解析不中斷，但腳本加載完成后，不立刻執行，等到文檔解析完成后，再按順序執行腳本。

defer和async.png

簡述網頁的渲染機制

• 解析HTML標簽，生成DOM樹（文檔對象模型）
• 解析CSS標簽，生成CSSOM（CSS對象模型）
• 將DOM樹和CSSOM組合成渲染樹（render tree）
• 在渲染樹的基礎上對各個節點進行布局（layout）
• 將每個節點繪制帶屏幕上（paint）