1，CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
- css放在
<head>標(biāo)簽里，js放在<body>標(biāo)簽最后面。
- 原因：
- css放在前面是因為瀏覽器在加載過程中，會現(xiàn)根據(jù)html生成DOM樹，然后再加上css形成渲染樹，如果css過大還被 放在了后面，會導(dǎo)致出現(xiàn)閃屏、白屏的現(xiàn)象。
- js本身的特性是加載時會阻塞后面文件的加載，因此不放在后面會導(dǎo)致后面文件加載速度慢，而且js重復(fù)加載的現(xiàn)象，頁面整體加載慢，用戶體驗差。
2，解釋白屏和FOUC。
- 白屏和fouc并不是bug，而是不同瀏覽器加載和顯示機制不同造成的。
- 白屏: 即網(wǎng)頁空白, 不顯示任何內(nèi)容
當(dāng)CSS放置在代碼的最后面, 如果瀏覽器是等待CSS加載完成之后對HTML元素進(jìn)行渲染和展示, 在新窗口打開或刷新頁面時, 可能因為未加載完成而出現(xiàn)白屏, 使用@import導(dǎo)入CSS和把JS放在頂部也可能導(dǎo)致白屏。 - FOUC: (Flash of Unstyled Content) 無樣式內(nèi)容閃爍
當(dāng)CSS放置在代碼的最后面, 如果瀏覽器是先對HTML元素進(jìn)行展示，然后等待CSS加載完成之后重新對樣式進(jìn)行修改, 在新窗口打開或刷新頁面時, 可能會逐步加載無樣式內(nèi)容, 然后再CSS加載完成后突然展現(xiàn)樣式。
3，async和defer的作用是什么？有什么區(qū)別？
- 當(dāng)瀏覽器碰到
script腳本的時候：
<script src="script.js"></script>
沒有defer或async，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該script標(biāo)簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。<script async src="script.js"></script>
有async，加載和渲染后續(xù)文檔元素的過程將和script.js的加載與執(zhí)行并行進(jìn)行（異步）。<script defer src="myscript.js"></script>
有defer，加載后續(xù)文檔元素的過程將和script.js的加載并行進(jìn)行（異步），但是script.js的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
- 從實用角度來說呢，首先把所有腳本都丟到 </body>之前是最佳實踐，因為對于舊瀏覽器來說這是唯一的優(yōu)化選擇，此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析。
此圖告訴我們以下幾個要點：
- defer 和 async 在網(wǎng)絡(luò)讀?。ㄏ螺d）這塊兒是一樣的，都是異步的（相較于 HTML 解析）
- 它倆的差別在于腳本下載完之后何時執(zhí)行，顯然 defer 是最接近我們對于應(yīng)用腳本加載和執(zhí)行的要求的
- 關(guān)于 defer，此圖未盡之處在于它是按照加載順序執(zhí)行腳本的，這一點要善加利用
- async 則是一個亂序執(zhí)行的主，反正對它來說腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會立刻執(zhí)行
- 仔細(xì)想想，async 對于應(yīng)用腳本的用處不大，因為它完全不考慮依賴（哪怕是最低級的順序執(zhí)行），不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的，最典型的例子：Google Analytics
4，簡述網(wǎng)頁的渲染機制。
- 解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
- 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎(chǔ)上進(jìn)行布局, 計算每個節(jié)點的幾何結(jié)構(gòu)
- 把每個節(jié)點繪制到屏幕上
5，JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復(fù)雜類型?
- 簡單數(shù)據(jù)類型：
- number數(shù)據(jù)類型 —— var num=123;
- string（字符串）數(shù)據(jù)類型 —— var str=“abcd”;
- boolean數(shù)據(jù)類型 —— var bool=ture;
- 浮點數(shù)數(shù)據(jù)類型——var float=.89;
- 特殊數(shù)據(jù)類型：
- 未定義undefined —— var a;
- 空 null —— var a=null
- 復(fù)雜數(shù)據(jù)類型：
- object —— var obj={“name”:“小明”，“age”：“14”};
6，NaN、undefined、null分別代表什么?
- NaN是一個特殊數(shù)字，表示非數(shù)(not alike Number)例如Number (“123a”) 得到的即為NaN；NaN 不等于自己。這里注意，他是數(shù)字。
- undefined表示"缺少值"——表明此處應(yīng)該有一個值，但是沒有定義。例如 var a；
- null表示"沒有對象"——即該處不應(yīng)該有值。
7，typeof和instanceof的作用和區(qū)別?
instanceof 和typeof都能用來判斷一個變量是否為空或是什么類型的變量。
typeof 用以獲取一個變量的類型，typeof 一般只能返回如下幾個結(jié)果：number，boolean，string，function，object，undefined。
我們可以使用 typeof 來獲取一個變量是否存在，如 if(typeof a!=“undefined”){}，而不要去使用 if(a)。因為如果 a 不存在（未聲明）則會出錯，對于 Array,Null 等特殊對象使用 typeof 一律返回 object。
這正是 typeof 的局限性。如果我們希望獲取一個對象是否是數(shù)組，或判斷某個變量是否是某個對象的實例則要選擇使用instanceof。-
instanceof 用于判斷一個變量是否某個對象的實例，如 var a=new Array();alert(a instanceof Array);會返回 true，
同時 alert(a instanceof Object) 也會返回 true;這是因為 Array 是 object 的子類。再如：function test(){}; var a=new test(); alert(a instanceof test) 會返回 true。
談到instanceof 我們要多插入一個問題，就是 function 的 arguments，我們大家也許都認(rèn)為 arguments 是一個 Array，但如果使用 instaceof 去測試會發(fā)現(xiàn) arguments 不是一個 Array 對象，盡管看起來很像。
- typeof 返回一個值的數(shù)據(jù)類型：
- 數(shù)值、字符串、布爾值分別返回number、string、boolean
- 函數(shù)返回function
- undefined返回undefined
- 除此以外，其他情況都返回object
- instanceof 測試它左邊的對象是否是它右邊的類的實例，返回布爾型數(shù)據(jù), a.instanceof(b);就是判斷a是否是b的一個實例
-
typeof對數(shù)組（array）和對象（object）的顯示結(jié)果都是object, 無法進(jìn)行區(qū)分, instanceof可以幫助區(qū)分
