推薦將CSS放置于<head>標(biāo)簽中
首先，我們必須了解瀏覽器的渲染機(jī)制
如上圖趟据，以Chrome队萤、Safari等瀏覽器所用渲染內(nèi)核webkit為例油吭，我們來解釋一下瀏覽器的渲染邏輯：
1.用戶輸入U(xiǎn)RL下愈，向服務(wù)器請(qǐng)求數(shù)據(jù)
2.下載并解析HTML文件纽绍，形成DOM樹【DOM Tree】
3.下載并解析CSS文件，解析出的是樣式規(guī)則【即標(biāo)簽的顏色势似、邊框之類】
4.DOM樹和樣式規(guī)則一起構(gòu)建成attachment拌夏，在結(jié)合layout【布局】形成呈現(xiàn)樹【render tree】僧著，此時(shí)瀏覽器就可以把內(nèi)容繪制到瀏覽器上用于展示了
尤其要注意的是在第二步和第三步中，文件是一個(gè)個(gè)開始下載的障簿，無需等待DOM樹構(gòu)建完畢就可以繼續(xù)后續(xù)操作盹愚，樣式的呈現(xiàn)也是解析一行HTML代碼，看是否有css樣式規(guī)則站故，有就加載出來皆怕，沒有就繼續(xù)解析下一行HTML代碼，在《瀏覽器的工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘》一文中作者的描述是
這是一個(gè)漸進(jìn)的過程世蔗。為達(dá)到更好的用戶體驗(yàn)端逼，呈現(xiàn)引擎會(huì)力求盡快將內(nèi)容顯示在屏幕上。它不必等到整個(gè) HTML 文檔解析完畢之后污淋，就會(huì)開始構(gòu)建呈現(xiàn)樹【render tree】和設(shè)置布局【layout】。在不斷接收和處理來自網(wǎng)絡(luò)的其余內(nèi)容的同時(shí)余掖，呈現(xiàn)引擎會(huì)將部分內(nèi)容解析并顯示出來寸爆。
因此，若是不將css置于HTML的頂部盐欺，依照上述特性赁豆，會(huì)導(dǎo)致如下后果
1.在未解析到前端工程師寫好的css時(shí)，和dom樹結(jié)合的樣式規(guī)則是瀏覽器的默認(rèn)樣式
2.在后續(xù)又解析到前端工程師寫好的css時(shí)冗美，由于產(chǎn)生樣式覆蓋魔种，頁面可能會(huì)產(chǎn)生FOUC現(xiàn)象【Flash of Unstyled Content無樣式內(nèi)容閃爍】
3.若是css處于HTML的文件底部，近乎等同于是說dom已經(jīng)構(gòu)建完畢粉洼，若是dom樹過于復(fù)雜龐大节预，用戶等待時(shí)間會(huì)過長(zhǎng)，會(huì)出現(xiàn)白屏現(xiàn)象
參考文獻(xiàn)
https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/
推薦將JS放置于<body>標(biāo)簽的底部
首先我們必須要知道JavaScript在HTML中的兩個(gè)特征
1.阻塞后面內(nèi)容的呈現(xiàn)
2.阻塞其后組件的下載
從上圖中我們可以看到一個(gè)非常有趣的現(xiàn)象属韧，每一個(gè)js文件下載之后安拟，后面都會(huì)有一段空白——code executing【代碼執(zhí)行】，因此每個(gè)js文件的阻塞時(shí)間實(shí)際上是下載時(shí)間+執(zhí)行時(shí)間宵喂。
所以糠赦，若是不將js置于<body>的底部，會(huì)導(dǎo)致如下后果
1.我們都知道的是锅棕，js文件里有很多例如document.write()拙泽、createElement等語句，這些語句會(huì)直接影響dom樹的構(gòu)建和css樣式規(guī)則的解析裸燎，若是js文件內(nèi)有大量類似于上述語句顾瞻，可能會(huì)產(chǎn)生大量bug
2.若是js文件過大，js文件下載和執(zhí)行的時(shí)間會(huì)大大增長(zhǎng)顺少，此時(shí)瀏覽器必須要等待這段時(shí)間結(jié)束才能進(jìn)行后續(xù)渲染朋其，用戶此時(shí)看到的網(wǎng)頁將是一片空白王浴，即俗稱白屏現(xiàn)象
使用defer或async解決將js置于HTML頂部產(chǎn)生的不良后果
1.async
作用：加載和渲染后續(xù)文檔元素的過程將和script.js 的加載與執(zhí)行并行進(jìn)行（異步），但是無法保證順序
2.defer
作用：加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步）梅猿，但 script.js 的執(zhí)行要在所有元素解析完成之后氓辣，DOMContentLoaded 事件觸發(fā)之前完成，腳本延遲到文檔解析和顯示后執(zhí)行袱蚓，有順序钞啸。
