1. CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
CSS最好放入header中，即放在網(wǎng)頁內(nèi)容（html標(biāo)簽中包含的文字和圖片等）和js腳本之前
<link href="index.css" rel="stylesheet">S最好放在最后函筋，即放在網(wǎng)頁內(nèi)容（html標(biāo)簽中包含的文字和圖片等）和js腳本之后
<script src="index.js"></script>
2. 解釋白屏和FOUC
- 白屏問題
- 白屏的根本原因是瀏覽器在渲染的時候沒有請求到或請求時間過長造成的搀缠。
- 瀏覽器對于圖片和CSS缰泡，在加載時會并發(fā)加載（比如一個域名下同時加載多個文件），瀏覽器對于JavaScript弱左，在加載時會禁用并發(fā)窄陡，并且阻止其后的文件及組件的下載。所以將js放在頁面的頂部也可能會導(dǎo)致白屏拆火。
- 不同瀏覽器的處理CSS和HTML的方式是不同的：
比如跳夭，IE、chrome瀏覽器的渲染機制们镜，采用的是等CSS全部加載解析完后再渲染展示頁面币叹。
Firefox則是在CSS未加載前先展示html的內(nèi)容，等CSS加載后重新對樣式進行修改模狭。
由此我們可以推斷出的結(jié)果是：
白屏的出現(xiàn)情況往往因為CSS樣式被置于底部（最后加載）,當(dāng)新窗口打開,刷新等的時候颈抚，頁面會出現(xiàn)白屏。
如果使用 @import標(biāo)簽,它引用的文件則會等頁面全部下載完畢再被加載嚼鹉，也可能出現(xiàn)白屏贩汉。
所以解決的辦法是css使用 link 標(biāo)簽將樣式表放在頂部，防止白屏問題出現(xiàn)锚赤。白屏不是bug匹舞，而是由于瀏覽器的渲染機制。
- FOUC
FOUC (Flash of Unstyled Content) 無樣式內(nèi)容閃爍：
如果把樣式放在底部宴树，對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面才突然展現(xiàn)出樣式)策菜。對于 Firefox 會一直表現(xiàn)出 FOUC 。 - 腳本會阻塞后面內(nèi)容的呈現(xiàn)
- 腳本會阻塞其后組件的下載
對于圖片和CSS, 在加載時會并發(fā)加載(如一個域名下同時加載兩個文件)。但在加載 JavaScript 時,會禁用并發(fā),并且阻止其他內(nèi)容的下載又憨。
所以所以盡量把 JavaScript 放入頁面body底部翠霍。
3. async和defer的作用是什么？有什么區(qū)別
defer和async是script標(biāo)簽的兩個屬性蠢莺，用于在不阻塞頁面文檔解析的前提下寒匙，控制腳本的下載和執(zhí)行。
- 頁面的加載和渲染過程：
- 瀏覽器通過HTTP協(xié)議請求服務(wù)器躏将，獲取HMTL文檔并開始從上到下解析锄弱，構(gòu)建DOM；
- 在構(gòu)建DOM過程中祸憋，如果遇到外聯(lián)的樣式聲明和腳本聲明会宪，則暫停文檔解析，創(chuàng)建新的網(wǎng)絡(luò)連接蚯窥，并開始下載樣式文件和腳本文件掸鹅；
- 樣式文件下載完成后，構(gòu)建CSSDOM拦赠；腳本文件下載完成后巍沙，解釋并執(zhí)行，然后繼續(xù)解析文檔構(gòu)建DOM
- 完成文檔解析后荷鼠，將DOM和CSSDOM進行關(guān)聯(lián)和映射句携，最后將視圖渲染到瀏覽器窗口，在這個過程中允乐，腳本文件的下載和執(zhí)行是與文檔解析同步進行矮嫉，也就是說，它會阻塞文檔的解析牍疏，如果控制得不好敞临，在用戶體驗上就會造成一定程度的影響。
所以我們需要清楚的了解和使用defer和async來控制外部腳本的執(zhí)行麸澜。
- 作用
defer：用于開啟新的線程下載腳本文件挺尿，并使腳本在文檔解析完成后執(zhí)行。
async：新增屬性炊邦，用于異步下載腳本文件编矾，下載完畢立即解釋執(zhí)行代碼。
- 區(qū)別
<script src="script.js"></script>
沒有 defer 或 async馁害，瀏覽器會立即加載并執(zhí)行指定的腳本窄俏，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素碘菜，讀到就加載并執(zhí)行凹蜈。<script async src="script.js"></script>
有 async限寞，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行（異步）。<script defer src="myscript.js"></script>
有 defer仰坦，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行（異步）履植，但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成悄晃。
4. 瀏覽器的渲染機制
首先我們要了解幾個概念
DOM
Document Object Model,瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu)玫霎；輸出的樹，也就是解析樹妈橄，是由DOM元素及屬性節(jié)點組成的庶近。DOM是文檔對象模型的縮寫，它是html文檔的對象表示眷蚓，作為html元素的外部接口供js等調(diào)用鼻种。
CSSOM
CSS Object Model,瀏覽器將CSS解析成樹形的數(shù)據(jù)結(jié)構(gòu)
Render Tree
DOM和CSSOM合并后生成Render Tree
Layout
計算出Render Tree每個節(jié)點的具體位置
Painting
通過顯卡，將Layout后的節(jié)點內(nèi)容分別呈現(xiàn)到屏幕上
具體的流程：
當(dāng)我們的瀏覽器獲得html文件后沙热，會自上而下的加載普舆，并在加載過程中進行解析和渲染。
加載說的是獲取資源文件的過程校读，如果在加載過程中，遇到外部css文件盒圖片祖能，瀏覽器會另外發(fā)出一個請求歉秫，來獲取css文件盒相應(yīng)的圖片，這個請求是異步的养铸，并不會影響html文件雁芙。
遇到JavaScript文件，html文件會刮起渲染的線程钞螟，等待JavaScript加載完畢后兔甘，html文件再繼續(xù)渲染。
因為javascript可能會修改DOM鳞滨，導(dǎo)致后續(xù)的html資源白白加載洞焙，所以html必須等待javascript文件加載完畢后，再繼續(xù)渲染拯啦。這也就是為什么javascript文件要寫在底部body標(biāo)簽前的原因澡匪。
html的渲染過程就是將html代碼按照深度優(yōu)先遍歷來生成DOM樹。
css文件下載完后也會進行渲染褒链，生成相應(yīng)的CSSOM唁情。
當(dāng)所有的css文件下載完且所有的CSSOM構(gòu)建結(jié)束后，就會和DOM一起生成Render Tree甫匹。
瀏覽器就會進入Layout環(huán)節(jié)甸鸟，將所有的節(jié)點位置計算出來惦费。
通過Painting環(huán)節(jié)將所有的節(jié)點內(nèi)容呈現(xiàn)到屏幕上。
常規(guī)流程
- 瀏覽器下載的順序是從上到下抢韭，渲染的順序也是從上到下薪贫，下載和渲染是同時進行的。
- 在渲染到頁面的某一部分時篮绰，其上面的所有部分都已經(jīng)下載完成（并不是說所有相關(guān)聯(lián)的元素都已經(jīng)下載完）后雷。
- 如果遇到語義解釋性的標(biāo)簽嵌入文件（JS腳本，CSS樣式）吠各，那么此時IE的下載過程會啟用單獨連接進行下載臀突。
- 并且在下載后進行解析，解析過程中贾漏，停止頁面所有往下元素的下載候学。
樣式表在下載完成后，將和以前下載的所有樣式表一起進行解析纵散，解析完成后梳码，將對此前所有元素（含以前已經(jīng)渲染的）重新進行渲染。
JS伍掀、CSS中如有重定義掰茶，后定義函數(shù)將覆蓋前定義函數(shù)。
瀏覽器的主要組件包括：
用戶界面－包括地址欄蜜笤、后退/前進按鈕濒蒋、書簽?zāi)夸浀龋簿褪悄闼吹降某擞脕盹@示你所請求頁面的主窗口之外的其他部分把兔。
瀏覽器引擎－用來查詢及操作渲染引擎的接口沪伙。
渲染引擎－用來顯示請求的內(nèi)容，例如县好，如果請求內(nèi)容為html围橡，它負責(zé)解析html及css，并將解析后的結(jié)果顯示出來缕贡。
網(wǎng)絡(luò)－ 用來完成網(wǎng)絡(luò)調(diào)用翁授，例如http請求，它具有平臺無關(guān)的接口晾咪，可以在不同平臺上工作黔漂。
UI后端－用來繪制類似組合選擇框及對話框等基本組件，具有不特定于某個平臺的通用接口禀酱，底層使用操作系統(tǒng)的用戶接口炬守。
JS解釋器－用來解釋執(zhí)行JS代碼。
數(shù)據(jù)存儲－屬于持久層剂跟，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)减途，HTML5定義了web database
技術(shù)（localstorage）酣藻，這是一種輕量級完整的客戶端存儲技術(shù)
