問答
1. CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
- CSS一般放置在head標(biāo)簽里面殴玛，樣式先行的話在加載HTML內(nèi)容時可以同時渲染樣式捅膘，避免FOUC。
- JS一般放在body標(biāo)簽后面滚粟，JS屬于阻塞加載寻仗，如果放置在前面則必須等待JS文件加載、解析凡壤，這無疑影響頁面加載速度愧沟；再者JS里面要操作節(jié)點也要等待HTML先行加載。
2. 解釋白屏和FOUC
- 白屏
白屏是由于渲染時間過長導(dǎo)致瀏覽器視窗出現(xiàn)白屏現(xiàn)象——一片空白鲤遥。
將CSS放在底部沐寺、使用@import引用樣式等都可能導(dǎo)致白屏。 - FOUC
FOUC為Flash of unstyled content的縮寫盖奈，譯作無樣式內(nèi)容閃爍混坞。
由于先加載HTML內(nèi)容后再加載CSS對無樣式的HTML進行渲染產(chǎn)生的閃爍現(xiàn)象。
將CSS放在底部可能引起FOUC。
3. async和defer的作用是什么究孕？有什么區(qū)別
JS外部引用的三種方式：
-
<script src="script.js"></script>
瀏覽器會立即加載并執(zhí)行文件腳本啥酱，此過程不等后續(xù)HTML元素的加載而立即加載執(zhí)行。 -
<script async src="script.js"></script>
瀏覽器會等到后續(xù)HTML元素一起加載并立即執(zhí)行腳本厨诸。 -
<script defer src="script.js"></script>
瀏覽器會延遲到與后續(xù)HTML元素一起加載并在所有元素解析完之后才執(zhí)行腳本镶殷。
參見下圖：
JS引入方式對比
4. 簡述網(wǎng)頁的渲染機制
1、解析HTML微酬，形成DOM樹绘趋；
2、解析CSS颗管，形成CSSOM樹陷遮；
3、兩者進行合成渲染垦江，形成渲染樹帽馋；
4、渲染樹在瀏覽器中進行定位布局比吭，最終將頁面呈現(xiàn)在瀏覽器上绽族。
參見下圖：
網(wǎng)頁渲染樹狀圖
5. JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復(fù)雜類型?
JavaScript定義了6種數(shù)據(jù)類型，如下表
| 數(shù)據(jù)類型 | 描述 | 分類 |
|---|---|---|
| 數(shù)值（number） | 整數(shù)和小數(shù)（比如1和3.14） | 簡單類型 |
| 字符串（string） | 字符組成的文本（比如”Hello World”） | 簡單類型 |
| 布爾值（boolean） | true（真）和false（假）兩個特定值 | 簡單類型 |
| undefined | 表示“未定義”或不存在衩藤，即此處目前沒有任何值 | 特殊值 |
| null | 表示空缺项秉，即此處應(yīng)該有一個值，但目前為空 | 特殊值 |
| 對象（object） | 各種值組成的集合 | 復(fù)雜類型 |
其中對象又包括三種子類型：狹義的對象（object）慷彤、數(shù)組（array）娄蔼、函數(shù)（function）。
6. NaN底哗、undefined岁诉、null分別代表什么?
- NaN
not a number的縮寫，NaN 屬性的初始值就是 NaN跋选，和 Number.NaN 的值一樣涕癣。
在編碼很少直接使用到 NaN。通常都是在計算失敗時前标，作為 Math 的某個方法的返回值出現(xiàn)的（例如：Math.sqrt(-1)）或者嘗試將一個字符串解析成數(shù)字但失敗了的時候（例如：parseInt("blabla")）坠韩。
等號運算符（== 和 ===） 不能被用來判斷一個值是否是 NaN。必須使用 Number.isNaN() 或 isNaN() 函數(shù)炼列。 - undefined
undefined是指已經(jīng)聲明但未賦值的變量只搁。
undefined是一個表示”無”的原始值，轉(zhuǎn)為數(shù)值時為NaN俭尖。 - null
null是一個表示”無”的對象氢惋，轉(zhuǎn)為數(shù)值時為0洞翩。
null表示空值，即該處的值現(xiàn)在為空焰望。比如骚亿，調(diào)用函數(shù)時，不需要傳入某個參數(shù)熊赖，這時就可以傳入null来屠。
查詢null的類型，JS返回object震鹉。
7. typeof和instanceof的作用和區(qū)別?
typeof
typeof操作符返回一個字符串,指示未經(jīng)計算的操作數(shù)的類型俱笛。
返回類型為題5涉及的幾種數(shù)據(jù)類型。-
instanceof
instanceof運算符用來測試一個對象在其原型鏈構(gòu)造函數(shù)上是否具有prototype屬性足陨。
語法：object instanceof constructor
它是用來判斷constructor.prototype是否存在于object的原型鏈上,返回值為true/false嫂粟。
如下：// 定義構(gòu)造函數(shù) 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. 完成如下代碼判斷一個變量是否是數(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ù)，輸出每時每刻都不一樣
console.log(+"4");//4
3. 以下代碼的輸出結(jié)果是? （難度***）
var a = 1;
a+++a;//結(jié)果為3平夜，a+先運算再自增蝶棋，+a先自增再運算，故1+2===3
typeof a+2;//先執(zhí)行typeof a為number忽妒，number+2結(jié)果為number2
4. 遍歷數(shù)組玩裙，把數(shù)組里的打印數(shù)組每一項的平方 （難度**）
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未聲明故報錯
參考
《JavaScript 標(biāo)準(zhǔn)參考教程（alpha）》
本文章著作權(quán)歸饑人谷_九霄和饑人谷所有吃溅，轉(zhuǎn)載須說明來源
