1匾委，CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的需忿？
網(wǎng)站加載的整個(gè)完整過(guò)程是：1诅炉、首先瀏覽器從服務(wù)器接收到html代碼蜡歹，然后開(kāi)始解析html。2涕烧、構(gòu)件DOM樹(shù)（根據(jù)Html代碼自頂向下進(jìn)行構(gòu)件）月而，并且在同時(shí)構(gòu)件渲染樹(shù)。3议纯、遇到j(luò)s文件加載執(zhí)行父款，將阻塞DOM樹(shù)的構(gòu)建，遇到css文件瞻凤，將阻塞渲染樹(shù)的構(gòu)建憨攒。（script標(biāo)簽中的defer屬性：構(gòu)建DOM樹(shù)的過(guò)程和js文件的加載異步（并行）進(jìn)行，但是Js文件執(zhí)行需要在DOM樹(shù)構(gòu)建完成之后阀参。
script標(biāo)簽中的async屬性：構(gòu)建DOM樹(shù)肝集、渲染樹(shù)的過(guò)程和js文件的加載和執(zhí)行異步（并行）進(jìn)行。）
從以上過(guò)程可以知道蛛壳，當(dāng)Js文件放在head中時(shí)杏瞻，瀏覽器構(gòu)建DOM樹(shù)的時(shí)候遇到Js文件加載會(huì)阻塞，也就是說(shuō)衙荐，瀏覽器不會(huì)加載body中的標(biāo)簽捞挥，一旦這個(gè)Js文件的數(shù)量和內(nèi)容都比較大，那么就會(huì)造成剛剛遇到的情況忧吟，就不會(huì)給用戶一個(gè)十分良好的可視化回饋砌函，而在前端開(kāi)發(fā)中，給予用戶的可視化回饋是十分重要的瀑罗。
綜上胸嘴，script標(biāo)簽最好放在</body>標(biāo)簽的前面 雏掠，因?yàn)榉旁谒衎ody中的后面就不會(huì)出現(xiàn)網(wǎng)頁(yè)加載時(shí)出現(xiàn)空白的情況斩祭，可以持續(xù)的給用戶提供視覺(jué)反饋，同時(shí)在有些情況下乡话，會(huì)降低錯(cuò)誤的發(fā)生摧玫。
而css標(biāo)簽應(yīng)該放在<head></head>標(biāo)簽之間，因?yàn)槿绻旁?lt;/body>標(biāo)簽的前面绑青，那么當(dāng)DOM樹(shù)構(gòu)建完成了诬像，渲染樹(shù)才構(gòu)建，那么當(dāng)渲染樹(shù)構(gòu)建完成闸婴，瀏覽器不得不在重新渲染整個(gè)頁(yè)面坏挠，這樣就造成了資源的浪費(fèi)，效率不高邪乍。
2降狠，解釋白屏和FOUC
白屏:
首先要了解一下chrome和IE瀏覽器的渲染機(jī)制对竣。
1.解析HTML標(biāo)簽構(gòu)建DOM樹(shù)；
2.解析CSS構(gòu)建CSSOM樹(shù)榜配；
3.把這兩者組合成渲染樹(shù)否纬，根據(jù)渲染樹(shù)進(jìn)行布局，計(jì)算每個(gè)節(jié)點(diǎn)蛋褥，再繪制到屏幕上临燃。
如果把樣式放在文檔底部,瀏覽器會(huì)等HTML和CSS完全加載完成之后再繪制到屏幕上去，譬如我們打開(kāi)某些國(guó)外的網(wǎng)站可能出現(xiàn)加載時(shí)間過(guò)長(zhǎng)烙心，頁(yè)面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)膜廊。
FOUC:
如果把樣式放在底部,對(duì)于FireFox瀏覽器，會(huì)逐步加載無(wú)樣式的內(nèi)容淫茵，等CSS加載完成之后突然展現(xiàn)樣式溃论。
這是由于FireFox的渲染邏輯是解析HTML就會(huì)直接畫到頁(yè)面上，這時(shí)你會(huì)看到?jīng)]有樣式的內(nèi)容痘昌，CSS再通過(guò)不斷的解析將頁(yè)面重繪一遍钥勋，也就是閃爍一下突然展現(xiàn)樣式，這就是FOUC辆苔。
3算灸，async和defer的作用是什么？有什么區(qū)別
作用
defer：用于開(kāi)啟新的線程下載腳本文件驻啤，并使腳本在文檔解析完成后執(zhí)行菲驴。
async：新增屬性，用于異步下載腳本文件骑冗，下載完畢立即解釋執(zhí)行代碼赊瞬。
區(qū)別
一、<script src="script.js"></script>
沒(méi)有 defer 或 async贼涩，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本巧涧，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說(shuō)不等待后續(xù)載入的文檔元素遥倦，讀到就加載并執(zhí)行谤绳。
二、<script async src="script.js"></script>
有 async袒哥，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）缩筛。
三、<script defer src="myscript.js"></script>
有 defer堡称，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步）瞎抛，但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成却紧。
4桐臊，簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制
上圖為主流兩種主流內(nèi)核的渲染主流程
雖然 Webkit 和 Gecko 使用的術(shù)語(yǔ)略有不同钞艇，但整體流程是基本相同的。
Gecko 將視覺(jué)格式化元素組成的樹(shù)稱為“框架樹(shù)”豪硅。每個(gè)元素都是一個(gè)框架哩照。Webkit 使用的術(shù)語(yǔ)是“呈現(xiàn)樹(shù)”，它由“呈現(xiàn)對(duì)象”組成懒浮。對(duì)于元素的放置飘弧，Webkit 使用的術(shù)語(yǔ)是“布局”，而 Gecko 稱之為“重排”砚著。對(duì)于連接 DOM 節(jié)點(diǎn)和可視化信息從而創(chuàng)建呈現(xiàn)樹(shù)的過(guò)程次伶，Webkit 使用的術(shù)語(yǔ)是“附加”。有一個(gè)細(xì)微的非語(yǔ)義差別稽穆，就是 Gecko 在 HTML 與 DOM 樹(shù)之間還有一個(gè)稱為“內(nèi)容槽”的層冠王，用于生成 DOM 元素。
根據(jù)上圖舌镶，依次介紹每一步
Html柱彻、Style Sheets、Script加載
當(dāng)我們的瀏覽器獲得html文件后餐胀，會(huì)自上而下的加載哟楷，并在加載過(guò)程中進(jìn)行解析和渲染。 加載說(shuō)的就是獲取資源文件的過(guò)程否灾，如果在加載的過(guò)程中卖擅，遇到外部css文件和圖片，瀏覽器會(huì)另外發(fā)出一個(gè)請(qǐng)求墨技，來(lái)獲取css文件和相應(yīng)的圖片惩阶，這個(gè)請(qǐng)求是異步的，并不會(huì)影響html文件扣汪。 但是如果遇到j(luò)avascript文件断楷，html文件會(huì)掛起渲染的線程，等待javascript加載完畢后私痹，html文件再繼續(xù)渲染脐嫂。
為什么html需要等待javascript呢？因?yàn)閖avascript可能會(huì)修改DOM紊遵，導(dǎo)致后續(xù)的html資源白白加載，所以html必須等待javascript文件加載完畢后侥蒙，再繼續(xù)渲染暗膜。這也就是為什么javascript文件要寫在底部body標(biāo)簽前的原因。構(gòu)造樹(shù)
html的渲染過(guò)程就是將html代碼按照深度優(yōu)先遍歷來(lái)生成DOM樹(shù)鞭衩。 css文件下載完后也會(huì)進(jìn)行渲染学搜，生成相應(yīng)的CSSOM娃善。 當(dāng)所有的css文件下載完且所有的CSSOM構(gòu)建結(jié)束后，就會(huì)和DOM一起生成Render TreeDOM: Document Object Model瑞佩，瀏覽器將HTML解析成樹(shù)形的數(shù)據(jù)結(jié)構(gòu)聚磺，簡(jiǎn)稱DOMCSSOM: CSS Object Model，瀏覽器將CSS解析成樹(shù)形的數(shù)據(jù)結(jié)構(gòu)炬丸，簡(jiǎn)稱CSSOM瘫寝。Render Tree: DOM和CSSOM合并后生成Render Tree，如下圖：
- layout和reflow
計(jì)算每個(gè)Frame（也就是每個(gè)Element）的位置稠炬，這又叫l(wèi)ayout和reflow過(guò)程焕阿。
Repaint——屏幕的一部分要重畫，比如某個(gè)CSS的背景色變了首启。但是元素的幾何尺寸沒(méi)有變暮屡。
Reflow——意味著元件的幾何尺寸變了，我們需要重新驗(yàn)證并計(jì)算Render Tree毅桃。是Render Tree的一部分或全部發(fā)生了變化褒纲。這就是Reflow，或是Layout钥飞。（HTML使用的是flow based layout外厂，也就是流式布局，所以代承，如果某元件的幾何尺寸發(fā)生了變化汁蝶，需要重新布局，也就叫reflow）reflow 會(huì)從<html>這個(gè)root frame開(kāi)始遞歸往下论悴，依次計(jì)算所有的結(jié)點(diǎn)幾何尺寸和位置掖棉，在reflow過(guò)程中，可能會(huì)增加一些frame膀估，比如一個(gè)文本字符串必需被包裝起來(lái)幔亥。
