今天我終于踏入JS的大門，想起來，真有點小興奮，不過，聽說大伙都說JS不太容易學(xué)懂，But I will try to learn it。

New day

<h3>1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的？</h3>
CSS一般放在head標簽里面，JS一般放在body標簽的尾部。
原因：
<li>因為CSS在加載時，是并發(fā)加載，并發(fā)請求，不會阻礙其他資源同時加載，而JS加載時，會禁止并發(fā)，因此JS加載時，會阻塞其他資源的加載，只有等JS加載完之后，才能加載其他資源，因此把JS放在頂部會出現(xiàn)白屏現(xiàn)象，把CSS放在尾部，會出現(xiàn)FOUS（無樣式內(nèi)容閃爍），因此從用戶體驗和優(yōu)化網(wǎng)頁性能這點看，應(yīng)該將CSS放在頂部，JS放在尾部。
</br>

<h3>2.解釋白屏和FOUC</h3>
<li>白屏——所謂的白屏，是指CSS加載時間過長，而HTML加載在CSS之后，因此會導(dǎo)致網(wǎng)頁出現(xiàn)白屏——啥內(nèi)容都沒有，白茫茫一片。
1.如果把樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)。
2.如果使用 @import標簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏;
3.把js放在頂部也會出現(xiàn)白屏現(xiàn)象，因為加載 JavaScript 時,會禁用并發(fā),并且阻止其他內(nèi)容的下載.
<li>FOUC,全稱叫做Flash of Unstyled Content，中文名為無樣式內(nèi)容閃爍,如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容(即html的內(nèi)容）,等CSS加載后頁面突然展現(xiàn)樣式).對于 Firefox 會一直表現(xiàn)出 FOUC .
</br>
<h3>3.async和defer的作用是什么？有什么區(qū)別</h3>
<li>defer:defer是script標簽中處理腳本運行的屬性之一，中文稱作延時，作用是js在頁面加載后才會運行腳本，即加載頁面的同時加載js，加載完頁面之后才1執(zhí)行js。

<script src="dome.js" defer="defer"></script>

<li>async:async（HTML5）是script標簽中處理腳本運行的另一屬性，中文稱作異步，作用是腳本會異步加載而不阻塞頁面加載，并且js一旦下載完畢就會立即執(zhí)行。

<script src="dome.js" async="async"></script>

另外async和defer 屬性僅適用于外部腳本（只有在使用 src 屬性時）。

defer和async.png

<li>區(qū)別：
1.html的4.0版本定義defer，到了html5.0定義anysc，這就造成瀏覽器的版本不同，對其的支持力度也就不同。
2.每一個async屬性的腳本都在它下載結(jié)束之后立刻執(zhí)行，同時會在window的load事件之前執(zhí)行。所以就有可能出現(xiàn)腳本執(zhí)行順序被打亂的情況；每一個defer屬性的腳本都是在頁面解析完畢之后，按照原本的順序執(zhí)行，同時會在document的DOMContentLoaded之前執(zhí)行。
</br>
<h3>4.簡述網(wǎng)頁的渲染機制</h3>
<b>a:</b>解析 HTML 標簽, 構(gòu)建 DOM 樹。
<b>b:</b>解析 CSS 標簽, 構(gòu)建 CSSOM 樹。
<b>c:</b>把DOM樹和CSSOM樹組合城（render tree）。
<b>d:</b>在渲染樹的基礎(chǔ)上進行布局, 計算每個節(jié)點的幾何結(jié)構(gòu)。
<b>e:</b>把每個節(jié)點繪制到屏幕上 (painting)。

webkit主流程.png

<h3>5.JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復(fù)雜類型?</h3>
JavaScript語言的每一個值，都屬于某一種數(shù)據(jù)類型。JavaScript的數(shù)據(jù)類型，共有六種。
即：
<li>數(shù)值（number）：整數(shù)和小數(shù)（比如1和3.14）
<li>字符串（string）：字符組成的文本（比如"Hello World"）
<li>布爾值（boolean）：true（真）和false（假）兩個特定值
<li>undefined：表示“未定義”或不存在，即此處目前沒有任何值
<li>null：表示空缺，即此處應(yīng)該有一個值，但目前為空
<li>對象（object）：各種值組成的集合

其中簡單類型：
<li>數(shù)值（number）
<li>字符串（string）
<li>布爾值（boolean）
<li>undefined
<li>null

復(fù)雜類型:
<li>對象（object）

對象（object）又可以分成三個子類型。
<li>狹義的對象（object）
<li>數(shù)組（array）
<li>函數(shù)（function）
</br>
<h3>6.NaN、undefined、null分別代表什么?</h3>
NaN：表示Not a Number，不是一種獨立的數(shù)據(jù)類型，而是一種特殊數(shù)值，它的數(shù)據(jù)類型依然屬于Number，只不過數(shù)值計算時不符合計算法則。

undefined:表示“缺少值”，就是此處應(yīng)該有一個值，但是還沒有定義；

null:是一個表示"無"的對象，轉(zhuǎn)為數(shù)值時為0；

</br>
<h3>7.typeof和instanceof的作用和區(qū)別?</h3>
typeof的作用是：用以獲取一個變量或者表達式的數(shù)據(jù)類型。主要用來判斷一個變量是否存在
返回結(jié)果如下：

typeof 12 === "number"
typeof "interest" === "string"
typeof ture === "boolean"
typeof  undefined === undefined
typeof {a:1} === "object"
typeof [1, 2, 3] === 'object'
typeof function(){} === 'function';

instance of用來判斷一個變量是否是某個對象的實例。返回結(jié)果：boolean值，true或false。

typeof和instance of.png

<h3>8.代碼題</h3>
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 ture;
}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.以下代碼的輸出結(jié)果是?（難度**）

console.log(1+1); //2
console.log("2"+"4"); //24
console.log(2+"4");  //24
console.log(+new Date()); //1479451763255
console.log(+"4"); //4

3.以下代碼的輸出結(jié)果是? （難度***）

var a = 1;
a+++a;
//a++=1>a=a+1=2>(a++)+a=3
typeof a+2;
//typeof a>"number">typeof "number"+2>number2

4.遍歷數(shù)組，把數(shù)組里的打印數(shù)組每一項的平方 （難度**）

var arr = [3,4,5]
// todo..
// 輸出 9, 16, 25 

var arr = [3,4,5];
for (i=0;i<arr.length;i++){
    array=Math.pow(arr[i],2);
    console.log(array);
}//for循環(huán)
var arr = [3,4,5]
    for(i in arr){
        array=Math.pow(arr[i],2);
        console.log(array);
}//for in 循環(huán)
var arr = [3,4,5];
var i = 0 ；
while(i<arr.length){
    array=Math.pow(arr[i],2);
    console.log(array);
    i++;
}//while循環(huán)

5.遍歷 JSON, 打印里面的值 （難度**）

var obj = {
  name: 'hunger',
  sex: 'male',
  age: 28
};
for (var key in obj){
  console.log(key + ":" + obj[key])
}

6.下面代碼的輸出是? 為什么 （難度 ***）

console.log(a);
var a = 1;
console.log(a);
console.log(b);
//相當(dāng)于
var a;
console.log(a);//undefined
a=1;
console.log(a);//1
console.log(b)//b is not defined
因為JS存在變量提升機制，所以使得a的聲明提升到最前面，但是此時a未賦值，因此第一個console.log(a)輸出結(jié)果為undefined，之后a=1，輪到第二個console.log(a)輸出結(jié)果為一，而最后的console.log(b)未聲明，因此控制臺報錯：b is not defined

參考資料：

<a >網(wǎng)站前端性能優(yōu)化之CSS和JS</a>

<a >HTML 5 <script> async 屬性</a>

<a >HTML 5 <script> defer 屬性</a>

<a >阮一峰undefined與null的區(qū)別</a>

<a >js中typeof和instanceof的區(qū)別
</a>

注：版權(quán)歸饑人谷和饑人谷peter所有，若有轉(zhuǎn)載，請注明出處

感謝吃瓜子觀眾：

gaki16