前端面試題（上）

收集了一部分面試的時候或者筆試的時候常常出現的題目，分享給你們。

下列代碼輸出什麼？

for(var i=0;i<5;i++){
  (function(i){
    setTimeout(function(){
      console.log(i); 
    },i*1000)
  })(i)}
 
 // 0,1,2,3,4

下列代碼輸出什麼？

for(var i=0;i<5;i++){
    setTimeout(function(){   
      console.log(i);
    },i*1000)
}// 5,5,5,5,5

Cookie、sessionStorage、localStorage的區別

這三者都是儲存瀏覽器數據的，cookie相對沒有後二者的儲存大
而第二個比較特殊，他只會儲存瀏覽器運行時的數據，關閉後數據將會被清零

JSONP原理

JSONP是一種非正式傳輸協議，該協議的一個要點就是容許用戶傳遞一個callback
參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住J
SON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了
簡稱解決跨域問題

簡述css盒模型

包括內容（content）、外邊距（margin）、內邊距（padding）、邊框（border）

說說get和post請求的區別

二者均可以用來獲取數據，但數據安全方面post比較好
get他會暴露請求參數，post則是加密請求的參數

說說類的建立、繼承和閉包。

在es6未發佈前，咱們是經過構造函數的方法實現類的概念，而實現繼承咱們則需
要本身去封裝一個函數，而在es6出來後，js就支持了類，繼承也有了自帶的方法來實現。
閉包的做用是爲了防止全局變量的污染

一個頁面從輸入 URL 到頁面加載完的過程當中都發生了什麼事情？越詳細越好(考察知識廣度)

在瀏覽器輸入url地址後
進行TCP三次握手
瀏覽器會向web服務器發送一個http請求
服務器會處理請求並返回一個http請求
最後瀏覽器會將這個請求內容顯示到界面上

js中的原型是什麼？

在JavaScript中，原型也是一個對象，經過原型能夠實現對象的屬性繼承，
JavaScript的對象中都包含了一個」[[Prototype]]」內部屬性
這個屬性所對應的就是該對象的原型。

JS 中的原型鏈是什麼？

由於每一個對象和原型都有原型，對象的原型指向原型對象，
而父的原型又指向父的父，這種原型層層鏈接起來的就構成了原型鏈。

你知道什麼是CSS reset麼？

設置瀏覽器css重置，統一默認樣式

在js裏call()與apply()有什麼相同和不一樣？

共同點均可以繼承熟悉和方法，不一樣點是call第二個參數是個形參，而apply第二個參數是數組

常見的http狀態碼都有哪些？

200/500/304/404

下面代碼的輸出值是：

alert(1&&2) //2

css position 中有哪些值可使用？

fixed/relative/absolute

經常使用瀏覽器及內核，對於渲染引擎與js解釋引擎的區分

IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基於webkit，Google與Opera Software共同開發)

什麼是CSS Hack?

針對不一樣的瀏覽器寫不一樣的CSS，解決瀏覽器兼容性

iframe有那些缺點？

1. iframe會阻塞主頁面的Onload事件；

2. 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;

3. iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

4. 使用iframe以前須要考慮這兩個缺點。若是須要使用iframe
   最好是經過javascript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

說出前端link和import的區別

1. link通常在html頭部定義，做爲html標籤，同時除了引入css以外，

   還能夠說明好比說rel="icon"

2. import通常定義在css內部，也就是通常寫在文件頭部，而且專門拿來鏈css的。

在項目開發完成以後，根據雅虎性能優化規則，須要對html，JS，CSS，圖片須要作出怎樣的處理？是否能夠藉助構建工具實現自動化？

儘可能減小http請求，將圖片壓縮或者打包在一塊兒，將js文件儘可能放置在body尾部。
而構建工具可使用webpack。

在嚴格模式(‘use strict’)下進行 JavaScript 開發有神馬好處？

1. 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;

2. 消除代碼運行的一些不安全之處，保證代碼運行的安全；

3. 提升編譯器效率，增長運行速度；

4. 爲將來新版本的Javascript作好鋪墊。

寫出javascript運行結果：

for(var i=0; i<10; i++){} 
alert(i);  //10,爲何？仔細觀察！

px和em以及rem的區別

px和em以及rem都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。
em得值不是固定的，而且em會繼承父級元素的字體大小。
而rem和em很相似，區別在於rem是繼承html的字體大小。

簡述同步和異步的區別

同步是阻塞模式，異步是非阻塞模式。同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。