今天我終于踏入JS的大門涯呻，想起來，真有點(diǎn)小興奮腻要，不過复罐，聽說大伙都說JS不太容易學(xué)懂，But I will try to learn it雄家。
<h3>1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的效诅？</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（無樣式內(nèi)容閃爍）限匣，因此從用戶體驗(yàn)和優(yōu)化網(wǎng)頁性能這點(diǎn)看抖苦，應(yīng)該將CSS放在頂部，JS放在尾部米死。
</br>
<h3>2.解釋白屏和FOUC</h3>
<li>白屏——所謂的白屏锌历，是指CSS加載時(shí)間過長，而HTML加載在CSS之后峦筒，因此會(huì)導(dǎo)致網(wǎng)頁出現(xiàn)白屏——啥內(nèi)容都沒有究西，白茫茫一片。
1.如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(新窗口打開,刷新等)頁面會(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，中文名為無樣式內(nèi)容閃爍,如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書簽進(jìn)入等),會(huì)出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容(即html的內(nèi)容）,等CSS加載后頁面突然展現(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在頁面加載后才會(huì)運(yùn)行腳本尉辑，即加載頁面的同時(shí)加載js帆精，加載完頁面之后才1執(zhí)行js。
<script src="dome.js" defer="defer"></script>
<li>async:async（HTML5）是script標(biāo)簽中處理腳本運(yùn)行的另一屬性隧魄，中文稱作異步实幕，作用是腳本會(huì)異步加載而不阻塞頁面加載，并且js一旦下載完畢就會(huì)立即執(zhí)行堤器。
<script src="dome.js" async="async"></script>
另外async和defer 屬性僅適用于外部腳本（只有在使用 src 屬性時(shí)）。
<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屬性的腳本都是在頁面解析完畢之后乓旗，按照原本的順序執(zhí)行府蛇，同時(shí)會(huì)在document的DOMContentLoaded之前執(zhí)行。
</br>
<h3>4.簡(jiǎn)述網(wǎng)頁的渲染機(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)穷遂。
<h3>5.JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡(jiǎn)單類型?哪些是復(fù)雜類型?</h3>
JavaScript語言的每一個(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è)表示"無"的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為0喇肋；
</br>
<h3>7.typeof和instanceof的作用和區(qū)別?</h3>
typeof的作用是：用以獲取一個(gè)變量或者表達(dá)式的數(shù)據(jù)類型坟乾。主要用來判斷一個(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用來判斷一個(gè)變量是否是某個(gè)對(duì)象的實(shí)例。返回結(jié)果：boolean值蝶防，true或false甚侣。
<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)注明出處
感謝吃瓜子觀眾：
