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

CSS一般用link放置在網(wǎng)頁的頭部，JS一般放置body的底部。
如果CSS樣式放在底部，對(duì)于IE瀏覽器，在某些場(chǎng)景下（點(diǎn)擊鏈接，出入U(xiǎn)RL，使用標(biāo)簽進(jìn)入等），會(huì)出現(xiàn)FOUC現(xiàn)象（逐步加載無樣式的內(nèi)容，等CSS加載后頁面突然展現(xiàn)樣式），對(duì)于FireFox會(huì)一直出現(xiàn)FOUC。
將JS放在網(wǎng)頁底部，如果將JavaScript放在頭部，在加載JavaSript時(shí)候，會(huì)禁用并發(fā)，并且組織其他內(nèi)容的下載，回到值白屏現(xiàn)象。

2.解釋白屏和FOUC

白屏：
a.如果把CSS樣式放在底部，對(duì)于IE瀏覽器，在某些場(chǎng)景下（新窗口打開，刷新等）頁面會(huì)等到html和css加載完成后再進(jìn)行渲染，造成頁面內(nèi)容不會(huì)逐步展現(xiàn)；如果使用@import標(biāo)簽，即使CSS放入link,并且放在頭部，也可能出現(xiàn)白屏。
b.如果把JS放在網(wǎng)頁頭部，在加載JavaScript時(shí)，會(huì)禁用并發(fā)，并且阻止其他內(nèi)容的下載，會(huì)出現(xiàn)白屏。

FOUC:如果把樣式放在底部，對(duì)于IE瀏覽器，在某些場(chǎng)景下（點(diǎn)擊鏈接，輸入U(xiǎn)RL，使用標(biāo)簽進(jìn)入等），會(huì)出現(xiàn)FOUC現(xiàn)象（逐步加載無樣式內(nèi)容，等CSS加載后頁面突然展現(xiàn)樣式），對(duì)于FireFox會(huì)一直表現(xiàn)出FOUC。
3.async和defer的作用是什么？有什么區(qū)別

defer該屬性用來通知瀏覽器，這段腳本代碼將不會(huì)產(chǎn)生任何文檔內(nèi)容。
async的作用是：能夠異步地下載和執(zhí)行腳本，不因?yàn)榧虞d腳本而阻塞頁面的加載。一旦下載完畢就會(huì)立刻執(zhí)行。
async和defer一樣，都不會(huì)阻塞其他資源下載，所以不會(huì)影響頁面的加載，但在async的情況下，js文檔一旦下載完畢就會(huì)立刻執(zhí)行，所以很有可能不是按照原本的順序來執(zhí)行。如下圖：

區(qū)別：
a.html的版本html4.0中定義了defer;html5.0中定義了async;這將造成瀏覽器版本的不同而對(duì)其支持的程度不同；
b.執(zhí)行時(shí)刻：每個(gè)async屬性的腳本都在它下載結(jié)束之后立刻執(zhí)行，同時(shí)會(huì)在window的load事件之前執(zhí)行。所以可能出現(xiàn)腳本執(zhí)行順序被打亂的情況；每個(gè)defer屬性的腳本都是在頁面解析完畢之后，按照原本的順序執(zhí)行，同時(shí)會(huì)在document的DOMContentLoaded之前執(zhí)行。

4.簡述網(wǎng)頁的渲染機(jī)制
a.解析HTML標(biāo)簽，構(gòu)建DOM樹；
b.解析CSS標(biāo)簽，構(gòu)建CSSOM樹；
c.把DOM和CSSOM組合成渲染樹；
d.在渲染樹的基礎(chǔ)上進(jìn)行布局，計(jì)算每個(gè)節(jié)點(diǎn)的集合結(jié)構(gòu)；
e.把每個(gè)節(jié)點(diǎn)繪制在屏幕上。

5.JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復(fù)雜類型?
JavaScript定義了六種數(shù)據(jù)類型，其中有5種簡單的數(shù)據(jù)類型（也稱為基本數(shù)據(jù)類型）：Undefined、Null、Boolean、Number和String.還有一種復(fù)雜的數(shù)據(jù)類型：object(本質(zhì)是由一組無序的名值對(duì)組成的)。

6.NaN、undefined、null分別代表什么?
NaN表示一個(gè)本來要返回?cái)?shù)值的操作數(shù)未返回?cái)?shù)值的情況（這樣就不會(huì)拋出錯(cuò)誤）；
undefined表示“缺少值”，就是此處應(yīng)該有一個(gè)值，但是還沒有定義；
null表示“沒有對(duì)象”，即該處不應(yīng)該有值。

7.typeof和instanceof的作用和區(qū)別?
typeof的作用是：用以獲取一個(gè)變量或者表達(dá)式的數(shù)據(jù)類型。返回如下幾個(gè)結(jié)果：number,boolean,string,function(函數(shù)),object(NULL，數(shù)組，對(duì)象)，undefined。主要用來判斷一個(gè)變量是否存在
instance of用來判斷一個(gè)變量是否是某個(gè)對(duì)象的實(shí)例。返回結(jié)果：boolean值，true或false。用來判斷一個(gè)對(duì)象是否是數(shù)組或者判斷某個(gè)變量是否是某個(gè)對(duì)象的實(shí)例。

代碼題
1.完成如下代碼判斷一個(gè)變量是否是數(shù)字、字符串、布爾、函數(shù)
<pre>
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
</pre>
2.以下代碼的輸出結(jié)果是?
<pre>
console.log(1+1); //2
console.log("2"+"4"); //24
console.log(2+"4"); //24
console.log(+new Date()); //1466571995054
console.log(+"4"); //4
</pre>

3.以下代碼的輸出結(jié)果是?
<pre>
var a = 1;
a+++a; //3

typeof a; //"number2"
</pre>

4.遍歷數(shù)組，把數(shù)組里的打印數(shù)組每一項(xiàng)的平方
<pre>
var arr=[3,4,5];
console.log(Math.pow(arr[0],2)); //9
console.log(Math.pow(arr[1],2)); //16
console.log(Math.pow(arr[2],2)); //25
</pre>

5.遍歷 JSON, 打印里面的值
<pre>
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
console.log(obj.name); //hunger
console.log(obj.sex); //male
console.log(obj.age); //28
</pre>

6.下面代碼的輸出是?
<pre>
console.log(a); //undefined
var a = 1;
console.log(a); //1
console.log(b); //報(bào)錯(cuò)，b is not undefined
</pre>

參考文章：
1.javascript中的defer和async學(xué)習(xí)+javascript執(zhí)行順序
2.【javascript基礎(chǔ)】 JavaScript defer和async區(qū)別
3.JavaScript之?dāng)?shù)據(jù)類型
4.undefined與null的區(qū)別
5.js中typeof和instanceof的區(qū)別

注：版權(quán)歸本人所有，若有轉(zhuǎn)載，請(qǐng)注明出處