1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
css一般放在頭部head標(biāo)簽中，網(wǎng)頁渲染時(shí)，先解析html標(biāo)簽，生成DOM樹，在解析css標(biāo)簽，構(gòu)成cssdom樹，然后再把DOM和cssdom組合成渲染樹。如果班css放在后面，可能會(huì)出現(xiàn)白屏問題或者FOUC（Flash of Unstyled Content ）無樣式內(nèi)容閃爍。
JS一般放在body的最后面，js需要被HTml引用才能再瀏覽器中運(yùn)行，而在HTML中有不同的方式來引用腳本文件，這些方式就可能帶來性能問題。當(dāng)瀏覽器遇到script標(biāo)簽，它不知道JS代碼是否會(huì)修改頁面，所以他會(huì)停止解析頁面，執(zhí)行JS代碼之后再來繼續(xù)渲染頁面。綜上所述，瀏覽器遇到script，它會(huì)優(yōu)先下載并解析里面的JS代碼，禁用并發(fā)，這樣一來就會(huì)阻塞后面頁面的加載和渲染，造成白屏現(xiàn)象。所以JS代碼一般放置在最后面避免這種情況的發(fā)生。
2.解釋白屏和FOUC(無樣式內(nèi)容閃爍)
*不同的瀏覽器對(duì)CSS和HTML的處理方式不同，有的是等待CSS加載完成之后，對(duì)HTML元素再進(jìn)行渲染和展示（白屏問題）。有的是相對(duì)HTML元素進(jìn)行展示，然后等待CSS加載完成之后重新對(duì)樣式進(jìn)行修改（FOUC無樣式內(nèi)容閃爍）
*如果把CSS樣式放在底部，對(duì)于IE瀏覽器，再某些場(chǎng)景下（新窗口打開，刷新等）頁面會(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)象（逐步加載無樣式的內(nèi)容，等CSS加載后頁面突然展現(xiàn)樣式），對(duì)于Firefox會(huì)一直表現(xiàn)出FOUC。
*如果把JS文件放在頭部，腳本會(huì)阻塞后面內(nèi)容的展現(xiàn)，腳本會(huì)阻塞其后組件的下載，出現(xiàn)白屏問題。
3.async和defer的作用是什么？有什么區(qū)別？
我們先來看看瀏覽器遇到script的三種情況：
1.<script src="script.js"></script>
沒有defer或async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是再渲染改script標(biāo)簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
2.<script async src="script.js"></script>
有async加載和渲染后續(xù)文檔元素的過程將和script.js的加載與執(zhí)行并行進(jìn)行（異步）。
3.<script defer src="script.js"></script>
有defer，加載后續(xù)文檔元素的過程將和script.js的加載并行進(jìn)行（異步），但是script.js的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded事件觸發(fā)之前完成。
關(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ì)它來說腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會(huì)立刻執(zhí)行。
5.仔細(xì)想想，async 對(duì)于應(yīng)用腳本的用處不大，因?yàn)樗耆豢紤]依賴（哪怕是最低級(jí)的順序執(zhí)行），不過它對(duì)于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的，最典型的例子：Google Analytics.
參考資料
4.簡述網(wǎng)頁的渲染機(jī)制
1、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ū)
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)頁中有哪些節(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，按照算出來的規(guī)則，通過顯卡，把內(nèi)容畫到屏幕上。
5.JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復(fù)雜類型?
JavaScript語言的每一個(gè)值都屬于某一種數(shù)據(jù)類型。JavaScript的數(shù)據(jù)類型一共有六種，分為五種簡單數(shù)據(jù)類型（也稱為基本數(shù)據(jù)類型）：
- 數(shù)值（number）：整數(shù)和小數(shù)，比如：1和3.14 。
- 字符串（string）：字符組成的文本，比如："Hello World"。
- 布爾值（boolean）：true和false兩個(gè)特定的值。
- undefined：表示未定義或者不存在，即此處目前沒有任何值。
- 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è)本來要返回?cái)?shù)值的操作數(shù)未返回?cái)?shù)值的情況（這樣就不會(huì)拋出錯(cuò)誤）。
NaN有兩個(gè)不一般的特點(diǎn)，第一，NaN和任何值都不相等，包括自己；第二，任何涉及NaN的操作都會(huì)返回NaN。
undefined：
undefined表示不存在值，就是此處目前不存在任何值。典型用法是：
- 變量被聲明了，但沒有賦值時(shí)，就等于undefined。
- 調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。
- 對(duì)象沒有賦值的屬性，該屬性的值為undefined。
- 函數(shù)沒有返回值時(shí)，默認(rèn)返回undefined。
null：
null表示空值，即該處的值現(xiàn)在為空。典型用法是：作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)是一個(gè)沒有任何內(nèi)容的對(duì)象。
作為對(duì)象原型鏈的終點(diǎn)。
7.typeof和instanceof的作用和區(qū)別?
1.typeof：可以用來確定一個(gè)變量的數(shù)據(jù)類型 ,用來返回操作數(shù)類型的字符串。
typeof會(huì)返回number、string、boolean、function、undefined
返回undefined，除此以外，其他的都是返回object。
2.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操作符 一樣用處不大。
參考資料：
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
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
4.遍歷數(shù)組，把數(shù)組里的打印數(shù)組每一項(xiàng)的平方（難度**）。
var arr = [3,4,5]
// todo..//
輸出 9, 16, 25
5.遍歷 JSON, 打印里面的值（難度**）。
var obj = {
name: 'hunger', sex: 'male', age: 28
}
//todo ...
// 輸出 name: hunger, sex: male, age:28
6.下面代碼的輸出是? 為什么 （難度***）
console.log(a);//undefined;因?yàn)镴avaScript引擎的工作方式是，先解析代碼，獲取所有被聲明的變量，然后再一行一行地運(yùn)行。這造成的結(jié)果，就是所有的變量的聲明語句，都會(huì)被提升到代碼的頭部，這就叫做變量提升。
var a = 1;
console.log(a);//1;在它之前a已經(jīng)被賦值為1；
console.log(b);//報(bào)錯(cuò);b沒有被定義；
本文版權(quán)歸作者饑人谷_Josh和饑人谷所有，轉(zhuǎn)載請(qǐng)注明來源