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

New day

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

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

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

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

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

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

defer和async.png

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

webkit主流程.png

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

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

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

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

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

null:是一個(gè)表示"無(wú)"的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為0；

</br>
<h3>7.typeof和instanceof的作用和區(qū)別?</h3>
typeof的作用是：用以獲取一個(gè)變量或者表達(dá)式的數(shù)據(jù)類型。主要用來(lái)判斷一個(gè)變量是否存在
返回結(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用來(lái)判斷一個(gè)變量是否是某個(gè)對(duì)象的實(shí)例。返回結(jié)果：boolean值，true或false。

typeof和instance of.png

<h3>8.代碼題</h3>
1.完成如下代碼判斷一個(gè)變量是否是數(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ù)組每一項(xiàng)的平方 （難度**）

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
因?yàn)镴S存在變量提升機(jī)制，所以使得a的聲明提升到最前面，但是此時(shí)a未賦值，因此第一個(gè)console.log(a)輸出結(jié)果為undefined，之后a=1，輪到第二個(gè)console.log(a)輸出結(jié)果為一，而最后的console.log(b)未聲明，因此控制臺(tái)報(bào)錯(cuò)：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)載，請(qǐng)注明出處

感謝吃瓜子觀眾：

gaki16