1. CSS和JS在網頁中的放置順序是怎樣的？
CSS最好放入header中，即放在網頁內容（html標簽中包含的文字和圖片等）和js腳本之前
<link href="index.css" rel="stylesheet">S最好放在最后，即放在網頁內容（html標簽中包含的文字和圖片等）和js腳本之后
<script src="index.js"></script>
2. 解釋白屏和FOUC
- 白屏問題
- 白屏的根本原因是瀏覽器在渲染的時候沒有請求到或請求時間過長造成的。
- 瀏覽器對于圖片和CSS，在加載時會并發(fā)加載（比如一個域名下同時加載多個文件），瀏覽器對于JavaScript，在加載時會禁用并發(fā)，并且阻止其后的文件及組件的下載。所以將js放在頁面的頂部也可能會導致白屏。
- 不同瀏覽器的處理CSS和HTML的方式是不同的：
比如，IE、chrome瀏覽器的渲染機制，采用的是等CSS全部加載解析完后再渲染展示頁面。
Firefox則是在CSS未加載前先展示html的內容，等CSS加載后重新對樣式進行修改。
由此我們可以推斷出的結果是：
白屏的出現(xiàn)情況往往因為CSS樣式被置于底部（最后加載）,當新窗口打開,刷新等的時候，頁面會出現(xiàn)白屏。
如果使用 @import標簽,它引用的文件則會等頁面全部下載完畢再被加載，也可能出現(xiàn)白屏。
所以解決的辦法是css使用 link 標簽將樣式表放在頂部，防止白屏問題出現(xiàn)。白屏不是bug，而是由于瀏覽器的渲染機制。
- FOUC
FOUC (Flash of Unstyled Content) 無樣式內容閃爍：
如果把樣式放在底部，對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內容,等CSS加載后頁面才突然展現(xiàn)出樣式)。對于 Firefox 會一直表現(xiàn)出 FOUC 。 - 腳本會阻塞后面內容的呈現(xiàn)
- 腳本會阻塞其后組件的下載
對于圖片和CSS, 在加載時會并發(fā)加載(如一個域名下同時加載兩個文件)。但在加載 JavaScript 時,會禁用并發(fā),并且阻止其他內容的下載。
所以所以盡量把 JavaScript 放入頁面body底部。
3. async和defer的作用是什么？有什么區(qū)別
defer和async是script標簽的兩個屬性，用于在不阻塞頁面文檔解析的前提下，控制腳本的下載和執(zhí)行。
- 頁面的加載和渲染過程：
- 瀏覽器通過HTTP協(xié)議請求服務器，獲取HMTL文檔并開始從上到下解析，構建DOM；
- 在構建DOM過程中，如果遇到外聯(lián)的樣式聲明和腳本聲明，則暫停文檔解析，創(chuàng)建新的網絡連接，并開始下載樣式文件和腳本文件；
- 樣式文件下載完成后，構建CSSDOM；腳本文件下載完成后，解釋并執(zhí)行，然后繼續(xù)解析文檔構建DOM
- 完成文檔解析后，將DOM和CSSDOM進行關聯(lián)和映射，最后將視圖渲染到瀏覽器窗口，在這個過程中，腳本文件的下載和執(zhí)行是與文檔解析同步進行，也就是說，它會阻塞文檔的解析，如果控制得不好，在用戶體驗上就會造成一定程度的影響。
所以我們需要清楚的了解和使用defer和async來控制外部腳本的執(zhí)行。
- 作用
defer：用于開啟新的線程下載腳本文件，并使腳本在文檔解析完成后執(zhí)行。
async：新增屬性，用于異步下載腳本文件，下載完畢立即解釋執(zhí)行代碼。
- 區(qū)別
<script src="script.js"></script>
沒有 defer 或 async，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續(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解析成樹形的數據結構；輸出的樹，也就是解析樹，是由DOM元素及屬性節(jié)點組成的。DOM是文檔對象模型的縮寫，它是html文檔的對象表示，作為html元素的外部接口供js等調用。
CSSOM
CSS Object Model,瀏覽器將CSS解析成樹形的數據結構
Render Tree
DOM和CSSOM合并后生成Render Tree
Layout
計算出Render Tree每個節(jié)點的具體位置
Painting
通過顯卡，將Layout后的節(jié)點內容分別呈現(xiàn)到屏幕上
具體的流程：
當我們的瀏覽器獲得html文件后，會自上而下的加載，并在加載過程中進行解析和渲染。
加載說的是獲取資源文件的過程，如果在加載過程中，遇到外部css文件盒圖片，瀏覽器會另外發(fā)出一個請求，來獲取css文件盒相應的圖片，這個請求是異步的，并不會影響html文件。
遇到JavaScript文件，html文件會刮起渲染的線程，等待JavaScript加載完畢后，html文件再繼續(xù)渲染。
因為javascript可能會修改DOM，導致后續(xù)的html資源白白加載，所以html必須等待javascript文件加載完畢后，再繼續(xù)渲染。這也就是為什么javascript文件要寫在底部body標簽前的原因。
html的渲染過程就是將html代碼按照深度優(yōu)先遍歷來生成DOM樹。
css文件下載完后也會進行渲染，生成相應的CSSOM。
當所有的css文件下載完且所有的CSSOM構建結束后，就會和DOM一起生成Render Tree。
瀏覽器就會進入Layout環(huán)節(jié)，將所有的節(jié)點位置計算出來。
通過Painting環(huán)節(jié)將所有的節(jié)點內容呈現(xiàn)到屏幕上。
常規(guī)流程
- 瀏覽器下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時進行的。
- 在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（并不是說所有相關聯(lián)的元素都已經下載完）。
- 如果遇到語義解釋性的標簽嵌入文件（JS腳本，CSS樣式），那么此時IE的下載過程會啟用單獨連接進行下載。
- 并且在下載后進行解析，解析過程中，停止頁面所有往下元素的下載。
樣式表在下載完成后，將和以前下載的所有樣式表一起進行解析，解析完成后，將對此前所有元素（含以前已經渲染的）重新進行渲染。
JS、CSS中如有重定義，后定義函數將覆蓋前定義函數。
瀏覽器的主要組件包括：
用戶界面－包括地址欄、后退/前進按鈕、書簽目錄等，也就是你所看到的除了用來顯示你所請求頁面的主窗口之外的其他部分。
瀏覽器引擎－用來查詢及操作渲染引擎的接口。
渲染引擎－用來顯示請求的內容，例如，如果請求內容為html，它負責解析html及css，并將解析后的結果顯示出來。
網絡－ 用來完成網絡調用，例如http請求，它具有平臺無關的接口，可以在不同平臺上工作。
UI后端－用來繪制類似組合選擇框及對話框等基本組件，具有不特定于某個平臺的通用接口，底層使用操作系統(tǒng)的用戶接口。
JS解釋器－用來解釋執(zhí)行JS代碼。
數據存儲－屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數據，HTML5定義了web database
技術（localstorage），這是一種輕量級完整的客戶端存儲技術
