1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
css一般放在頭部head標簽中，網(wǎng)頁渲染時，先解析html標簽，生成DOM樹，在解析css標簽，構(gòu)成cssdom樹，然后再把DOM和cssdom組合成渲染樹。如果班css放在后面，可能會出現(xiàn)白屏問題或者FOUC（Flash of Unstyled Content ）無樣式內(nèi)容閃爍。
JS一般放在body的最后面，js需要被HTml引用才能再瀏覽器中運行，而在HTML中有不同的方式來引用腳本文件，這些方式就可能帶來性能問題。當瀏覽器遇到script標簽，它不知道JS代碼是否會修改頁面，所以他會停止解析頁面，執(zhí)行JS代碼之后再來繼續(xù)渲染頁面。綜上所述，瀏覽器遇到script，它會優(yōu)先下載并解析里面的JS代碼，禁用并發(fā)，這樣一來就會阻塞后面頁面的加載和渲染，造成白屏現(xiàn)象。所以JS代碼一般放置在最后面避免這種情況的發(fā)生。
2.解釋白屏和FOUC(無樣式內(nèi)容閃爍)
*不同的瀏覽器對CSS和HTML的處理方式不同，有的是等待CSS加載完成之后，對HTML元素再進行渲染和展示（白屏問題）。有的是相對HTML元素進行展示，然后等待CSS加載完成之后重新對樣式進行修改（FOUC無樣式內(nèi)容閃爍）
*如果把CSS樣式放在底部，對于IE瀏覽器，再某些場景下（新窗口打開，刷新等）頁面會出現(xiàn)白屏，而不是內(nèi)容逐步展現(xiàn)，如果使用@import標簽，即使CSS中放入link，并且放在頭部，也可能出現(xiàn)白屏現(xiàn)象。
*如果把CSS放在底部，對于IE瀏覽器，再某些場景下（點擊鏈接，輸入URL，使用書簽進入等），會出現(xiàn)FOUC現(xiàn)象（逐步加載無樣式的內(nèi)容，等CSS加載后頁面突然展現(xiàn)樣式），對于Firefox會一直表現(xiàn)出FOUC。
*如果把JS文件放在頭部，腳本會阻塞后面內(nèi)容的展現(xiàn)，腳本會阻塞其后組件的下載，出現(xiàn)白屏問題。
3.async和defer的作用是什么？有什么區(qū)別？
我們先來看看瀏覽器遇到script的三種情況：
1.<script src="script.js"></script>
沒有defer或async，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是再渲染改script標簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
2.<script async src="script.js"></script>
有async加載和渲染后續(xù)文檔元素的過程將和script.js的加載與執(zhí)行并行進行（異步）。
3.<script defer src="script.js"></script>
有defer，加載后續(xù)文檔元素的過程將和script.js的加載并行進行（異步），但是script.js的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded事件觸發(fā)之前完成。
關(guān)于此圖可知它們的區(qū)別和幾個要點：
1.defer 和 async在網(wǎng)絡(luò)讀取這塊是一樣的，都是異步。
2.它們的差別在于腳本下載完成之后何時執(zhí)行，顯然defer是最接近我們對于腳本加載和執(zhí)行的要求的。
3.關(guān)于defer，此圖未盡之處在于它是按照加載順序執(zhí)行腳本的，這一點要善加利用。
4.async則是一個亂序執(zhí)行的，反正對它來說腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會立刻執(zhí)行。
5.仔細想想，async 對于應(yīng)用腳本的用處不大，因為它完全不考慮依賴（哪怕是最低級的順序執(zhí)行），不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的，最典型的例子：Google Analytics.
參考資料
4.簡述網(wǎng)頁的渲染機制
1、Create/Update DOM And request css/image/js：瀏覽器請求到HTML代碼后，在生成DOM的最開始階段（應(yīng)該是 Bytes → characters 后），并行發(fā)起css、圖片、js的請求，無論他們是否在HEAD里。
注意：發(fā)起js文件的下載request并不需要DOM處理到那個script節(jié)點，比如：簡單的正則匹配就能做到這一點，雖然實際上并不一定是通過正則：）。這是很多人在理解渲染機制的時候存在的誤區(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é)點、各個節(jié)點的CSS定義以及他們的從屬關(guān)系。下一步操作稱之為Layout，顧名思義就是計算出每個節(jié)點在屏幕中的位置。
5、Painting：Layout后，瀏覽器已經(jīng)知道了哪些節(jié)點要顯示（which nodes are visible）、每個節(jié)點的CSS屬性是什么（their computed styles）、每個節(jié)點在屏幕中的位置是哪里（geometry）。就進入了最后一步：Painting，按照算出來的規(guī)則，通過顯卡，把內(nèi)容畫到屏幕上。
5.JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復雜類型?
JavaScript語言的每一個值都屬于某一種數(shù)據(jù)類型。JavaScript的數(shù)據(jù)類型一共有六種，分為五種簡單數(shù)據(jù)類型（也稱為基本數(shù)據(jù)類型）：
- 數(shù)值（number）：整數(shù)和小數(shù)，比如：1和3.14 。
- 字符串（string）：字符組成的文本，比如："Hello World"。
- 布爾值（boolean）：true和false兩個特定的值。
- undefined：表示未定義或者不存在，即此處目前沒有任何值。
- null：表示空缺，即此處應(yīng)該有一個值，但目前為空。
還有一種復雜數(shù)據(jù)類型—object，也就是對象，它表示各種值組成的集合。對象又可以分成三個子類型。
*狹義的對象（object）
*數(shù)組（array）
*函數(shù)（function）
通常將數(shù)值、字符串、布爾值稱為原始類型（primitive type）的值，即它們是最基本的數(shù)據(jù)類型，不能再細分。而將對象稱為合成類型（complex type）的值，因為一個對象往往是多個原始類型的值的合成，可以看作是一個存放各種值的容器。至于undefined和null，一般將它們看成兩個特殊值。
6.NaN、undefined、null分別代表什么?
NaN：
表示非數(shù)字，這個數(shù)值用于表示一個本來要返回數(shù)值的操作數(shù)未返回數(shù)值的情況（這樣就不會拋出錯誤）。
NaN有兩個不一般的特點，第一，NaN和任何值都不相等，包括自己；第二，任何涉及NaN的操作都會返回NaN。
undefined：
undefined表示不存在值，就是此處目前不存在任何值。典型用法是：
- 變量被聲明了，但沒有賦值時，就等于undefined。
- 調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。
- 對象沒有賦值的屬性，該屬性的值為undefined。
- 函數(shù)沒有返回值時，默認返回undefined。
null：
null表示空值，即該處的值現(xiàn)在為空。典型用法是：作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)是一個沒有任何內(nèi)容的對象。
作為對象原型鏈的終點。
7.typeof和instanceof的作用和區(qū)別?
1.typeof：可以用來確定一個變量的數(shù)據(jù)類型 ,用來返回操作數(shù)類型的字符串。
typeof會返回number、string、boolean、function、undefined
返回undefined，除此以外，其他的都是返回object。
2.instanceof：可以用來確定一個引用類型值的是什么類型的對象
instanceof左操作數(shù)是一個類，右操作數(shù)是標識對象的類。如果左側(cè)的對象是右側(cè)類的實例，則返回true.而js中對象的類是通過初始化它們的構(gòu)造函數(shù)來定義的。即instanceof的右操作數(shù)應(yīng)當是一個函數(shù)。所有的對象都是object的實例。如果左操作數(shù)不是對象，則返回false,如果右操作數(shù)不是函數(shù)，則拋出typeError。
instanceof 運算符是用來測試一個對象是否在其原型鏈原型構(gòu)造函數(shù)的屬性。其語法是object instanceof constructor
instanceof操作符用來比較兩個操作數(shù)的構(gòu)造函數(shù)。只有在比較自定義的對象時才有意義。 如果用來比較內(nèi)置類型，將會和 typeof操作符 一樣用處不大。
參考資料：
typeof 和 instanceOf的區(qū)別
代碼題：
1.完成如下代碼判斷一個變量是否是數(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 加法計算
console.log("2"+"4"); //24
console.log(2+"4"); //24
console.log(+new Date()); //1471433856475:自動轉(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ù)組每一項的平方（難度**）。
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;因為JavaScript引擎的工作方式是，先解析代碼，獲取所有被聲明的變量，然后再一行一行地運行。這造成的結(jié)果，就是所有的變量的聲明語句，都會被提升到代碼的頭部，這就叫做變量提升。
var a = 1;
console.log(a);//1;在它之前a已經(jīng)被賦值為1；
console.log(b);//報錯;b沒有被定義；
本文版權(quán)歸作者饑人谷_Josh和饑人谷所有，轉(zhuǎn)載請注明來源