1.CSS和JS在網頁中的放置順序是怎樣的碧信？為什么會出現白屏和FOUC？
在寫HTML代碼時街夭，我們都是將CSS文件的引入位置放在頭部（<head>標簽內部）砰碴，將js文件的引入位置放在底部（</body>前面）。
出現白屏的原因：
CSS：未將CSS置于首部板丽，瀏覽器加載頁面過程中呈枉，首先加載了html內容，此時還未加載CSS埃碱，需將CSS完全加載完成猖辫，頁面才會顯示出來（白屏現象）。
另一種瀏覽器的加載方式是先對頁面內容進行展示乃正，然后再加載CSS修改頁面樣式（FOUC: flash of unstyled )住册。 若是使用@import ，即使把此樣式放在頂部瓮具，也可能會出現白屏荧飞。
JS： 由于JS的特性，如果把JS放在頁面頂部名党，在JS未加載完成之時叹阔，腳本就會阻塞后面組件的加載，從而出現白屏問題传睹。
2.加載異步：async和defer的作用是什么耳幢？有什么區(qū)別
如果在某些場景下，需要將JS不置于頁面底部欧啤，此時就要使用 async或defer 來做異步處理睛藻。
<script defer src="script.js"></script>
<script async src="script.js"></script>
defer: 加載JS與頁面并行進行，但是要在頁面元素解析完成之后邢隧，defer才會被執(zhí)行店印。
async:加載JS與頁面并行進行，對頁面的渲染也會并行進行倒慧。
3.簡述網頁的渲染機制
1按摘、Create/Update DOM And request css/image/js：瀏覽器請求到HTML代碼后，在生成DOM的最開始階段（應該是 Bytes → characters 后）纫谅，并行發(fā)起css炫贤、圖片、js的請求付秕，無論他們是否在HEAD里兰珍。
2、Create/Update Render CSSOM：CSS文件下載完成询吴，開始構建CSSOM
3掠河、Create/Update Render Tree：所有CSS文件下載完成励幼，CSSOM構建結束后，和 DOM ?一起生成 Render Tree口柳。
4苹粟、Layout：有了Render Tree，瀏覽器已經能知道網頁中有哪些節(jié)點跃闹、各個節(jié)點的CSS定義以及他們的從屬關系嵌削。下一步操作稱之為Layout，顧名思義就是計算出每個節(jié)點在屏幕中的位置望艺。
5苛秕、Painting：Layout后，瀏覽器已經知道了哪些節(jié)點要顯示（which nodes are visible）找默、每個節(jié)點的CSS屬性是什么（their computed styles）艇劫、每個節(jié)點在屏幕中的位置是哪里（geometry）。就進入了最后一步：Painting惩激，按照算出來的規(guī)則店煞，通過顯卡，把內容畫到屏幕上风钻。
4.JavaScript 定義了幾種數據類型? 哪些是簡單類型?哪些是復雜類型?NaN顷蟀、undefined、null分別代表什么?
簡單類型：
<li>數字 number
<li>字符串 string
<li>布爾 boolean
<li>數組 （數組也是對象）
<li>未定義 undefined
復雜類型：
<li>對象 object
NaN:
Number.NaN 是一個特殊值骡技，說明某些算術運算（如求負數的平方根）的結果不是數字鸣个。
JavaScript 以 NaN 的形式輸出 Number.NaN。NaN 與其他數值進行比較的結果總是不相等的布朦，包括它自身在內囤萤。因此，不能與 Number.NaN 比較來檢測一個值是不是數字是趴，而只能調用 isNaN() 來比較涛舍。
undefined:
表示未賦值，比如說 var = a 占據了空間右遭，卻未對 a 賦值做盅。
null：
表示一個不存在的元素缤削，空指針窘哈。
5.typeof和instanceof的作用和區(qū)別?
typeof:
作用是查看元素類型。它返回值是一個字符串亭敢，該字符串說明運算數的類型滚婉。typeof 一般只能返回如下幾個結果：
返回值：
數字：number
字符串：string
布爾：boolean
函數：function
undefined: function
其他值全部為 object
例：
instanceof:
判斷一個變量的類型常常會用 typeof 運算符，在使用 typeof 運算符時采用引用類型存儲值會出現一個問題帅刀，無論引用的是什么類型的對象让腹，它都返回 “object”远剩。這就需要用到instanceof來檢測某個對象是不是另一個對象的實例。
instanceof用于判斷一個變量是否某個對象的實例,其返回值是布爾類型骇窍。
例：
a instanceof b?console.log"true"):conlose.log("false"); //a是b的實例瓜晤？真:假
代碼題：
1.完成如下代碼判斷一個變量是否是數字、字符串腹纳、布爾痢掠、函數
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.以下代碼的輸出結果是?
console.log(1+1); //2
console.log("2"+"4");//24
console.log(2+"4");//24
console.log(+new Date());//1470630425859
console.log(+"4");//4
3.以下代碼的輸出結果是?
var a = 1;
a+++a;//3
typeof a+2;//number2
4.遍歷數組，把數組里的打印數組每一項的平方
```var arr = [3,4,5]```
5.遍歷 JSON, 打印里面的值 （難度**）
var obj = {
name: 'hunger', sex: 'male', age: 28
}
//todo ...
// 輸出 name: hunger, sex: male, age:28```
6.下面代碼的輸出是? 為什么
console.log(a);//1嘲恍，js變量提升
var a = 1;// 1
console.log(a); // 1, 通過var a = 1;進行聲明并賦值足画，調用a后，得到 1
console.log(b);//b is not defined,未對 b 進行聲明佃牛。
<li>關于變量提升：
var v='Hello World';
(function(){
alert(v);
})() // 輸出 Hello World
但是：
var v='Hello World';
(function(){
alert(v);
var v='I love you';
})() ```
卻會輸出 undefined
其原因是作用域的問題淹辞，變量提升，就是把變量提升提到函數的top的地方俘侠。變量提升 只是提升變量的聲明象缀，并不會把賦值也提升上來。
其實只是：
var v='Hello World';
(function(){
var v;
alert(v);
v='I love you';
})() ```
本文版權歸本人和饑人谷所有爷速，轉載請注明來源攻冷。
