CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
- CSS應(yīng)該放在頁面頂部的head標(biāo)簽中
由于Render Tree是由DOM樹和CSSOM樹組合成的，html頁面需要等到CSS解析完后才能完成渲染缰盏，所以CSS應(yīng)放在head標(biāo)簽內(nèi)抠蚣，優(yōu)先下載解析，以避免頁面元素由于樣式缺失造成瞬間的白頁或者給用戶閃爍感懒棉。
- JS應(yīng)該放在body的底部
因?yàn)闉g覽器需要一個(gè)穩(wěn)定的dom樹結(jié)構(gòu)巷懈，而且js中很有可能有代碼直接改變了dom樹結(jié)構(gòu)该抒，瀏覽器為了防止出現(xiàn)js修改dom樹，需要重新構(gòu)建dom樹的情況顶燕，所以就會(huì)阻塞其他的下載和呈現(xiàn)凑保。
將JavaScript放在head內(nèi)和body底部的區(qū)別也在于此，放在head里面割岛，由于瀏覽器發(fā)現(xiàn)head里面有JavaScript標(biāo)簽就會(huì)暫時(shí)停止其他渲染行為愉适，等待JavaScript下載并執(zhí)行完成才能接著往下渲染，而這個(gè)時(shí)候由于在head里面這個(gè)時(shí)候頁面是白的癣漆；如果將JavaScript放在頁面底部，render Tree已經(jīng)完成大部分剂买，所以此時(shí)頁面有內(nèi)容呈現(xiàn)惠爽，即使遇到JavaScript阻塞渲染癌蓖，也不會(huì)有白屏出現(xiàn) - 如果CSS和JS都在head標(biāo)簽內(nèi)，則應(yīng)將JS放在所有CSS的前面
JS的執(zhí)行有可能依賴最新樣式婚肆。比如租副，可能會(huì)有var width=$('#id').width，這意味著较性，JS代碼在執(zhí)行前用僧，瀏覽器必須保證在此JS之前的所有CSS（無論外鏈還是內(nèi)嵌）都已下載和解析完成。
把JS放在CSS后會(huì)導(dǎo)致頁面阻塞赞咙，去等待CSS的下載责循。
另外如果要在head引入JS盡量將JS內(nèi)嵌。
解釋白屏和FOUC
當(dāng)把CSS樣式放在底部或者使用@import方式引入樣式攀操、或?qū)S放在頭部造成其他內(nèi)容阻塞加載時(shí)：
1.一些瀏覽器例如chrome,他的加載和渲染機(jī)制是等頭部的JS和底部的CSS全部加載解析完后再渲染展示頁面,而這個(gè)等待的時(shí)間就為白屏院仿。
2.另一些瀏覽器例如Firefox,他會(huì)在CSS未加載前先展現(xiàn)頁面,等css加載后再重繪一次,這就造成了FOUC (無樣式內(nèi)容閃爍)。
*所以為了避免這些問題,最好使用link標(biāo)簽將CSS樣式表放在文檔的head中速和，將JS放置在</body>標(biāo)簽之前歹垫、body標(biāo)簽中html內(nèi)容的后面。
async和defer的作用是什么颠放？有什么區(qū)別
- script ：瀏覽器會(huì)立加載并執(zhí)行相應(yīng)腳本排惨，阻塞后續(xù)文檔的加載。
- script async ：后續(xù)文檔的加載和渲染與js加載和執(zhí)行同步進(jìn)行碰凶，即異步執(zhí)行若贮。
async是一個(gè)亂序執(zhí)行方式，對(duì)它來說腳本的加載和執(zhí)行是緊緊挨著的痒留，所以不管你聲明的順序如何谴麦，只要它加載完了就會(huì)立刻執(zhí)行，async 對(duì)于應(yīng)用腳本的用處不大伸头，因?yàn)樗耆豢紤]依賴（哪怕是最低級(jí)的順序執(zhí)行）匾效，不過它對(duì)于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的。 -
script defer ：后續(xù)文檔的加載和渲染與js加載并行恤磷，js在后續(xù)文檔加載完畢后執(zhí)行面哼。
簡述網(wǎng)頁的渲染機(jī)制
1.解析CSS構(gòu)建CSSOM樹
2.把DOM和CSSOM組合成渲染樹（Render Tree）
3.在渲染樹的基礎(chǔ)上進(jìn)行布局，計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)（Layout Tree）
4.把每個(gè)節(jié)點(diǎn)繪制到屏幕上（Painting）
