問答：

1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的？

• CSS
  放在head標簽內(nèi)倍宾，由link標簽來引入雏节。如果放在底部，可能會造成某些瀏覽器的白屏問題或FOUC高职。

• JS
  放在body標簽底部矾屯。由于瀏覽器在下載JS的時候，會阻止一切其他活動初厚，比如其他資源的下載件蚕，內(nèi)容的呈現(xiàn)等等孙技。至到JS下載、解析排作、執(zhí)行完畢后才開始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容牵啦。所以為了提高網(wǎng)頁性能，將JS放在底部妄痪。

2.解釋白屏和FOUC

• 白屏
  一般情況下哈雏，HTML內(nèi)容和CSS樣式表是并發(fā)同步加載的，但是某些情況下衫生，同步出現(xiàn)了問題裳瘪，瀏覽器無法獲得樣式來渲染內(nèi)容，就會出現(xiàn)白屏現(xiàn)象：
• 如果把樣式放在底部罪针，對于IE瀏覽器彭羹，在某些場景下（新窗口打開，刷新等）頁面會出現(xiàn)白屏泪酱，而不是內(nèi)容逐步展現(xiàn)派殷。
• @import需要在網(wǎng)頁完全載入以后加載，如果使用@import標簽墓阀，即使CSS放入link毡惜，并且放在頭部，也可能出現(xiàn)白屏斯撮。
• 對于圖片和CSS经伙，在加載時會并發(fā)加載（如一個域名下同時加載兩個文件），但在加載JS時勿锅，會禁用并發(fā)帕膜，并且阻止其他內(nèi)容的下載，所以把JS放在頁面頂部也會導致白屏現(xiàn)象粱甫。
• FOUC
  如果把樣式表放在底部，當頁面逐步加載時作瞄，文字首先顯示茶宵，然后是圖片，最后當樣式表完全下載并且解析之后宗挥，已經(jīng)呈現(xiàn)的文字和圖片又要根據(jù)樣式表的樣式重新繪制乌庶，這樣就會造成FOUC(無樣式內(nèi)容閃爍)。IE瀏覽器會在某些情況下（點擊鏈接契耿，輸入URL瞒大，使用書簽進入等）會出現(xiàn)FOUC，而Firefox瀏覽器會一直表現(xiàn)出FOUC搪桂。

3.async和defer的作用是什么透敌？有什么區(qū)別盯滚。

<script src="script.js"></script>
沒有defer或async，瀏覽器會立即加載并執(zhí)行指定的腳本酗电，“立即”指的是在渲染該script標簽之下的文檔元素之前魄藕，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行撵术。
<script async src="script.js"></script>
有async背率，記載和渲染后續(xù)文檔元素的過程將和script的加載與執(zhí)行并行進行（異步）。
<script defer src="script.js"></script>
有defer嫩与，加載后續(xù)文檔元素的過程將和script.js的加載并行進行（異步）寝姿，但是與async不同的是：script.js的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded時間觸發(fā)之前完成划滋。

4.簡述網(wǎng)頁的渲染機制饵筑。

1.解析HTML標簽，構建DOM樹古毛。
2.解析CSS標簽翻翩，構建CSSOM樹。
3.把DOM和CSSOM組合成渲染樹（render tree）稻薇。
4.在渲染樹的基礎上進行布局嫂冻，計算每個節(jié)點的幾何結構。
5.把每個節(jié)點繪制到屏幕上（painting）塞椎。

5.JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復雜類型?

JavaScript語言的每一個值桨仿，都屬于某一種數(shù)據(jù)類型。JavaScrip定義了六種數(shù)據(jù)類型案狠，其中數(shù)組服傍、字符串、布爾值骂铁、underfined和null為簡單類型吹零，對象為復雜類型。：

• 數(shù)值（number）：整數(shù)和小數(shù)（比如1和3.14）
• 字符串（string）：字符組成的文本（比如"Hello World"）
• 布爾值（boolean）：true(真)和false(假)兩個特定值
• undefined:表示“未定義”或不存在拉庵，即此處目前沒有任何值
• null：表示空缺灿椅，即此處應該有一個值，但目前為空
• 對象(object)：各種值組成的集合钞支，對象又可以分成為三個子類型：
• 狹義的對象(object)
• 數(shù)組(arry)
• 函數(shù)(function)

通常茫蛹，我們將數(shù)值、字符串烁挟、布爾值稱為原始類型（primitive type）的值婴洼，即它們是最基本的數(shù)據(jù)類型，不能再細分了撼嗓。而將對象稱為合成類型（conplex type）的值柬采，因為一個對象往往是多個原始類型的值的合成欢唾，可以看做是一個存放各種值的容器。至于underfined和null警没，一般將它們看成兩個特殊值匈辱。

6.NaN、undefined杀迹、null分別代表什么?

NaN是JavaScript的特殊值亡脸，表示“非數(shù)字”（Not a Number），主要出現(xiàn)在將字符串解析成數(shù)字出錯的場合树酪。NaN有以下幾個運算規(guī)則：

• NaN不等于任何值浅碾，包括它本身。
• 由于數(shù)組的indexOf方法续语，內(nèi)部使用的是嚴格相等運算符垂谢，所以該方法對NaN不成立。
• NaN在布爾運算時被當作false疮茄。
• NaN與任何數(shù)（包括它自己）的運算滥朱，得到的都NaN。

NaN的運算規(guī)則

undefined表示不存在的值力试，就是此處目前不存在任何值徙邻，典型用法是：

• 變量被聲明了，但沒有賦值畸裳，就等于undefined缰犁。
• 調用函數(shù)時，應該提供的參數(shù)沒有提供怖糊，該參數(shù)等于undefined帅容。
• 對象沒有賦值的屬性，該屬性的值為undefined伍伤。
• 函數(shù)沒有返回值時邢羔，默認返回undefined耘眨。

undefined用法

null表示空值荐类，即該處的值現(xiàn)在為空看杭，典型的用法是：

• 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)是一個沒有任何內(nèi)容的對象阅爽。
• 作為對象原型鏈的終點路幸。

7.typeof和instanceof的作用和區(qū)別?

typeof運算符可以返回一個值的數(shù)據(jù)類型荐开，可以有以下結果付翁。
（1）原始類型
數(shù)值、字符串晃听、布爾值分別返回number百侧、string砰识、boolean。

原始類型

（2）函數(shù)
函數(shù)返回function

函數(shù)

（3）undefined
undefined返回undefined

undifined

利用這一點佣渴，typeof可以用來檢測一個沒有聲明的變量辫狼，而不報錯。

利用typeof檢測

實際編程中辛润，這個特點通常用在判斷語句膨处。

判斷語句

• 其他
  除此之外，其他情況都返回object砂竖。

object

• instanceof
  instanceof運算符返回一個布爾值真椿，表示指定對象是否為某個構造函數(shù)的實例。
  例如在上文中乎澄，typeof對數(shù)組（array）和對象（object）的顯示結果都是object突硝，那么我們可以使用instanceof來區(qū)分它們

instanceof

代碼：
1.完成如下代碼判斷一個變量是否是數(shù)字、字符串置济、布爾解恰、函數(shù) （難度*）ps: 做完后可參考 underscore.js 源碼中部分實現(xiàn)

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

demo

2.以下代碼的輸出結果是?（難度**）

console.log(1+1); //結果為2，數(shù)值之間的加法運算浙于。
console.log("2"+"4"); //結果為"24"护盈，字符串之間的連接運算。
console.log(2+"4"); //結果為"24"路媚，有一個運算子是字符串黄琼，則執(zhí)行字符串連接運算。
console.log(+new Date());//結果為1471665761733整慎，new Date()會獲得從 1970 年 1 月 1 日至今的毫秒數(shù)脏款。
console.log(+"4");//結果為4，只有右邊一個字符串裤园，轉換為數(shù)值4.

在JavaScript語言里撤师， +運算符可以完成兩種運算，既可以處理算術的加法拧揽，也可以做字符串的連接剃盾，它的算法步驟如下：

1.如果運算子是對象，先自動轉成原始類型的值（即先執(zhí)行該對象的valueOf方法淤袜，如果結果還不是原始類型的值痒谴，再執(zhí)行toString方法；如果對象是Date實力铡羡，則先執(zhí)行toString方法）积蔚。
2.兩個運算符都是原始類型的值以后，只要有一個運算符是字符串烦周，則兩個運算子都轉為字符串尽爆，執(zhí)行字符串鏈接運算怎顾。
3.否則，兩個字符串都轉為數(shù)值漱贱，執(zhí)行加法運算槐雾。
4.加法運算符一定有左右兩個運算子，如果只有右邊一個運算子幅狮，就是另一個運算符募强，叫做“數(shù)值運算符”，用于返回右邊運算子的數(shù)值形式崇摄。
5.如果只有左邊一個運算子钻注，會報錯。

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

var a = 1;
a+++a;

typeof a+2;

輸出結果

先了解下a++和++a的區(qū)別：

• a++ 和 ++a的相同點都是給a+1配猫，
• 不同點是a++是先參加程序的運行再+1幅恋，而++a則是先+1再參加程序的運行

a+++a這一行代碼中，后置遞增的優(yōu)先級高于前置遞增泵肄，所以先運行a++然后+a捆交。
a++的運行結果為1，但此時的a等于2腐巢，最后a+++a的運行結果為3品追。

typeof a+2這一行代碼中，typeof的優(yōu)先級更高冯丙，所以先運行typeof a肉瓦，運行結果為"number"，然后再加上2胃惜，最后的運行結果為"number2"泞莉。

關于優(yōu)先級的判斷參考運算符優(yōu)先級。

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

var arr= [3,4,5];

for (var i=0;i< arr.length;i++) {
  console.log(arr[i]*arr[i]);
}

遍歷數(shù)組

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);

輸出結果

輸出結果如圖鲫趁，這里要說一下的是變量提升：

JavaScript引擎的工作方式是，先解析代碼利虫，獲取所有被聲明的變量挨厚，然后再一行一行地運行。這造成的結果糠惫，就是所有的變量的聲明語句疫剃，都會被提升到代碼的頭部，這就叫做變量提升（hoisting）硼讽。請注意巢价，變量提升只對var命令聲明的變量有效，如果一個變量不是用var命令聲明的，就不會發(fā)生變量提升蹄溉。。

所以您炉，根據(jù)上文的解釋柒爵，本題的代碼實際運行為：

var a;
console.log(a);//變量a已聲明，但還未賦值赚爵，所以結果顯示為undefined棉胀。
a = 1;
console.log(a);//變量a已賦值1，所以結果顯示為1冀膝。
consolo.log(b);//變量b未聲明唁奢，所以顯示報錯error。

本文版權歸本人和饑人谷所有窝剖，轉載請注明來源麻掸。