1、CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
css樣式放在head中。
js放置在body標(biāo)簽內(nèi)的最后，script標(biāo)簽內(nèi)。外鏈用<script src=""></script>，內(nèi)部的用<script></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標(biāo)題</title>
<link href="index.css" rel="stylesheet">
</head>
<body>
<script src="index.js"></script>
</body>
</html>
2、白屏問題
解答：如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)
如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏。
因?yàn)槟_本會(huì)阻塞后面內(nèi)容的呈現(xiàn)和其后組件的下載
對(duì)于圖片和CSS，在加載時(shí)會(huì)并發(fā)加載（如一個(gè)域名下同時(shí)加載兩個(gè)文件）。但在加載JavaScript 時(shí)，會(huì)禁用并發(fā)，并且阻止其他內(nèi)容的下載。所以把JavaScript放入頁面頂部也會(huì)導(dǎo)致白屏現(xiàn)象。
關(guān)于白屏,其實(shí)是因?yàn)闉g覽器在渲染的時(shí)候請(qǐng)求時(shí)間過長導(dǎo)致的，比如Chrome的渲染流程大致是HTML-->Dom-->Css-->Cssom-->Render Tree-->進(jìn)行計(jì)算-->painting最終才是我們看到的網(wǎng)頁界面，但是如果你是在一些國外的網(wǎng)站，或者被墻的地方進(jìn)行反問，瀏覽器就回一直現(xiàn)實(shí)它的加載動(dòng)作而沒有最終頁面，也就網(wǎng)頁響應(yīng)時(shí)間過長而導(dǎo)致的白屏，另一種情況就是當(dāng)我門使用@import(),屬性的時(shí)候也可能導(dǎo)致瀏覽器渲染不及時(shí)，又或者我們把標(biāo)簽放在了body的底部位置，都可能導(dǎo)致不及時(shí)的現(xiàn)象.
3、FOUC無樣式內(nèi)容閃爍
FOUC無樣式內(nèi)容閃爍如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書簽進(jìn)入等),會(huì)出現(xiàn)FOUC現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式).對(duì)于Firefox會(huì)一直表現(xiàn)出 FOUC。
4、async和defer的作用是什么？有什么區(qū)別
答:首先，如果不使用async和defer name瀏覽器的當(dāng)加載到scrpit標(biāo)簽的時(shí)候會(huì)重上到下進(jìn)行加載，并在加載DOM的內(nèi)容之前進(jìn)行加載.也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）.async不保證順序
有 defer，如果給script標(biāo)簽添加了defer屬性，即使js放在head里面，它也會(huì)在HTML頁面解析完畢之后再執(zhí)行，也就是類似于把這個(gè)js放在了頁面底部。簡單來說就是等頁面的html和css加載完畢之后再加載js。 defer腳本延遲到文檔解析和顯示后執(zhí)行，有順序
5、簡述網(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）。
