- 網(wǎng)頁一般由三個部分構(gòu)成厦凤，HTML ,CSS屯耸，JAVASCRIPT颜屠。其中HTML負(fù)責(zé)網(wǎng)頁的整體結(jié)構(gòu)统舀，CSS負(fù)責(zé)網(wǎng)頁的樣式更啄，也就是美化HTML纳令，這兩個部分構(gòu)成了一個靜態(tài)網(wǎng)頁送火，JAVASCRIPT則負(fù)責(zé)網(wǎng)頁上的一些動畫娘汞，以及與后端數(shù)據(jù)的交互部分歹茶。
CSS和JS在網(wǎng)頁中的放置位置
一般而言，因?yàn)镠TML是一種相對松散的文檔類型，同時瀏覽器的容錯性又非常高惊豺，所以CSS和JS可以放置在頁面上的任何位置燎孟，甚至可以放到<!DOCTYPE HTML>的外部。
但是在實(shí)際使用中尸昧，我們習(xí)慣上把CSS文件放到head標(biāo)簽內(nèi)部揩页，這是由瀏覽器的渲染機(jī)制決定的，因?yàn)榇蟛糠譃g覽器都是要等HTML和CSS加載完畢后才開始進(jìn)行網(wǎng)頁布局并最終繪制到瀏覽器窗口烹俗；JS則更加的苛刻爆侣，因?yàn)闉g覽器的解析器遇到JS腳本后會立刻開始執(zhí)行JS腳本，這樣就會阻塞HTML幢妄、CSS的解析兔仰，瀏覽器出現(xiàn)白屏，只有當(dāng)JS腳本執(zhí)行完畢蕉鸳，才會繼續(xù)后面文檔的渲染乎赴，所以我們一般把JS放到HTML文檔的尾部，這樣就不會出現(xiàn)白屏現(xiàn)象潮尝，用戶體驗(yàn)比較好榕吼。
白屏和FOUC（flash of unstyled content）
白屏和FOUC（無樣式內(nèi)容閃爍）其實(shí)是瀏覽器渲染機(jī)制所固有的特性
Webkit內(nèi)核的瀏覽器的渲染過程中頁面的繪制要等HTML和CSS都加載完畢才開始，所以在這個加載過程中瀏覽器會出現(xiàn)白屏現(xiàn)象勉失。
- 如果把樣式放在文檔底部羹蚣，對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)
- 如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏
- 對于圖片和CSS, 在加載時會并發(fā)加載(如一個域名下同時加載兩個文件). 但在加載 JavaScript 時,會禁用并發(fā),并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會導(dǎo)致白屏現(xiàn)象.
Gecko內(nèi)核的瀏覽器則是在加載過程中優(yōu)先渲染HTML部分，在CSS加載的時候再次進(jìn)行頁面的二次渲染乱凿，這樣渲染到頁面上的無樣式內(nèi)容時就會不斷的進(jìn)行頁面二次渲染顽素，無樣式內(nèi)容就會閃爍，這就是FOUC現(xiàn)象告匠。
- 如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點(diǎn)擊鏈接,輸入URL,使用書簽進(jìn)入等),會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式).對于 Firefox 會一直表現(xiàn)出 FOUC .
asynnc和defer的作用與區(qū)別
它們的作用主要是作用于script標(biāo)簽戈抄。
- 對于沒有這兩個關(guān)鍵字的腳本標(biāo)簽，瀏覽器會立即加載并執(zhí)行指定的腳本后专，即在渲染該script標(biāo)簽之下的文檔元素之前划鸽，不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行戚哎。
- 有了async后裸诽，加載和渲染后續(xù)文檔的過程會和腳本的 加載與執(zhí)行 同時進(jìn)行（異步）
- 如果是defer，加載和渲染后續(xù)文檔的過程將和腳本的 加載 同時進(jìn)行型凳，但是腳本的執(zhí)行要等到所有的后續(xù)元素解析完畢以后丈冬，DOMContentLoaded事件觸發(fā)之前完成。
*defer 和 async 的區(qū)別
- defer: 腳本延遲到文檔解析和顯示后執(zhí)行甘畅，有順序
- async: 不保證順序
*注意
- defer 屬性只被 IE 4 和 Firefox 3.5 更高版本的瀏覽器所支持埂蕊，所以它不是一個理想的跨瀏覽器解決方案往弓。在其他瀏覽器中，defer屬性會被直接忽略蓄氧，因此<script>標(biāo)簽會以默認(rèn)的方式處理函似，也就是說會造成阻塞。然而喉童，如果您的目標(biāo)瀏覽器支持的話撇寞，這仍然是個有用的解決方案。
- 在有 async 的情況下堂氯，JavaScript 腳本一旦下載好了就會執(zhí)行蔑担，所以很有可能不是按照原本的順序來執(zhí)行的。如果 JavaScript 腳本前后有依賴性咽白，使用 async 就很有可能出現(xiàn)錯誤啤握。
簡述網(wǎng)頁的渲染機(jī)制
- 解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
- 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎(chǔ)上進(jìn)行布局, 計算每個節(jié)點(diǎn)的幾何結(jié)構(gòu)
- 把每個節(jié)點(diǎn)繪制到屏幕上 (painting)
