CSS和JS在網(wǎng)頁中的放置順序是怎樣的淮腾？
一般情況下盏档，我們將CSS文件用link標(biāo)簽引入的方式般哼，放在Html文件開頭的head標(biāo)簽內(nèi)。如果使用@import導(dǎo)入钞楼，或放在Html底部喇闸，則可能出現(xiàn)瀏覽器白屏或無樣式內(nèi)容閃爍的情況；
而JS文件則放置在body標(biāo)簽?zāi)┪驳膕cript標(biāo)簽內(nèi)。因?yàn)榧虞dJS文件時(shí)燃乍，會(huì)禁止其它文件同步加載唆樊，如果將JS文件放在靠前的位置，會(huì)影響后續(xù)文件的加載進(jìn)度橘沥。
解釋白屏和FOUC
白屏：1窗轩、根據(jù)一般瀏覽器的渲染機(jī)制，如果我們將引入的CSS文件放在Html的末尾座咆，或使用@import的方式導(dǎo)入CSS文件痢艺，那么瀏覽器會(huì)先解析Html文件，再解析CSS文件介陶，如果在這個(gè)過程中文件較大堤舒，或網(wǎng)絡(luò)有一定的延遲，則可能在一段較長的時(shí)間內(nèi)屏幕上沒有任何內(nèi)容哺呜，我們稱之為白屏舌缤。2、如果我們將JS文件放置在head標(biāo)簽中引入某残，在加載JS的過程中国撵，會(huì)禁止其它文件同步加載，也會(huì)出現(xiàn)白屏玻墅。
FOUC介牙，即Flash of Unstyled Content，無樣式內(nèi)容閃爍澳厢。在FireFox一類的瀏覽器中环础，由于其本身特殊的解析機(jī)制，會(huì)先將解析出的Html標(biāo)簽內(nèi)容在不添加樣式的情況下顯示在頁面上剩拢，然后再解析CSS樣式线得，添加到Html中。其中Html無樣式內(nèi)容的展示可能只有很短的一段時(shí)間徐伐，我們稱之為無樣式內(nèi)容閃爍贯钩。
async和defer的作用是什么？有什么區(qū)別
對于普通的<script>標(biāo)簽办素，瀏覽器讀到標(biāo)簽就會(huì)立即加載并執(zhí)行指定的腳本魏保，不等后續(xù)載入的其它文檔元素。
如果標(biāo)簽內(nèi)有async摸屠，則加載和渲染后續(xù)文檔元素的過程將和JS文件的加載與執(zhí)行并行進(jìn)行（異步），且不保證各文件或腳本的加載和執(zhí)行順序粱哼。
如果標(biāo)簽內(nèi)有defer季二，則加載和渲染后續(xù)文檔元素的過程將和JS文件的加載與執(zhí)行并行進(jìn)行（異步），但JS文件的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成胯舷，也就是說能夠保證一定的加載和執(zhí)行順序刻蚯。
簡述網(wǎng)頁的渲染機(jī)制
1、當(dāng)我們打開一個(gè)網(wǎng)頁時(shí)桑嘶，瀏覽器會(huì)首先解析Html中的標(biāo)簽炊汹，構(gòu)建出網(wǎng)頁的整體框架；
2逃顶、其次讨便，瀏覽器會(huì)解析CSS文件中的各種樣式命令，以及Html中內(nèi)聯(lián)的樣式和行間樣式以政；
3霸褒、將Html和CSS相結(jié)合，組成渲染樹盈蛮；
4废菱、在渲染樹的基礎(chǔ)上布局，計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)抖誉；
5殊轴、把每個(gè)節(jié)點(diǎn)繪制到屏幕上。
