1.CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的浇辜？

css一般放在頭部head標(biāo)簽中，網(wǎng)頁(yè)渲染時(shí)唾戚，先解析html標(biāo)簽柳洋，生成DOM樹，在解析css標(biāo)簽叹坦，構(gòu)成cssdom樹熊镣，然后再把DOM和cssdom組合成渲染樹。如果班css放在后面，可能會(huì)出現(xiàn)白屏問(wèn)題或者FOUC（Flash of Unstyled Content ）無(wú)樣式內(nèi)容閃爍绪囱。

JS一般放在body的最后面测蹲，js需要被HTml引用才能再瀏覽器中運(yùn)行，而在HTML中有不同的方式來(lái)引用腳本文件鬼吵，這些方式就可能帶來(lái)性能問(wèn)題扣甲。當(dāng)瀏覽器遇到script標(biāo)簽，它不知道JS代碼是否會(huì)修改頁(yè)面齿椅，所以他會(huì)停止解析頁(yè)面琉挖，執(zhí)行JS代碼之后再來(lái)繼續(xù)渲染頁(yè)面。綜上所述涣脚，瀏覽器遇到script示辈，它會(huì)優(yōu)先下載并解析里面的JS代碼，禁用并發(fā)遣蚀，這樣一來(lái)就會(huì)阻塞后面頁(yè)面的加載和渲染顽耳，造成白屏現(xiàn)象。所以JS代碼一般放置在最后面避免這種情況的發(fā)生妙同。

2.解釋白屏和FOUC(無(wú)樣式內(nèi)容閃爍)

*不同的瀏覽器對(duì)CSS和HTML的處理方式不同射富，有的是等待CSS加載完成之后，對(duì)HTML元素再進(jìn)行渲染和展示（白屏問(wèn)題）粥帚。有的是相對(duì)HTML元素進(jìn)行展示胰耗，然后等待CSS加載完成之后重新對(duì)樣式進(jìn)行修改（FOUC無(wú)樣式內(nèi)容閃爍）
*如果把CSS樣式放在底部，對(duì)于IE瀏覽器芒涡，再某些場(chǎng)景下（新窗口打開柴灯，刷新等）頁(yè)面會(huì)出現(xiàn)白屏，而不是內(nèi)容逐步展現(xiàn)费尽，如果使用@import標(biāo)簽赠群，即使CSS中放入link，并且放在頭部旱幼，也可能出現(xiàn)白屏現(xiàn)象查描。
*如果把CSS放在底部，對(duì)于IE瀏覽器柏卤，再某些場(chǎng)景下（點(diǎn)擊鏈接冬三，輸入U(xiǎn)RL，使用書簽進(jìn)入等）缘缚，會(huì)出現(xiàn)FOUC現(xiàn)象（逐步加載無(wú)樣式的內(nèi)容勾笆，等CSS加載后頁(yè)面突然展現(xiàn)樣式），對(duì)于Firefox會(huì)一直表現(xiàn)出FOUC桥滨。
*如果把JS文件放在頭部窝爪，腳本會(huì)阻塞后面內(nèi)容的展現(xiàn)弛车，腳本會(huì)阻塞其后組件的下載，出現(xiàn)白屏問(wèn)題蒲每。

3.async和defer的作用是什么帅韧？有什么區(qū)別？

我們先來(lái)看看瀏覽器遇到script的三種情況：
1.<script src="script.js"></script>
沒(méi)有defer或async啃勉，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本忽舟，“立即”指的是再渲染改script標(biāo)簽之下的文檔元素之前，也就是說(shuō)不等待后續(xù)載入的文檔元素淮阐，讀到就加載并執(zhí)行叮阅。
2.<script async src="script.js"></script>
有async加載和渲染后續(xù)文檔元素的過(guò)程將和script.js的加載與執(zhí)行并行進(jìn)行（異步）。
3.<script defer src="script.js"></script>
有defer泣特，加載后續(xù)文檔元素的過(guò)程將和script.js的加載并行進(jìn)行（異步）浩姥，但是script.js的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded事件觸發(fā)之前完成状您。

defer和 async

關(guān)于此圖可知它們的區(qū)別和幾個(gè)要點(diǎn)：
1.defer 和 async在網(wǎng)絡(luò)讀取這塊是一樣的勒叠，都是異步。
2.它們的差別在于腳本下載完成之后何時(shí)執(zhí)行膏孟，顯然defer是最接近我們對(duì)于腳本加載和執(zhí)行的要求的眯分。
3.關(guān)于defer，此圖未盡之處在于它是按照加載順序執(zhí)行腳本的柒桑，這一點(diǎn)要善加利用弊决。
4.async則是一個(gè)亂序執(zhí)行的，反正對(duì)它來(lái)說(shuō)腳本的加載和執(zhí)行是緊緊挨著的魁淳，所以不管你聲明的順序如何飘诗，只要它加載完了就會(huì)立刻執(zhí)行。
5.仔細(xì)想想界逛，async 對(duì)于應(yīng)用腳本的用處不大昆稿，因?yàn)樗耆豢紤]依賴（哪怕是最低級(jí)的順序執(zhí)行），不過(guò)它對(duì)于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來(lái)說(shuō)卻是非常合適的息拜，最典型的例子：Google Analytics.
參考資料

4.簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制

1溉潭、Create/Update DOM And request css/image/js：瀏覽器請(qǐng)求到HTML代碼后，在生成DOM的最開始階段（應(yīng)該是 Bytes → characters 后）该溯，并行發(fā)起css岛抄、圖片别惦、js的請(qǐng)求狈茉，無(wú)論他們是否在HEAD里。
注意：發(fā)起js文件的下載request并不需要DOM處理到那個(gè)script節(jié)點(diǎn)掸掸，比如：簡(jiǎn)單的正則匹配就能做到這一點(diǎn)氯庆，雖然實(shí)際上并不一定是通過(guò)正則：）蹭秋。這是很多人在理解渲染機(jī)制的時(shí)候存在的誤區(qū)
2、Create/Update Render CSSOM：CSS文件下載完成堤撵，開始構(gòu)建CSSOM
3仁讨、Create/Update Render Tree：所有CSS文件下載完成，CSSOM構(gòu)建結(jié)束后实昨，和 DOM ?一起生成 Render Tree洞豁。
4、Layout：有了Render Tree荒给，瀏覽器已經(jīng)能知道網(wǎng)頁(yè)中有哪些節(jié)點(diǎn)丈挟、各個(gè)節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系。下一步操作稱之為Layout志电，顧名思義就是計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置曙咽。
5、Painting：Layout后挑辆，瀏覽器已經(jīng)知道了哪些節(jié)點(diǎn)要顯示（which nodes are visible）例朱、每個(gè)節(jié)點(diǎn)的CSS屬性是什么（their computed styles）、每個(gè)節(jié)點(diǎn)在屏幕中的位置是哪里（geometry）鱼蝉。就進(jìn)入了最后一步：Painting洒嗤，按照算出來(lái)的規(guī)則，通過(guò)顯卡魁亦，把內(nèi)容畫到屏幕上烁竭。

DOM 和 CSSOM 合并后生成 Render Tree

參考博客

5.JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡(jiǎn)單類型?哪些是復(fù)雜類型?

JavaScript語(yǔ)言的每一個(gè)值都屬于某一種數(shù)據(jù)類型。JavaScript的數(shù)據(jù)類型一共有六種吉挣，分為五種簡(jiǎn)單數(shù)據(jù)類型（也稱為基本數(shù)據(jù)類型）：

• 數(shù)值（number）：整數(shù)和小數(shù)派撕，比如：1和3.14 。
• 字符串（string）：字符組成的文本睬魂，比如："Hello World"终吼。
• 布爾值（boolean）：true和false兩個(gè)特定的值。
• undefined：表示未定義或者不存在氯哮，即此處目前沒(méi)有任何值际跪。
• null：表示空缺，即此處應(yīng)該有一個(gè)值喉钢，但目前為空姆打。

還有一種復(fù)雜數(shù)據(jù)類型—object，也就是對(duì)象肠虽，它表示各種值組成的集合幔戏。對(duì)象又可以分成三個(gè)子類型。
*狹義的對(duì)象（object）
*數(shù)組（array）
*函數(shù)（function）
通常將數(shù)值税课、字符串闲延、布爾值稱為原始類型（primitive type）的值痊剖，即它們是最基本的數(shù)據(jù)類型，不能再細(xì)分垒玲。而將對(duì)象稱為合成類型（complex type）的值陆馁，因?yàn)橐粋€(gè)對(duì)象往往是多個(gè)原始類型的值的合成，可以看作是一個(gè)存放各種值的容器合愈。至于undefined和null叮贩，一般將它們看成兩個(gè)特殊值。

6.NaN佛析、undefined妇汗、null分別代表什么?

NaN：
表示非數(shù)字，這個(gè)數(shù)值用于表示一個(gè)本來(lái)要返回?cái)?shù)值的操作數(shù)未返回?cái)?shù)值的情況（這樣就不會(huì)拋出錯(cuò)誤）说莫。
NaN有兩個(gè)不一般的特點(diǎn)杨箭，第一，NaN和任何值都不相等储狭，包括自己互婿；第二，任何涉及NaN的操作都會(huì)返回NaN辽狈。

undefined：
undefined表示不存在值慈参，就是此處目前不存在任何值。典型用法是：

• 變量被聲明了刮萌，但沒(méi)有賦值時(shí)驮配，就等于undefined。
• 調(diào)用函數(shù)時(shí)着茸，應(yīng)該提供的參數(shù)沒(méi)有提供壮锻，該參數(shù)等于undefined。
• 對(duì)象沒(méi)有賦值的屬性涮阔，該屬性的值為undefined猜绣。
• 函數(shù)沒(méi)有返回值時(shí)，默認(rèn)返回undefined敬特。

null：
null表示空值掰邢，即該處的值現(xiàn)在為空。典型用法是：作為函數(shù)的參數(shù)伟阔，表示該函數(shù)的參數(shù)是一個(gè)沒(méi)有任何內(nèi)容的對(duì)象辣之。
作為對(duì)象原型鏈的終點(diǎn)。

分析

7.typeof和instanceof的作用和區(qū)別?

1.typeof：可以用來(lái)確定一個(gè)變量的數(shù)據(jù)類型 ,用來(lái)返回操作數(shù)類型的字符串皱炉。
typeof會(huì)返回number怀估、string、boolean娃承、function奏夫、undefined
返回undefined怕篷，除此以外历筝，其他的都是返回object酗昼。
2.instanceof：可以用來(lái)確定一個(gè)引用類型值的是什么類型的對(duì)象
instanceof左操作數(shù)是一個(gè)類，右操作數(shù)是標(biāo)識(shí)對(duì)象的類梳猪。如果左側(cè)的對(duì)象是右側(cè)類的實(shí)例麻削，則返回true.而js中對(duì)象的類是通過(guò)初始化它們的構(gòu)造函數(shù)來(lái)定義的。即instanceof的右操作數(shù)應(yīng)當(dāng)是一個(gè)函數(shù)春弥。所有的對(duì)象都是object的實(shí)例呛哟。如果左操作數(shù)不是對(duì)象，則返回false,如果右操作數(shù)不是函數(shù)匿沛，則拋出typeError扫责。
instanceof 運(yùn)算符是用來(lái)測(cè)試一個(gè)對(duì)象是否在其原型鏈原型構(gòu)造函數(shù)的屬性。其語(yǔ)法是object instanceof constructor
instanceof操作符用來(lái)比較兩個(gè)操作數(shù)的構(gòu)造函數(shù)逃呼。只有在比較自定義的對(duì)象時(shí)才有意義鳖孤。 如果用來(lái)比較內(nèi)置類型，將會(huì)和 typeof操作符 一樣用處不大抡笼。

參考資料：
typeof 和 instanceOf的區(qū)別

代碼題：

1.完成如下代碼判斷一個(gè)變量是否是數(shù)字苏揣、字符串、布爾推姻、函數(shù) （難度*）平匈。

function isNumber(el){// todo ...}
function isString(el){ //todo ...}
function isBoolean(el){ //todo ...}
function isFunction(el){ //todo ...}
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

代碼預(yù)覽

2.以下代碼的輸出結(jié)果是?

console.log(1+1); //2   加法計(jì)算
console.log("2"+"4"); //24
console.log(2+"4"); //24
console.log(+new Date()); //1471433856475:自動(dòng)轉(zhuǎn)換為從1970.1.1開始的毫秒數(shù)。
console.log(+"4");//4

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

var a = 1;
a+++a; //3
typeof a+2; //number2

運(yùn)算符優(yōu)先級(jí)匯總表

4.遍歷數(shù)組藏古，把數(shù)組里的打印數(shù)組每一項(xiàng)的平方（難度**）增炭。

var arr = [3,4,5]
// todo..// 
輸出 9, 16, 25

代碼預(yù)覽

5.遍歷 JSON, 打印里面的值（難度**）。

var obj = { 
name: 'hunger', sex: 'male', age: 28
}
//todo ...
// 輸出 name: hunger, sex: male, age:28

代碼預(yù)覽

6.下面代碼的輸出是? 為什么 （難度***）

console.log(a);//undefined;因?yàn)镴avaScript引擎的工作方式是拧晕，先解析代碼弟跑，獲取所有被聲明的變量，然后再一行一行地運(yùn)行防症。這造成的結(jié)果孟辑，就是所有的變量的聲明語(yǔ)句，都會(huì)被提升到代碼的頭部蔫敲，這就叫做變量提升饲嗽。
var a = 1;
console.log(a);//1;在它之前a已經(jīng)被賦值為1；
console.log(b);//報(bào)錯(cuò);b沒(méi)有被定義奈嘿；

              本文版權(quán)歸作者饑人谷_Josh和饑人谷所有貌虾，轉(zhuǎn)載請(qǐng)注明來(lái)源