1. CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的？
- 將css放在頂部
一般來(lái)說(shuō)應(yīng)該放在網(wǎng)頁(yè)頭部<head></head>之間,用<style></style>定義,也可以放在一個(gè)單獨(dú)的文件(文件后綴名為.css),然后在網(wǎng)頁(yè)頭部用<link>引用，如<link href="/css/main.css" rel="stylesheet" type="text/css">
當(dāng)然，由于瀏覽器對(duì)HTML代碼格式的容錯(cuò)性,你放在網(wǎng)頁(yè)的任何地方定義都行。最好使用<link>標(biāo)簽把css文件放在<head>中，把JS放在<script>標(biāo)簽中。
如果CSS放在后面可能頁(yè)面會(huì)出現(xiàn)閃跳的感覺(jué)，或者是白屏或者布局混亂直到CSS加載完成。 - JS最好放在底部
對(duì)于Javascript來(lái)說(shuō)，因?yàn)樗趫?zhí)行過(guò)程中會(huì)阻塞頁(yè)面的渲染，所以,最好不要放在頂部，我們要把它放在頁(yè)面的結(jié)尾。
2. 解釋白屏和FOUC
- 1.如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(新窗口打開(kāi),刷新等)頁(yè)面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)。
2.如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏。
3.JavaScript 放入頁(yè)面頂部，腳本會(huì)阻塞后面內(nèi)容的呈現(xiàn)也會(huì)導(dǎo)致白屏現(xiàn)象。 - FOUC (Flash of Unstyled Content) 無(wú)樣式內(nèi)容閃爍
如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書(shū)簽進(jìn)入等),會(huì)出現(xiàn) FOUC 現(xiàn)象(逐步加載無(wú)樣式的內(nèi)容,等CSS加載后頁(yè)面突然展現(xiàn)樣式).對(duì)于 Firefox 會(huì)一直表現(xiàn)出 FOUC 。
3. async和defer的作用是什么？有什么區(qū)別。
<script src="script.js"></script>
沒(méi)有 defer 或 async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說(shuō)不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行，腳本會(huì)阻塞后面內(nèi)容的呈現(xiàn)。<script async src="script.js"></script>
有 async，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。標(biāo)記為async的腳本并不保證按照指定它們的先后順序執(zhí)行。對(duì)它來(lái)說(shuō)腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會(huì)立刻執(zhí)行。async 對(duì)于應(yīng)用腳本的用處不大，因?yàn)樗耆豢紤]依賴(lài)（哪怕是最低級(jí)的順序執(zhí)行），不過(guò)它對(duì)于那些可以不依賴(lài)任何腳本或不被任何腳本依賴(lài)的腳本來(lái)說(shuō)卻是非常合適的。<script defer src="script.js"></script>
有 defer，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成，它是按照加載順序執(zhí)行腳本的。二者區(qū)別
兩者的差別在于腳本下載完之后何時(shí)執(zhí)行，顯然 defer 是最接近我們對(duì)于應(yīng)用腳本加載和執(zhí)行的要求的。defer是立即下載但延遲執(zhí)行，加載后續(xù)文檔元素的過(guò)程將和腳本的加載并行進(jìn)行（異步），但是腳本的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。async是立即下載并執(zhí)行，加載和渲染后續(xù)文檔元素的過(guò)程將和js腳本的加載與執(zhí)行并行進(jìn)行（異步）。
4. 簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制
1.解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹(shù)，瀏覽器按從上到下的順序掃描解析文檔。
-
DOM，即文檔對(duì)象模型（Document Object Model）。DOM樹(shù)，即文檔內(nèi)所有節(jié)點(diǎn)構(gòu)成的一個(gè)樹(shù)形結(jié)構(gòu)。
2.解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹(shù)。
- CSSOM，即CSS對(duì)象模型（CSS Object Model）。CSSOM樹(shù)，與DOM樹(shù)結(jié)構(gòu)相似，只是另外為每一個(gè)節(jié)點(diǎn)關(guān)聯(lián)了樣式信息。
3.把 DOM 和 CSSOM 組合成 渲染樹(shù) (render tree)
-
渲染樹(shù)，代表一個(gè)文檔的視覺(jué)展示，瀏覽器通過(guò)它將文檔內(nèi)容繪制在瀏覽器窗口，展示給用戶(hù)，它由按順序展示在屏幕上的一系列矩形對(duì)象組成，這些矩形對(duì)象都帶有字體，顏色和尺寸，位置等視覺(jué)樣式屬性。對(duì)于這些矩對(duì)象，F(xiàn)ireFox稱(chēng)之為框架（frame），Webkit瀏覽器稱(chēng)之為渲染對(duì)象（render object, renderer），后文統(tǒng)稱(chēng)為渲染對(duì)象。
4.在渲染樹(shù)的基礎(chǔ)上進(jìn)行布局（Layout）, 計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)
- 通過(guò)渲染樹(shù)中渲染對(duì)象的信息，計(jì)算出每一個(gè)渲染對(duì)象的位置和尺寸，將其安置在瀏覽器窗口的正確位置，而有些時(shí)候我們會(huì)在文檔布局完成后對(duì)DOM進(jìn)行修改，這時(shí)候可能需要重新進(jìn)行布局，也可稱(chēng)其為回流（reflow,relayout），本質(zhì)上還是一個(gè)布局的過(guò)程，每一個(gè)渲染對(duì)象都有一個(gè)布局或者回流方法，實(shí)現(xiàn)其布局或回流。
5.把每個(gè)節(jié)點(diǎn)繪制到屏幕上 (painting)
- 瀏覽器UI組件將遍歷渲染樹(shù)并調(diào)用渲染對(duì)象的繪制（paint）方法，將內(nèi)容展現(xiàn)在屏幕上，也有可能在之后對(duì)DOM進(jìn)行修改，需要重新繪制渲染對(duì)象，也就是重繪，繪制和重繪的關(guān)系可以參考布局和回流的關(guān)系。
