1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
css放在頂部head標(biāo)簽內(nèi)达址；js會(huì)阻塞后面內(nèi)容的展現(xiàn)并阻止其后的下載，所以放置在body標(biāo)簽最后。
2.解釋白屏和FOUC
白屏問題
- 如果把樣式放在底部歇式，在某些場景（新窗口打開，刷新等）頁面會(huì)出現(xiàn)白屏胡野。因?yàn)闉g覽器渲染是等html和css全部加載完成后再繪制到瀏覽器上材失，樣式放在底部加載時(shí)間會(huì)過長，不是逐步展現(xiàn)硫豆，所以出現(xiàn)白屏龙巨。
- 如果使用@import 標(biāo)簽，即使css放入link熊响，并且放在頭部旨别，也可能出現(xiàn)白屏。
- 把js放在頂部也會(huì)出現(xiàn)白屏汗茄。
FOUC (無樣式內(nèi)容閃爍）
如果樣式放在底部秸弛，對于IE瀏覽器，在某些場景下（點(diǎn)擊鏈接洪碳，輸入U(xiǎn)RL递览，使用書簽進(jìn)入等），會(huì)出現(xiàn)FOUC現(xiàn)象（逐步加載無樣式的內(nèi)容瞳腌，等css加載后頁面突然展現(xiàn)樣式的現(xiàn)象）绞铃，對于Firfox會(huì)一直變現(xiàn)出FOUC。出現(xiàn)原理：當(dāng)樣式表加載要晚于其渲染的元素加載時(shí)嫂侍，會(huì)先出現(xiàn)沒有樣式的內(nèi)容儿捧，等到加載到樣式表時(shí)，瀏覽器會(huì)重新渲染次頁面挑宠，從而出現(xiàn)FOUC現(xiàn)象菲盾。
3.async和defer的作用是什么？有什么區(qū)別
async和defer能使加載后續(xù)文檔元素的過程和script.js的加載并行進(jìn)行（異步）痹栖。
區(qū)別：
defer：腳本的執(zhí)行要在所有元素解析完成之后亿汞，DOMContenloaded時(shí)間出發(fā)之前。有順序
async:不保證順序
4.簡述網(wǎng)頁的渲染機(jī)制
1.解析HTML標(biāo)簽揪阿，構(gòu)建DOM樹疗我；
2.解析css標(biāo)簽，構(gòu)建CSSOM樹南捂；
3.把DOM樹和CSSOM樹組合成渲染樹（render tree）吴裤；
4.在渲染樹的基礎(chǔ)上進(jìn)行布局，計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)溺健；
5.把每個(gè)節(jié)點(diǎn)繪制到屏幕上（painting）麦牺。
5
<a href="http://www.reibang.com/p/eaf952815f07">博客</a>
