一、CSS和JS在網(wǎng)頁中的放置順序是怎樣的？

• 首先頁面對于CSS的依賴很大，要是先加載HTML的話，頁面沒有CSS渲染的話將會面目全非，所以CSS必須在HTML之前，又因html都在body里面，因此css要想在他前面加載就放在head標(biāo)簽里面即可；
• 所有瀏覽器在下載 JS 的時候，會阻止一切其他活動，比如其他資源的下載，內(nèi)容的呈現(xiàn)等等。直到 JS 下載、解析、執(zhí)行完畢后才開始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容。所以一般會將JS放置在html的后面，即body的最底部；

二、解釋白屏和FOUC

瀏覽器在對于圖片和CSS, 在加載時會并發(fā)加載(如一個域名下同時加載兩個文件). 但在加載 JavaScript 時,會禁用并發(fā),并且阻止其他內(nèi)容的下載，不同的瀏覽器對于CSS和HTML的處理方式不同，有的是等待CSS加載完成之后，對HTML元素進(jìn)行渲染和展示（白屏問題）。有的是先對HTML元素進(jìn)行展示，然后等待CSS加載完成之后重新對樣式進(jìn)行修改（FOUC無樣式內(nèi)容閃爍）

• 如果把CSS樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)，如果使用 @import標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏。
• 如果把CSS樣式放在底部,對于IE瀏覽器,在某些場景下(點(diǎn)擊鏈接,輸入URL,使用書簽進(jìn)入等),會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式).對于 Firefox 會一直表現(xiàn)出 FOUC 。
• 如果把js文件放在頭部，腳本會阻塞后面內(nèi)容的呈現(xiàn)，腳本會阻塞其后組件的下載，出現(xiàn)白屏問題。

三、async和defer的作用是什么？有什么區(qū)別

• 什么是加載異步：異步加載又叫非阻塞，瀏覽器在下載執(zhí)行 js 同時，還會繼續(xù)進(jìn)行后續(xù)頁面的處理。
• defer和asnyc是腳本異步加載的兩種方式。
• defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。腳本延遲到文檔解析和顯示后執(zhí)行，有順序
• async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。即不保證順序；
• 區(qū)別：
  • async是HTML5新增的屬性，它的作用是能夠異步的加載和執(zhí)行腳本，不因?yàn)榧虞d腳本而阻塞頁面的加載。一旦加載到就會立即執(zhí)行。不影響頁面的其他操作。
  • defer如果給script標(biāo)簽添加了defer屬性，即使js放在head里面，它也會在HTML頁面解析完畢之后再執(zhí)行，也就是類似于把這個js放在了頁面底部。簡單來說就是等頁面的html和css加載完畢之后再加載js。

四、簡述網(wǎng)頁的渲染機(jī)制

• 瀏覽器解析：

  1. 瀏覽器通過請求的url進(jìn)行域名解析，向服務(wù)器發(fā)起請求，接受文件(HTML、CSS、JS、Images)
  2. HTML加載后開始構(gòu)建DOM樹；
  3. CSS加載后開始構(gòu)建CSSOM樹；
  4. Javascript腳本文件加載后，通過DOM API和 CSSOM API來操作DOM Tree和CSSOM Tree；

• 瀏覽器渲染：

  1. 瀏覽器引擎通過 DOM Tree 和 CSSOMTree 構(gòu)建 Rendering Tree
  2. 通過 CSSOM Tree 匹配 DOM Tree 進(jìn)行定位坐標(biāo)和大小，是否換行，以及 position、overflow、z-index 等等屬性，這個過程稱為 Flow 或 Layout 。
  3. 最終通過調(diào)用Native GUI 的 API 繪制網(wǎng)頁畫面的過程稱為 Paint 。當(dāng)用戶在瀏覽網(wǎng)頁時進(jìn)行交互或通過 js 腳本改變頁面結(jié)構(gòu)時，以上的部分操作有可能重復(fù)運(yùn)行，此過程稱為 Repaint 或 Reflow。

• Repaint
  當(dāng)元素改變的時候，將不會影響元素在頁面當(dāng)中的位置（比如 background-color, border-color, visibility），瀏覽器僅僅會應(yīng)用新的樣式重繪此元素，此過程稱為 Repaint。

• Reflow
  當(dāng)元素改變的時候，將會影響文檔內(nèi)容或結(jié)構(gòu)，或元素位置，此過程稱為 Reflow。（ HTML 使用的是 flow based layout ，也就是流式布局，所以，如果某元件的幾何尺寸發(fā)生了變化，需要重新布局，也就叫 Reflow。）

參考資料1

參考資料2

五、JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復(fù)雜類型?

JavaScript語言的每一個值，都屬于某一種數(shù)據(jù)類型。JavaScript的數(shù)據(jù)類型，共有六種。

• 簡單類型：
  1. string（字符串）：字符組成的文本(帶有引號)
  2. number（數(shù)值）：整數(shù)和小數(shù)
  3. boolean（布爾值）：布爾表示一個邏輯實(shí)體，true or false
  4. undefined：表示“未定義”或不存在，即此處目前沒有任何值
  5. null：可以通過將變量的值設(shè)置為 null 來清空變量。
• 復(fù)雜類型： object（對象）：在計算機(jī)科學(xué)中, 對象是指內(nèi)存中的可以被 標(biāo)識符引用的一塊區(qū)域.是JavaScript的核心概念，也是最重要的數(shù)據(jù)類型。JavaScript的所有數(shù)據(jù)都可以被視為對象，這也是我們常說的一切皆為對象。

通常，我們將數(shù)值、字符串、布爾值稱為原始類型（primitive type）的值，即它們是最基本的數(shù)據(jù)類型，不能再細(xì)分了。而將對象稱為合成類型（complex type）的值，因?yàn)橐粋€對象往往是多個原始類型的值的合成，可以看作是一個存放各種值的容器。至于undefined
和null，一般將它們看成兩個特殊值。

六、NaN、undefined、null分別代表什么?

• NAN: 指的是not a number，表示非數(shù)字，NaN和任何值都不相等，包括自己
• undefined：表示“未定義”或不存在，即此處目前沒有任何值。
  undefined表示不存在值，就是此處目前不存在任何值。典型用法是：
  1.變量被聲明了，但沒有賦值時，就等于undefined。并且變量沒有被聲明也是undefined；

沒賦值.png

2.調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。

沒提供參數(shù).png

3.對象沒有賦值的屬性，該屬性的值為undefined。

對象沒有賦值

4.函數(shù)沒有返回值時，默認(rèn)返回undefined。

• null：表示空值，即該處的值現(xiàn)在為空。也可理解為空對象

1.作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。
2.作為對象原型鏈的終點(diǎn)。

七、typeof和instanceof的作用和區(qū)別?

• typeof運(yùn)算符可以返回一個值的數(shù)據(jù)類型，可能有以下結(jié)果。
  1. 原始類型string、number、boolean
  2. function
  3. undefined
  4. object
• instanceof在使用 typeof 運(yùn)算符時采用引用類型存儲值會出現(xiàn)一個問題，無論引用的是什么類型的對象，它都返回 "object"。ECMAScript 引入了另一個 Java 運(yùn)算符 instanceof 來解決這個問題。instanceof 運(yùn)算符與 typeof 運(yùn)算符相似，用于識別正在處理的對象的類型。與 typeof 方法不同的是，instanceof 方法要求開發(fā)者明確地確認(rèn)對象為某特定類型。

instanceof用法