keywords: 白屏铃辖、FOUC、asyns猪叙、defer娇斩、渲染機制仁卷、JavaScript數(shù)據(jù)類型、犬第。
-
CSS和JS在網(wǎng)頁中的放置順序是怎樣的锦积？
css一般放在head標(biāo)簽內(nèi)，并用link引入歉嗓；
js一般放在body底部丰介。
參考：
高性能web站點的14條原則
-
解釋白屏和FOUC
如果把樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)。（已過時）
如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏 鉴分。
FOUC (Flash of Unstyled Content) 無樣式內(nèi)容閃爍：如果把樣式放在底部,瀏覽器會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式).
白屏：
瀏覽器會延遲渲染在script標(biāo)簽后的內(nèi)容哮幢，直到script完成下載、解析和執(zhí)行志珍。但更重要的是橙垢，在scripts完成下載和執(zhí)行前，瀏覽器會阻塞或限制script之后的html內(nèi)容的下載碴裙，增加round-trip times（簡稱RTT钢悲，指數(shù)據(jù)在網(wǎng)絡(luò)上發(fā)送并得到回應(yīng)所用的時間）。
如果把script放在頂部舔株，而css放在底部莺琳，頁面就會在script執(zhí)行前保持空白，即白屏载慈。
將樣式表放在文檔底部惭等，頁面會白屏或FOUC（根據(jù)瀏覽器的處理方式的不同，二者選一）办铡。
FOUC：
樣式表被放在了文檔底部辞做，當(dāng)頁面逐步加載時，文字首先顯示寡具，然后是圖片秤茅。最后，在樣式表 正確地下載并解析之后童叠，已經(jīng)呈現(xiàn)的文字和圖片要用新的樣式重新繪制框喳，這就是“無樣式內(nèi)容閃爍”。截至目前厦坛，firefox和ie都會出現(xiàn)這種現(xiàn)象五垮，chrome不會。
-
async和defer的作用是什么杜秸？有什么區(qū)別?
<script src="script.js"></script>
沒有defer或async放仗，瀏覽器會立即加載并執(zhí)行指定的腳本，不會等待后續(xù)元素載入撬碟。
<script async src="script.js"></script>
使用async诞挨，加載和渲染后續(xù)文檔元素的過程將和script.js的加載和執(zhí)行并行（異步）莉撇。只對外部腳本文件有效。
<script defer src="script.js"></script>
使用defer亭姥，加載后續(xù)文檔元素的過程將和script.js的加載和執(zhí)行并行（異步）稼钩，與async不同的是，script.js在所有元素解析完成之后达罗，DOMContentLoaded事件觸發(fā)之前完成坝撑。
-
簡述網(wǎng)頁的渲染機制
1、 解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
2粮揉、 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
3巡李、 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
4、 在渲染樹的基礎(chǔ)上進行布局, 計算每個節(jié)點的幾何結(jié)構(gòu)
5扶认、 把每個節(jié)點繪制到屏幕上 (painting)
-
JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復(fù)雜類型?
JavaScript語言的每一個值侨拦，都屬于某一種數(shù)據(jù)類型。JavaScript的數(shù)據(jù)類型辐宾，共有六種狱从。（ES6新增了第七種Symbol類型的值）
- 數(shù)值（number）：整數(shù)和小數(shù)（比如1和3.14）
- 字符串（string）：字符組成的文本（比如"Hello World"）
- 布爾值（boolean）：true（真）和false（假）兩個特定值
- undefined：表示“未定義”或不存在，即此處目前沒有任何值
- null：表示空缺叠纹，即此處應(yīng)該有一個值季研，但目前為空
- 對象（object）：各種值組成的集合
5種簡單類型(基本數(shù)據(jù)類型)：Undefined、Null誉察、Boolean与涡、Number和String。
1種復(fù)雜類型：Object持偏。
-
NaN驼卖、undefined、null分別代表什么?
NaN含義是Not a Number鸿秆，表示非數(shù)字酌畜，NaN和任何值都不相等，包括自己卿叽。
NaN == NaN; //false
null和undefined都可以表示“沒有”檩奠，在if語句中，它們都會被自動轉(zhuǎn)成false附帽，但它們在用法上存在區(qū)別。
null表示空值井誉，即該處的值現(xiàn)在為空蕉扮。典型用法是：
1、作為函數(shù)的參數(shù)颗圣，表示該函數(shù)的參數(shù)是一個沒有任何內(nèi)容的對象喳钟。
2屁使、作為對象原型鏈的終點。
undefined表示不存在值奔则，即此處目前不存在任何值蛮寂。典型用法是：
1、變量被聲明了易茬，但沒有賦值時酬蹋，就等于undefined。
2抽莱、調(diào)用函數(shù)時范抓，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined食铐。
3匕垫、對象沒有賦值的屬性，該屬性的值為undefined虐呻。
4象泵、函數(shù)沒有返回值時，默認返回undefined斟叼。
var i;
i//undefined
function f(x){console.log(x)}
f()//undefined
var o = new Object();
o.p//undefined
var x=f();
x//undefined
-
typeof和instanceof的作用和區(qū)別?
typeof運算符可以返回一個值的數(shù)據(jù)類型偶惠，可能有以下結(jié)果。
（1）原始類型
數(shù)值犁柜、字符串洲鸠、布爾值分別返回number、string馋缅、boolean扒腕。
typeof 123//'number'
typeof '123'//'string'
typeof false//'boolean'
（2）函數(shù)
函數(shù)返回function
function f() {}
typeof f
//'function'
（3）undefined
undefined返回undefined
typeof undefined
//'undefined'
利用這一點，typeof可以用來檢查一個未被聲明的變量而不報錯萤悴。
（4）其他
除此以外瘾腰，其他情況都返回object。
typeof windows // 'object'
typeof {} //'object'
typeof [] //'object'
typeof null //'object'
instanceof運算符返回一個布爾值覆履，表示一個對象是否由某個構(gòu)造函數(shù)創(chuàng)建蹋盆。
var v = new Vehicle();
v instanceof Vehicle // true
instanceof運算符左邊是實例對象，右邊是構(gòu)造函數(shù)硝全。
在Javascript中栖雾，只要是對象，就有對應(yīng)的構(gòu)造函數(shù)伟众。因此析藕，instanceof運算符可以判斷值的類型。與typeof不同的是凳厢，instanceof運算符只能用于對象账胧，不適合用于原始類型的值竞慢。
var s = 'hello';
s instanceof String //false
var s = new String('hello');
s instanceof String //true
上述代碼中，字符串不是String對象的實例（因為字符串不是對象）治泥，所以返回false筹煮，而字符串對象是String對象的實例，所以返回true居夹。
此外败潦，undefined和null不是對象，所以instanceof 運算符總是返回false吮播。
undefined instanceof Object //false
null instanceof Object //false
如果存在繼承關(guān)系变屁，也就是說，a是A的實例意狠，而A繼承了B粟关，那么instanceof運算符對A和B都返回true。
var a =[];
a instanceof Array // true
a instanceof Object //true
上面代碼顯示环戈，a是一個數(shù)組闷板，所以它是 Array的實例；同時院塞，Array繼承Object遮晚，所以a也是Object的實例 。
利用instanceof運算符拦止，還可以巧妙解決县遣，調(diào)用構(gòu)造函數(shù)時，忘加new命令的問題汹族。
function Fubar (foo, bar) {
if (this instanceof Fubar) {
this._foo = foo;
this._bar = bar;
} else {
return new Fubar(foo, bar);
}
}
上面代碼使用instanceof運算符萧求，在函數(shù)體內(nèi)部判斷this關(guān)鍵字是否為構(gòu)造函數(shù)Fubar的實例。如果不是顶瞒，就表明忘了加new命令夸政。
區(qū)別：typeof 是判斷對象的數(shù)據(jù)類型，而instanceof是用來驗證對象是否是某個函數(shù)創(chuàng)建的實例榴徐。
參考：
JavaScript標(biāo)準(zhǔn)參考教程
代碼
-
完成如下代碼判斷一個變量是否是數(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
-
以下代碼的輸出結(jié)果是?（難度**）
console.log(1+1);
console.log("2"+"4");
console.log(2+"4");
console.log(+new Date());
console.log(+"4");
//2 數(shù)值相加
//"24" 字符串拼接
//"24" 數(shù)字與字符串相加耗帕，數(shù)字轉(zhuǎn)換成字符串
//1467877385172 將返回的當(dāng)前日期、時間轉(zhuǎn)換成毫秒袱贮， '1970/01/01 00:00:00' 為起點
//4 字符串4轉(zhuǎn)換成數(shù)字4
-
以下代碼的輸出結(jié)果是?
var a = 1;
a+++a; //先執(zhí)行a++仿便，得到1，再與a相加，得到3
typeof a+2; //typeof a 優(yōu)先級最高探越，得到字符串number
//"number2"
-
遍歷數(shù)組，把數(shù)組里的打印數(shù)組每一項的平方
var arr = [3,4,5]
for (var i=0 ;i<arr.length;i++) {
console.log(arr[i]*arr[i])
}
// 輸出 9, 16, 25
-
遍歷 JSON, 打印里面的值 （難度**）
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for (var val in obj) {
console.log(val+':'+ obj[val])
}
//todo ...
// 輸出 name: hunger, sex: male, age:28
-
下面代碼的輸出是? 為什么 （難度***）
console.log(a); //undefined
var a = 1; //變量提升
console.log(a); //1
console.log(b); //ReferenceError: b is not defined
