1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的？為什么會出現(xiàn)白屏和FOUC？
在寫HTML代碼時，我們都是將CSS文件的引入位置放在頭部（<head>標簽內(nèi)部），將js文件的引入位置放在底部（</body>前面）。
出現(xiàn)白屏的原因：
CSS：未將CSS置于首部，瀏覽器加載頁面過程中，首先加載了html內(nèi)容，此時還未加載CSS，需將CSS完全加載完成，頁面才會顯示出來（白屏現(xiàn)象）。
另一種瀏覽器的加載方式是先對頁面內(nèi)容進行展示，然后再加載CSS修改頁面樣式（FOUC: flash of unstyled )。 若是使用@import ，即使把此樣式放在頂部，也可能會出現(xiàn)白屏。
JS： 由于JS的特性，如果把JS放在頁面頂部，在JS未加載完成之時，腳本就會阻塞后面組件的加載，從而出現(xiàn)白屏問題。
2.加載異步：async和defer的作用是什么？有什么區(qū)別
如果在某些場景下，需要將JS不置于頁面底部，此時就要使用 async或defer 來做異步處理。
<script defer src="script.js"></script>
<script async src="script.js"></script>
defer: 加載JS與頁面并行進行，但是要在頁面元素解析完成之后，defer才會被執(zhí)行。
async:加載JS與頁面并行進行，對頁面的渲染也會并行進行。
3.簡述網(wǎng)頁的渲染機制
1、Create/Update DOM And request css/image/js：瀏覽器請求到HTML代碼后，在生成DOM的最開始階段（應該是 Bytes → characters 后），并行發(fā)起css、圖片、js的請求，無論他們是否在HEAD里。
2、Create/Update Render CSSOM：CSS文件下載完成，開始構建CSSOM
3、Create/Update Render Tree：所有CSS文件下載完成，CSSOM構建結束后，和 DOM ?一起生成 Render Tree。
4、Layout：有了Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點、各個節(jié)點的CSS定義以及他們的從屬關系。下一步操作稱之為Layout，顧名思義就是計算出每個節(jié)點在屏幕中的位置。
5、Painting：Layout后，瀏覽器已經(jīng)知道了哪些節(jié)點要顯示（which nodes are visible）、每個節(jié)點的CSS屬性是什么（their computed styles）、每個節(jié)點在屏幕中的位置是哪里（geometry）。就進入了最后一步：Painting，按照算出來的規(guī)則，通過顯卡，把內(nèi)容畫到屏幕上。
4.JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復雜類型?NaN、undefined、null分別代表什么?
簡單類型：
<li>數(shù)字 number
<li>字符串 string
<li>布爾 boolean
<li>數(shù)組 （數(shù)組也是對象）
<li>未定義 undefined
復雜類型：
<li>對象 object
NaN:
Number.NaN 是一個特殊值，說明某些算術運算（如求負數(shù)的平方根）的結果不是數(shù)字。
JavaScript 以 NaN 的形式輸出 Number.NaN。NaN 與其他數(shù)值進行比較的結果總是不相等的，包括它自身在內(nèi)。因此，不能與 Number.NaN 比較來檢測一個值是不是數(shù)字，而只能調(diào)用 isNaN() 來比較。
undefined:
表示未賦值，比如說 var = a 占據(jù)了空間，卻未對 a 賦值。
null：
表示一個不存在的元素，空指針。
5.typeof和instanceof的作用和區(qū)別?
typeof:
作用是查看元素類型。它返回值是一個字符串，該字符串說明運算數(shù)的類型。typeof 一般只能返回如下幾個結果：
返回值：
數(shù)字：number
字符串：string
布爾：boolean
函數(shù)：function
undefined: function
其他值全部為 object
例：
instanceof:
判斷一個變量的類型常常會用 typeof 運算符，在使用 typeof 運算符時采用引用類型存儲值會出現(xiàn)一個問題，無論引用的是什么類型的對象，它都返回 “object”。這就需要用到instanceof來檢測某個對象是不是另一個對象的實例。
instanceof用于判斷一個變量是否某個對象的實例,其返回值是布爾類型。
例：
a instanceof b?console.log"true"):conlose.log("false"); //a是b的實例？真:假
代碼題：
1.完成如下代碼判斷一個變量是否是數(shù)字、字符串、布爾、函數(shù)
function isNumber(el) {
if(typeof el === "number"){
return true;
}
else {
return false;
}
}
function isString(el) {
if(typeof el === 'string'){
return true;
}
else {
return false
}
}
function isBoolean(el) {
if(typeof el === 'boolean'){
return true;
}
else {
return false;
}
}
function isFunction(el) {
if(typeof el === 'function'){
return true;
}
else {
return false;
}
}
var a = 2,
b = "jirengu",
c = false;
alert( isNumber(a) ); //true
alert( isString(a) ); //false
alert( isString(b) ); //true
alert( isBoolean(c) ); //true
alert( isFunction(a)); //false
alert( isFunction( isNumber ) ); //true```
2.以下代碼的輸出結果是?
console.log(1+1); //2
console.log("2"+"4");//24
console.log(2+"4");//24
console.log(+new Date());//1470630425859
console.log(+"4");//4
3.以下代碼的輸出結果是?
var a = 1;
a+++a;//3
typeof a+2;//number2
4.遍歷數(shù)組，把數(shù)組里的打印數(shù)組每一項的平方
```var arr = [3,4,5]```
5.遍歷 JSON, 打印里面的值 （難度**）
var obj = {
name: 'hunger', sex: 'male', age: 28
}
//todo ...
// 輸出 name: hunger, sex: male, age:28```
6.下面代碼的輸出是? 為什么
console.log(a);//1，js變量提升
var a = 1;// 1
console.log(a); // 1, 通過var a = 1;進行聲明并賦值，調(diào)用a后，得到 1
console.log(b);//b is not defined,未對 b 進行聲明。
<li>關于變量提升：
var v='Hello World';
(function(){
alert(v);
})() // 輸出 Hello World
但是：
var v='Hello World';
(function(){
alert(v);
var v='I love you';
})() ```
卻會輸出 undefined
其原因是作用域的問題，變量提升，就是把變量提升提到函數(shù)的top的地方。變量提升 只是提升變量的聲明，并不會把賦值也提升上來。
其實只是：
var v='Hello World';
(function(){
var v;
alert(v);
v='I love you';
})() ```
本文版權歸本人和饑人谷所有，轉(zhuǎn)載請注明來源。
