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

CSS放置于head標(biāo)簽內(nèi),JS放置于</body>閉合標(biāo)簽之前

解釋白屏和FOUC##

• 白屏問題
  如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(新窗口打開,刷新等)頁(yè)面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)
  如果使用 @import標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏
• FOUC (無樣式內(nèi)容閃爍)
  如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書簽進(jìn)入等),會(huì)出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁(yè)面突然展現(xiàn)樣式).對(duì)于 Firefox 會(huì)一直表現(xiàn)出 FOUC .
• 將JS放在底部
  腳本會(huì)阻塞后面內(nèi)容的呈現(xiàn)
  腳本會(huì)阻塞其后組件的下載
  對(duì)于圖片和CSS, 在加載時(shí)會(huì)并發(fā)加載(如一個(gè)域名下同時(shí)加載兩個(gè)文件). 但在加載 JavaScript 時(shí),會(huì)禁用并發(fā),并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁(yè)面頂部也會(huì)導(dǎo)致 白屏現(xiàn)象.

async和defer的作用是什么？有什么區(qū)別##

二者的作用都是實(shí)現(xiàn)加載異步

• defer:腳本延遲到文檔解析和顯示后執(zhí)行，有順序
• async:不保證順序

簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制##

• 解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
• 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
• 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
• 在渲染樹的基礎(chǔ)上進(jìn)行布局, 計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)

• 把每個(gè)節(jié)點(diǎn)繪制到屏幕上 (painting)

  
  
  render-tree-construction.png

JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡(jiǎn)單類型?哪些是復(fù)雜類型?##

數(shù)據(jù)類型.png

NaN、undefined、null分別代表什么?##

• NaN含義是Not a Number，表示非數(shù)字，NaN和任何值都不相等，包括自己NaN == NaN; //false
• undefined：只有一個(gè)值undefined，表示變量只被聲明，沒有被初始化，也就是有這個(gè)指針，但指針沒有指向任何空間
• null：只有一個(gè)值null，表示空指針，也就是不存在的東西

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

• typeof：判斷一個(gè)變量的數(shù)據(jù)類型。包括：number，boolean，string，function，object和undefined(null的類型為object)
• instanceof：判斷一個(gè)變量是否是某個(gè)對(duì)象的實(shí)例，返回值的數(shù)據(jù)類型是Boolean(true/false)。

代碼練習(xí)#

1.完成如下代碼判斷一個(gè)變量是否是數(shù)字、字符串、布爾、函數(shù)####

function isNumber(el){
    return typeof(el) === "number";
}
function isString(el){
    return typeof(el) === "string";
}
function isBoolean(el){
    return typeof(el) === "boolean";
}
function isFunction(el){
    return typeof(el) === "function";
}

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 數(shù)值
console.log("2"+"4"); //24 字符串
console.log(2+"4"); //24 2轉(zhuǎn)化為字符串，最后得到字符串
console.log(+new Date()); //1467191938871
console.log(+"4"); //4 "4"轉(zhuǎn)化為數(shù)值，最后結(jié)果為數(shù)值

3.以下代碼的輸出結(jié)果是?####

var a = 1;
a+++a;//1+2=3

typeof a+2;//number2 (因?yàn)閠ypeof優(yōu)先級(jí)比＋高，所以先有typeof a 的結(jié)果為"number"，是個(gè)字符串，然后"number"+2，使得2先變成字符串，然后得到結(jié)果"number2")

4.遍歷數(shù)組，把數(shù)組里的打印數(shù)組每一項(xiàng)的平方

var arr = [3,4,5]
for(var key in arr){
  console.log(arr[key]*arr[key]);
}
// 輸出 9, 16, 25

5.遍歷 JSON, 打印里面的值####

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

6.下面代碼的輸出是? 為什么

console.log(a);//undefined
var a = 1;
console.log(a);//1
console.log(b);//未聲明變量b,報(bào)錯(cuò)