1.CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的挟裂？
- CSS
引用外部樣式表時(shí)，使用<link>標(biāo)簽割岛，將樣式放在<head>標(biāo)簽中；直接在html中使用樣式時(shí)犯助，在<head>標(biāo)簽中添加<style>標(biāo)簽癣漆，將樣式寫在<style>標(biāo)簽中。 - JS
如果在<head>里有javascript文件剂买，那么必須是先要把這些文件都下載惠爽，解析，然后執(zhí)行之后瞬哼，程序才會(huì)繼續(xù)往下走婚肆。這樣勢(shì)必會(huì)影響速度，阻塞其他資源的加載坐慰，影響頁(yè)面速度较性，所以一般將JS的內(nèi)容放在<body>標(biāo)簽的末尾，寫在<script>標(biāo)簽中结胀；但如果是希望DOM還沒加載而要先加載的js會(huì)放置在<head>中,有些加了defer赞咙、async的<script>也會(huì)放在<head>中。
2.解釋白屏和FOUC
- 不同瀏覽器對(duì)于CSS和HTML的處理方式不同糟港，一些瀏覽器如chrome攀操，它的加載和渲染機(jī)制是等css全部加載解析完成后再渲染展示整個(gè)頁(yè)面，這個(gè)等待的時(shí)間就造成了白屏秸抚，而另一些瀏覽器如Firefox速和，它在css沒有加載前先展示頁(yè)面歹垫，等css加載后在重繪一次，這就造成了FOUC（(Flash of Unstyled Content）,即無(wú)樣式閃爍颠放。
- 如果把css樣式放在底部排惨，對(duì)于IE瀏覽器，在某些場(chǎng)景下（新窗口打開慈迈、刷新等）會(huì)出現(xiàn)白屏若贮；同樣對(duì)于IE瀏覽器，如果把css樣式放在底部痒留，在某些場(chǎng)景下（點(diǎn)擊鏈接谴麦，輸入U(xiǎn)RL，使用書簽進(jìn)入等）伸头，會(huì)出現(xiàn)FOUC現(xiàn)象匾效；對(duì)于Firefox，會(huì)一直表現(xiàn)出FOUC
- 如果把JS文件放在頭部恤磷，腳本會(huì)阻塞后面內(nèi)容的呈現(xiàn)面哼，出現(xiàn)白屏。
3.async和defer的作用是什么扫步？有什么區(qū)別
<script defer src="script.js"></script>
<script async src="script.js"></script>
如圖魔策，藍(lán)色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時(shí)間河胎，這倆都是針對(duì)腳本的闯袒；綠色線代表 HTML 解析。
defer和async是腳本異步加載的兩種方式游岳，加載后續(xù)文檔元素的過程和script.js的加載并行進(jìn)行（異步）政敢，不因?yàn)槟_本的加載阻塞頁(yè)面其他元素的加載∨咂龋【async和defer均只適用在外部js文本喷户，不支持嵌入式腳本】
async：告訴瀏覽器立刻下載其指定的JS，很有可能不是按照原來(lái)的順序來(lái)執(zhí)行访锻，如果JS前后有依賴關(guān)系褪尝，就會(huì)報(bào)錯(cuò)
defer：script.js的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded事件觸發(fā)之前完成朗若，也就是說defer會(huì)按照加載順序執(zhí)行腳本
4.簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制
1.解析HTML標(biāo)簽恼五，構(gòu)建為DOM樹
2.解析CSS文件，構(gòu)建為CSSOM樹
3.構(gòu)建render樹哭懈，render樹由DOM樹與CSSOM樹組合而成
4.布局render樹灾馒，確定每個(gè)節(jié)點(diǎn)在屏幕上的確切坐標(biāo)
5.繪制，遍歷render樹遣总，使用UI后端層繪制每個(gè)節(jié)點(diǎn)
更多參考見瀏覽器內(nèi)部工作原理
5.JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡(jiǎn)單類型?哪些是復(fù)雜類型?
- 簡(jiǎn)單類型：
1.數(shù)字 number
2.字符串 string
3.布爾 boolean
4.未定義 undefined
5.空 null - 復(fù)雜類型：
1.對(duì)象 object
2.數(shù)組 array
3.函數(shù) function
6.NaN睬罗、undefined轨功、null分別代表什么?
- NaN：Not a Number，代表非數(shù)字值的特殊值容达，用來(lái)指示某個(gè)值不是數(shù)字（如求負(fù)數(shù)的平方根）古涧。方法
parseInt（）和parseFloat()在不能解析指定的字符串就返回這個(gè)值。
要注意的是花盐，NaN與其他數(shù)值進(jìn)行比較的結(jié)果總是不相等的羡滑，包括它自身在內(nèi)，所以要使用isNaN（）來(lái)判斷一個(gè)值知否是數(shù)字
NaN == NaN; //false
NaN===NaN;//false
- undefined：表示“缺少值”算芯，就是此處應(yīng)該有一個(gè)值柒昏，但是還沒有定義
(1).變量被聲明了，但沒有賦值熙揍，就等于undefined
(2).調(diào)用函數(shù)時(shí)职祷，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined
(3).對(duì)象沒有賦值的屬性届囚，該屬性為undefined
var i;
i // undefinedfunction
f(x){console.log(x)}
f() // undefined
var o = new Object();
o.p // undefined
var x = f();
x // undefined
- null：一個(gè)空對(duì)象指針有梆，表示“沒有對(duì)象”，即該處不應(yīng)該有值
(1).作為函數(shù)參數(shù)意系，表示該函數(shù)的參數(shù)不是對(duì)象
(2).作為原型鏈的終點(diǎn)
7.typeof和instanceof的作用和區(qū)別?
由于ECMAScript是松散型的泥耀，因而需要一種方式來(lái)檢測(cè)給定變量的數(shù)據(jù)類型。
- typeof：返回一個(gè)值的數(shù)據(jù)類型蛔添，可以是數(shù)字
number爆袍，字符串string，布爾值boolean作郭，函數(shù)function，對(duì)象object,方法typeof中無(wú)論引用什么類型的對(duì)象弦疮，都只會(huì)返回object - instanceof:只有true和false兩個(gè)輸出結(jié)果夹攒，可以進(jìn)一步判斷引用類型是什么類型
代碼
1.完成如下代碼判斷一個(gè)變量是否是數(shù)字、字符串胁塞、布爾咏尝、函數(shù) （難度*）ps: 做完后可參考 underscore.js 源碼中部分實(shí)現(xiàn)
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());//1471333192537
console.log(+"4");//4
3.以下代碼的輸出結(jié)果是? （難度***）
var a = 1;
a+++a;//3
typeof a+2;//numer2
4.遍歷數(shù)組，把數(shù)組里的打印數(shù)組每一項(xiàng)的平方 （難度**）
var arr = [3,4,5];
for( var i=0;1< arr.length;i++){
console.log(arr[i]*arr[i]);
}
5.遍歷 JSON, 打印里面的值 （難度**）
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for (var i in obj){
console.log(i+":"+obj[i]);
}
6.下面代碼的輸出是? 為什么 （難度***）
console.log(a);//undefined,變量聲明提升啸罢，a已經(jīng)聲明過编检，會(huì)被提到全局作用域的開頭
var a = 1;
console.log(a);//1
console.log(b);//報(bào)錯(cuò)
本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請(qǐng)注明來(lái)源扰才。
