問答:
1. CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
CSS一般放置在的<head>標(biāo)簽中显晶。網(wǎng)頁渲染時(shí)贷岸，先解析HTML標(biāo)簽，構(gòu)建DOM樹磷雇，再解析CSS標(biāo)簽偿警，構(gòu)建CSSOM樹，然后把DOM和CSSOM組合成渲染樹唯笙。如果把CSS放置在底部螟蒸，那么頁面加載的時(shí)候可能會(huì)出現(xiàn)白屏或者無樣式內(nèi)容閃爍（FOUC）盒使。
JS一般放置body標(biāo)簽的最后面。JS會(huì)阻塞加載的七嫌，如果放在前面少办，會(huì)影響頁面加載的速度，如果JS文件比較大诵原，算法也比較復(fù)雜的話英妓，影響更大。
2. 解釋白屏和FOUC
白屏和無樣式內(nèi)容閃爍（FOUC）是由于不用瀏覽器加載顯示頁面的機(jī)制不同造成的绍赛。當(dāng)把CSS樣式放在底部或者使用@import方式引入樣式時(shí)鞋拟，一些瀏覽器例如chrome，它的加載和渲染機(jī)制是等CSS全部加載解析完成后再渲染展示頁面惹资，而這個(gè)等待的時(shí)間就是白屏。另外一些瀏覽器航闺，如Firefox褪测，它會(huì)在CSS未加載前展示頁面，等CSS加載后再重新繪一次潦刃，這就造成了FOUC（無樣式內(nèi)容閃爍）侮措。如果把JS文件放在頭部，腳本會(huì)阻塞后面內(nèi)容的展示和其后組件的下載乖杠，也會(huì)導(dǎo)致白屏現(xiàn)象分扎。
3. async和defer的作用是什么？有什么區(qū)別胧洒。
當(dāng)瀏覽器遇到script腳本的時(shí)候：
- 沒有defer和async時(shí)畏吓，
<script src="script.js"></script>，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本卫漫，“立即”指的是在渲染該script標(biāo)簽之下的文檔元素之前菲饼，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行列赎。 - 有async宏悦，
<script async src="script.js"></script>，加載和渲染后續(xù)文檔元素的過程將和script.js的加載與執(zhí)行并行進(jìn)行（異步）包吝。 - 有defer
<script defer src="script.js"></script>饼煞，加載后續(xù)文檔元素的過程將和script.js的加載并行進(jìn)行（異步），但script.js的執(zhí)行要在所有元素解析完成之后诗越，DOMContentLoaded事件觸發(fā)之前完成砖瞧。
defer和async
藍(lán)色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時(shí)間掺喻，這倆都是針對(duì)腳本的芭届；綠色線代表 HTML 解析储矩。
此圖告訴我們以下幾個(gè)要點(diǎn)：
a. defer 和 async 在網(wǎng)絡(luò)讀取（下載）這塊兒是一樣的褂乍，都是異步的（相較于 HTML 解析）
b. 它倆的差別在于腳本下載完之后何時(shí)執(zhí)行持隧，顯然defer 是最接近我們對(duì)于應(yīng)用腳本加載和執(zhí)行的要求的
c. 關(guān)于 defer，此圖未盡之處在于它是按照加載順序執(zhí)行腳本的逃片，這一點(diǎn)要善加利用
d. async 則是一個(gè)亂序執(zhí)行的主屡拨，反正對(duì)它來說腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何褥实，只要它加載完了就會(huì)立刻執(zhí)行
e. 仔細(xì)想想呀狼，async 對(duì)于應(yīng)用腳本的用處不大，因?yàn)樗耆豢紤]依賴（哪怕是最低級(jí)的順序執(zhí)行）损离，不過它對(duì)于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的哥艇，最典型的例子：Google Analytics
4. 簡述網(wǎng)頁的渲染機(jī)制?
- Create/Update DOM And request css/image/js：瀏覽器請(qǐng)求到HTML代碼后，在生成DOM的最開始階段（應(yīng)該是Bytes → characters后）僻澎，并行發(fā)起css貌踏、圖片、js的請(qǐng)求窟勃，無論他們是否在HEAD里祖乳。
注意：發(fā)起js文件的下載request并不需要DOM處理那個(gè)script節(jié)點(diǎn)。比如：簡單的正則匹配就能做到這一點(diǎn)秉氧，雖然實(shí)際上并不一定是通過正則眷昆。這是很多人在理解渲染機(jī)制的時(shí)候存在的誤區(qū)。 - Create/Update Render CSSOM：CSS文件下載完成汁咏，開始構(gòu)建CSSOM亚斋。
- Create/Update Render Tree：所有CSS文件下載完成，CSSOM構(gòu)建結(jié)束后攘滩，和DOM一起生成Render Tree伞访。
- Layout：有了Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點(diǎn)轰驳、各個(gè)節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系厚掷。下一步操作稱之為layout，顧名思義就是計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置级解。
- Painting：Layout之后冒黑，瀏覽器已經(jīng)知道了哪些節(jié)點(diǎn)要顯示（which nodes are visible）、么個(gè)節(jié)點(diǎn)的CSS屬性是什么（their computed style）勤哗、每個(gè)節(jié)點(diǎn)在屏幕中的位置是哪里（geometry）抡爹。就進(jìn)入了最后一步：Painting,按照算出來的規(guī)則，通過顯卡芒划，把內(nèi)容畫到屏幕上冬竟。
以上五個(gè)步驟前3個(gè)步驟之所有使用 “Create/Update” 是因?yàn)镈OM欧穴、CSSOM、Render Tree都可能在第一次Painting后又被更新多次泵殴，比如JS修改了DOM或者CSS屬性涮帘。
Layout 和 Painting 也會(huì)被重復(fù)執(zhí)行，除了DOM笑诅、CSSOM更新的原因外调缨，圖片下載完成后也需要調(diào)用Layout 和 Painting來更新網(wǎng)頁。
5. JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復(fù)雜類型?
JavaScript語言的每一個(gè)值吆你，都屬于某一種數(shù)據(jù)類型弦叶。JavaScript的數(shù)據(jù)類型，共有六種：
- 數(shù)值（number）：整數(shù)和小數(shù)（比如1和3.14）
- 字符串（string）：字符組成的文本（比如“Hello World”）
- 布爾值（boolean）：true（真）和false（假）兩個(gè)特定值
- undefined：表示“未定義”或不存在妇多，即此處目標(biāo)沒有任何值
- null：表示空缺伤哺，即此處應(yīng)該由一個(gè)值，但目前為空
- object：是一種復(fù)雜的數(shù)據(jù)類型者祖，表示各種值組成的集合
6. NaN默责、undefined、null分別代表什么?
NaN：非數(shù)字值的特殊值咸包。該屬性用于指示某個(gè)值不是數(shù)字≌认海可以把Number對(duì)象設(shè)置為該值烂瘫，來指示不是數(shù)字值。這個(gè)數(shù)值用于表示一個(gè)本來要返回?cái)?shù)值的操作數(shù)未返回?cái)?shù)值的情況（這樣就不會(huì)拋出錯(cuò)誤）奇适。注意：NaN與其他數(shù)值進(jìn)行比較的結(jié)果總是不相等的坟比，包括它自身在內(nèi)。
-
undefined：表示不存在值嚷往，就是此處目前不存在任何值葛账。典型用法是：
- 變量被聲明了，但沒有賦值時(shí)皮仁，就等于undefined籍琳。
- 調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒有提供贷祈，該參數(shù)等于undefined趋急。
- 對(duì)象沒有賦值的屬性，該屬性的值為undefined势誊。
- 函數(shù)沒有返回值時(shí)呜达，默認(rèn)返回undefined。
-
null：表示空值粟耻，即該出的值現(xiàn)在為空查近。典型用法是：
- 作為函數(shù)的參數(shù)眉踱，表示該函數(shù)的參數(shù)是一個(gè)沒有任何內(nèi)容的對(duì)象。
- 作為對(duì)象原型鏈的終點(diǎn)霜威。
7. typeof和instanceof的作用和區(qū)別?
- typeof：可以用來確定一個(gè)變量的數(shù)據(jù)類型谈喳，用來返回操作數(shù)類型的字符串。它所返回的結(jié)果一般有：布爾：boolean侥祭、數(shù)字：number叁执、字符串：string、函數(shù)：function和undefined：undefined矮冬，除此之外谈宛，其他情況都返回object。
- instanceof：可以用來確定一個(gè)引用類型值是什么類型的對(duì)象胎署。instanceof 左操作數(shù)是一個(gè)類吆录，右操作數(shù)是標(biāo)識(shí)對(duì)象的類。如果左側(cè)的對(duì)象是右側(cè)類的實(shí)例琼牧，則返回true恢筝。而js中對(duì)象的類是通過初始化它們的構(gòu)造函數(shù)來定義的。即instanceof的右操作數(shù)應(yīng)當(dāng)是一個(gè)函數(shù)巨坊。所有的對(duì)象都是object的實(shí)例撬槽。如果左操作數(shù)不是對(duì)象，則返回false,如果右操作數(shù)不是函數(shù)趾撵，則拋出typeError侄柔。instanceof 運(yùn)算符是用來測(cè)試一個(gè)對(duì)象是否在其原型鏈原型構(gòu)造函數(shù)的屬性。其語法是object instanceof constructor占调。instanceof 操作符用來比較兩個(gè)操作數(shù)的構(gòu)造函數(shù)暂题。只有在比較自定義的對(duì)象時(shí)才有意義。 如果用來比較內(nèi)置類型究珊，將會(huì)和 typeof 操作符 一樣用處不大薪者。
代碼：
1. 完成如下代碼判斷一個(gè)變量是否是數(shù)字、字符串剿涮、布爾言津、函數(shù) （難度*）
<pre>
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
</pre>
2. 以下代碼的輸出結(jié)果是?（難度**）
<pre>
console.log(1+1); //2，兩個(gè)數(shù)相加取试，輸出數(shù)值纺念；
console.log("2"+"4"); //24，兩個(gè)字符串相加想括，輸出字符串陷谱；
console.log(2+"4"); //24，一個(gè)數(shù)值和一個(gè)字符串相加，輸出字符串烟逊；
console.log(+new Date());//1474425015234渣窜，用new Date()參與計(jì)算會(huì)自動(dòng)轉(zhuǎn)換成從1970.1.1到現(xiàn)在的時(shí)間的毫秒數(shù)；
console.log(+"4");//4宪躯，只有一個(gè)字符串乔宿，會(huì)試著將其轉(zhuǎn)換成數(shù)字；
</pre>
3. 以下代碼的輸出結(jié)果是? （難度***）
<pre>
var a = 1;
a+++a;//3访雪；a++的運(yùn)算級(jí)高详瑞，即（a++）+a；
typeof a+2;//number2臣缀；typeof的運(yùn)算級(jí)坝橡，先得出typeof a結(jié)果是number，再+2精置，完成一個(gè)字符串的拼接计寇；
</pre>
4. 遍歷數(shù)組，把數(shù)組里的打印數(shù)組每一項(xiàng)的平方 （難度**）
<pre>
var arr = [3,4,5]
for(var i = 0; i < arr.length; i++){
console.log(arr[i]*arr[i]);
}// 輸出 9, 16, 25
</pre>
5. 遍歷 JSON, 打印里面的值 （難度**）
<pre>
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for (var i in obj) {
console.log(i + '：' +obj[i]);
}// 輸出 name: hunger, sex: male, age:28
</pre>
6. 下面代碼的輸出是? 為什么 （難度***）
<pre>
console.log(a);//undefined;變量a已經(jīng)被聲明脂倦，但是由于變量提升番宁，其值是初始值undefined
var a = 1;//1；a被賦值為1赖阻；
console.log(a);//1;a在此之前已經(jīng)被賦值為1蝶押；
console.log(b);//報(bào)錯(cuò)；變量b沒有被定義火欧；
</pre>
本文版權(quán)歸本人及饑人谷所有棋电，轉(zhuǎn)載請(qǐng)注明出處
