問答

1. CSS和JS在網頁中的放置順序是怎樣的？

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

2. 解釋白屏和FOUC

• 白屏
  白屏是由于渲染時間過長導致瀏覽器視窗出現白屏現象——一片空白。
  將CSS放在底部、使用@import引用樣式等都可能導致白屏。
• FOUC
  FOUC為Flash of unstyled content的縮寫，譯作無樣式內容閃爍。
  由于先加載HTML內容后再加載CSS對無樣式的HTML進行渲染產生的閃爍現象。
  將CSS放在底部可能引起FOUC。

3. async和defer的作用是什么？有什么區別

JS外部引用的三種方式：

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

JS引入方式對比

4. 簡述網頁的渲染機制

1、解析HTML，形成DOM樹；
2、解析CSS，形成CSSOM樹；
3、兩者進行合成渲染，形成渲染樹；
4、渲染樹在瀏覽器中進行定位布局，最終將頁面呈現在瀏覽器上。
參見下圖：

網頁渲染樹狀圖

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

JavaScript定義了6種數據類型，如下表

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

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

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

7. typeof和instanceof的作用和區別?

• typeof
  typeof操作符返回一個字符串,指示未經計算的操作數的類型。
  返回類型為題5涉及的幾種數據類型。

• instanceof
  instanceof運算符用來測試一個對象在其原型鏈構造函數上是否具有prototype屬性。
  語法：object instanceof constructor
  它是用來判斷constructor.prototype是否存在于object的原型鏈上,返回值為true/false。
  如下：

  // 定義構造函數
  function C(){}
  function D(){}
  
  var o = new C();
  
  // true，因為 Object.getPrototypeOf(o) === C.prototype
  o instanceof C;
  
  // false，因為 D.prototype不在o的原型鏈上
  o instanceof D;
  
  o instanceof Object; // true,因為Object.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指向了一個空對象,這個空對象不在o的原型鏈上.
  
  D.prototype = new C(); // 繼承
  var o3 = new D();
  o3 instanceof D; // true
  o3 instanceof C; // true
  

代碼

1. 完成如下代碼判斷一個變量是否是數字、字符串、布爾、函數 （難度*）

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. 以下代碼的輸出結果是?（難度**）

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

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

var a = 1;
a+++a;//結果為3，a+先運算再自增，+a先自增再運算，故1+2===3

typeof a+2;//先執行typeof a為number，number+2結果為number2

4. 遍歷數組，把數組里的打印數組每一項的平方 （難度**）

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未聲明故報錯

參考

How browsers work

defer和async的區別

《JavaScript 標準參考教程（alpha）》

NaN

instanceof

本文章著作權歸饑人谷_九霄和饑人谷所有，轉載須說明來源