一矮固、CSS和JS在網(wǎng)頁中的放置順序是怎樣的评雌？
推薦的放置順序是將css通過<link>鏈接引入，放在head標(biāo)簽內(nèi)部螟加；而JS放在body的底部徘溢。否則會(huì)出現(xiàn)白屏或者FOUC。
html引入css有四種方法捆探。
1然爆、內(nèi)嵌式，就是把css的style放在標(biāo)簽內(nèi)部黍图；
例如：
<h1 style="font-size: 20px;"></h1>
2曾雕、內(nèi)部引用，把樣式寫在<style>樣式</style>標(biāo)簽內(nèi)部助被，<style></style>寫在<heda>中剖张；
例如：
<style> h1 { font-size:20px; } </style>
3、外部引用揩环，外部引用有兩種方式搔弄，一是用過<link>標(biāo)簽鏈接；二是通過@import導(dǎo)入丰滑。
<link>標(biāo)簽放在<head></head>內(nèi)部顾犹；
例如：
<link rel="stylesheet" herf="style.css">
@impot是屬于 CSS，所以導(dǎo)入語句應(yīng)寫在 CSS 中褒墨，要注意的是導(dǎo)入語句應(yīng)寫在樣式表的開頭炫刷，否則無法正確導(dǎo)入外部文件；
例如：
@import url(style.css);
參考
二郁妈、解釋白屏和FOUC
首先出現(xiàn)這兩種情況的原因是：
1浑玛、link標(biāo)簽放在html底部，導(dǎo)致css最后下載噩咪。
2顾彰、使用@import引入css文件失晴，即使位置在html頂部。因?yàn)锧import是放在css的頂部拘央，同樣是在css中，當(dāng)解析css遇到@import书在，又會(huì)去下載@import引入的css灰伟，導(dǎo)致頁面組件下載時(shí)的過程較長(zhǎng)。
原因的機(jī)制是相同的儒旬，我們討論link標(biāo)簽放在html底部栏账。以Chrome和Firefox瀏覽器為例，這兩者內(nèi)核不同栈源，會(huì)出現(xiàn)不同的現(xiàn)象挡爵。
Chrome是把css解析成CSSOM樹，再去與html的DOM樹結(jié)合甚垦，最后繪制渲染書到顯顯示屏茶鹃。從用戶打開網(wǎng)頁到出現(xiàn)內(nèi)容這段時(shí)間，瀏覽器是沒有內(nèi)容顯示的艰亮，所以css下載相比于html解析晚闭翩，就會(huì)出現(xiàn)白屏。
另一個(gè)出現(xiàn)白屏的原因是將腳本放在html頂部迄埃。網(wǎng)頁文檔下載完成后疗韵，緊接著就開始下載網(wǎng)頁中的組件了（圖片、樣式表文件侄非、腳本）蕉汪，為了更快的顯示網(wǎng)頁內(nèi)容，瀏覽器會(huì)并行下載這些組件逞怨。但是下載腳本時(shí)者疤，并行下載是被禁用的。
腳本會(huì)阻塞后面內(nèi)容的呈現(xiàn)和腳本會(huì)阻塞其后組件的下載骇钦。也就是說宛渐，下載腳本時(shí)，瀏覽器不會(huì)啟動(dòng)其他的下載眯搭。因此瀏覽器會(huì)等待窥翩，以確保頁面能正確的布局。當(dāng)然并不所有的腳本都會(huì)使頁面出現(xiàn)白屏鳞仙，當(dāng)使用異步加載腳本時(shí)或者腳本放在html底部就會(huì)防止這種情況寇蚊。
Firefox是頁面逐步加載的，文字首先顯示棍好，然后是圖片仗岸。最后樣式表正確地下載并解析允耿。當(dāng)link放在底部，由于在文字加載時(shí)還沒有加載css扒怖，這時(shí)候html是以一種瀏覽器默認(rèn)的樣式顯示在屏幕较锡。等到css解析完成之后，再去與html的DOM樹結(jié)合一次盗痒，再一次渲染蚂蕴，最后出現(xiàn)再出現(xiàn)在屏幕上。所以從html內(nèi)容第一次出現(xiàn)在屏幕俯邓，到第二次出現(xiàn)骡楼，就會(huì)出現(xiàn)頁面閃爍。
當(dāng)把link放在html頂部稽鞭，就可以早早的下載css鸟整，節(jié)省加載時(shí)間。
三朦蕴、異步加載：async和defer的作用
<script src="script.js"></script>
沒有 defer 或 async篮条，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前吩抓，也就是說不等待后續(xù)載入的文檔元素兑燥，讀到就加載并執(zhí)行。
<script async src="script.js"></script>
有 async琴拧，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）降瞳。
<script defer src="script.js"></script>
有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步）蚓胸，但 script.js 的執(zhí)行要在所有元素解析完成之后挣饥，DOMContentLoaded 事件觸發(fā)之前完成。
四沛膳、簡(jiǎn)述網(wǎng)頁的渲染機(jī)制
1扔枫、渲染引擎解析html，并將html標(biāo)簽轉(zhuǎn)化為DOM樹節(jié)點(diǎn)锹安。
2短荐、渲染引擎解析外部或者style標(biāo)簽的樣式信息為CSSOM樹。
3叹哭、CSSOM樹和DOM 樹構(gòu)建渲染樹忍宋。這個(gè)時(shí)候的渲染樹是由一些包含有顏色和大小等屬性的矩形組成。他們將按照一定的順序顯示在屏幕上风罩。
4糠排、布局渲染樹，它將確定每個(gè)節(jié)點(diǎn)在屏幕上的確切坐標(biāo)超升。
5入宦、繪制渲染樹哺徊，即遍歷渲染樹，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)乾闰。
這個(gè)過程是逐步完成的落追，為了更好的用戶體驗(yàn)，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上涯肩，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局render樹淋硝。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)宽菜，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容。
參考資料
