問(wèn)答

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

• CSS一般放置在head標(biāo)簽里面，樣式先行的話在加載HTML內(nèi)容時(shí)可以同時(shí)渲染樣式，避免FOUC。
• JS一般放在body標(biāo)簽后面，JS屬于阻塞加載，如果放置在前面則必須等待JS文件加載、解析，這無(wú)疑影響頁(yè)面加載速度；再者JS里面要操作節(jié)點(diǎn)也要等待HTML先行加載。

2. 解釋白屏和FOUC

• 白屏
  白屏是由于渲染時(shí)間過(guò)長(zhǎng)導(dǎo)致瀏覽器視窗出現(xiàn)白屏現(xiàn)象——一片空白。
  將CSS放在底部、使用@import引用樣式等都可能導(dǎo)致白屏。
• FOUC
  FOUC為Flash of unstyled content的縮寫(xiě)，譯作無(wú)樣式內(nèi)容閃爍。
  由于先加載HTML內(nèi)容后再加載CSS對(duì)無(wú)樣式的HTML進(jìn)行渲染產(chǎn)生的閃爍現(xiàn)象。
  將CSS放在底部可能引起FOUC。

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

JS外部引用的三種方式：

• <script src="script.js"></script>
  瀏覽器會(huì)立即加載并執(zhí)行文件腳本，此過(guò)程不等后續(xù)HTML元素的加載而立即加載執(zhí)行。
• <script async src="script.js"></script>
  瀏覽器會(huì)等到后續(xù)HTML元素一起加載并立即執(zhí)行腳本。
• <script defer src="script.js"></script>
  瀏覽器會(huì)延遲到與后續(xù)HTML元素一起加載并在所有元素解析完之后才執(zhí)行腳本。
  參見(jiàn)下圖：

JS引入方式對(duì)比

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

1、解析HTML，形成DOM樹(shù)；
2、解析CSS，形成CSSOM樹(shù)；
3、兩者進(jìn)行合成渲染，形成渲染樹(shù)；
4、渲染樹(shù)在瀏覽器中進(jìn)行定位布局，最終將頁(yè)面呈現(xiàn)在瀏覽器上。
參見(jiàn)下圖：

網(wǎng)頁(yè)渲染樹(shù)狀圖

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

JavaScript定義了6種數(shù)據(jù)類型，如下表

其中對(duì)象又包括三種子類型：狹義的對(duì)象（object）、數(shù)組（array）、函數(shù)（function）。

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

• NaN
  not a number的縮寫(xiě)，NaN 屬性的初始值就是 NaN，和 Number.NaN 的值一樣。
  在編碼很少直接使用到 NaN。通常都是在計(jì)算失敗時(shí)，作為 Math 的某個(gè)方法的返回值出現(xiàn)的（例如：Math.sqrt(-1)）或者嘗試將一個(gè)字符串解析成數(shù)字但失敗了的時(shí)候（例如：parseInt("blabla")）。
  等號(hào)運(yùn)算符（== 和 ===） 不能被用來(lái)判斷一個(gè)值是否是 NaN。必須使用 Number.isNaN() 或 isNaN() 函數(shù)。
• undefined
  undefined是指已經(jīng)聲明但未賦值的變量。
  undefined是一個(gè)表示”無(wú)”的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN。
• null
  null是一個(gè)表示”無(wú)”的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為0。
  null表示空值，即該處的值現(xiàn)在為空。比如，調(diào)用函數(shù)時(shí)，不需要傳入某個(gè)參數(shù)，這時(shí)就可以傳入null。
  查詢null的類型，JS返回object。

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

• typeof
  typeof操作符返回一個(gè)字符串,指示未經(jīng)計(jì)算的操作數(shù)的類型。
  返回類型為題5涉及的幾種數(shù)據(jù)類型。

• instanceof
  instanceof運(yùn)算符用來(lái)測(cè)試一個(gè)對(duì)象在其原型鏈構(gòu)造函數(shù)上是否具有prototype屬性。
  語(yǔ)法：object instanceof constructor
  它是用來(lái)判斷constructor.prototype是否存在于object的原型鏈上,返回值為true/false。
  如下：

  // 定義構(gòu)造函數(shù)
  function C(){}
  function D(){}
  
  var o = new C();
  
  // true，因?yàn)?Object.getPrototypeOf(o) === C.prototype
  o instanceof C;
  
  // false，因?yàn)?D.prototype不在o的原型鏈上
  o instanceof D;
  
  o instanceof Object; // true,因?yàn)镺bject.prototype.isPrototypeOf(o)返回true
  C.prototype instanceof Object // true,同上
  
  C.prototype = {};
  var o2 = new C();
  
  o2 instanceof C; // true
  
  o instanceof C; // false,C.prototype指向了一個(gè)空對(duì)象,這個(gè)空對(duì)象不在o的原型鏈上.
  
  D.prototype = new C(); // 繼承
  var o3 = new D();
  o3 instanceof D; // true
  o3 instanceof C; // true
  

代碼

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

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

console.log(1+1);//2
console.log("2"+"4");//24
console.log(2+"4");//24
console.log(+new Date());//從1970年1月1日至現(xiàn)在的毫秒數(shù)，輸出每時(shí)每刻都不一樣
console.log(+"4");//4

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

var a = 1;
a+++a;//結(jié)果為3，a+先運(yùn)算再自增，+a先自增再運(yùn)算，故1+2===3

typeof a+2;//先執(zhí)行typeof a為number，number+2結(jié)果為number2

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

var arr = [3,4,5]
for(i= 0;i< arr.length;i++){
    console.log(Math.pow(arr[i],2))
}
// 輸出 9, 16, 25

5. 遍歷 JSON, 打印里面的值 （難度**）

var obj = {
    name: 'hunger',
    sex: 'male',
    age: 28
}

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

6. 下面代碼的輸出是? 為什么 （難度***）

console.log(a);//undefined,變量聲明提升
var a = 1;
console.log(a);//1，上行代碼聲明變量a并賦值為1
console.log(b);//error,b is not defined。變量b未聲明故報(bào)錯(cuò)

參考

How browsers work

defer和async的區(qū)別

《JavaScript 標(biāo)準(zhǔn)參考教程（alpha）》

NaN

instanceof

本文章著作權(quán)歸饑人谷_九霄和饑人谷所有，轉(zhuǎn)載須說(shuō)明來(lái)源