記錄了2017年5月下旬剛畢業時面試的經典面試題

布局方面

1. 響應式布局，左側欄目固定，右側內容隨著屏幕寬度變化而變化（高頻）

• flex布局
• position布局
• css3計算寬度
• float布局
  

flex布局

// html
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

// css

.box {
  display: flex;
}
.left {
  width: 200px;
}
.right {
  flex: 
 
1;
}

右側div設置flex：1 自動填充滿容器。

position布局

//    html

<div class="box">
  <div class="left"></div>
</div>

// css

.box {
  padding-left: 200px;
  width: 100%;
  position: relative;  
}
.left {
  position: absolute;
  width: 200px;
  left: 0;
}

用pading將要顯示的右側內容擠到右邊，常用在圖文列表

css3計算寬度

// html
 


<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

// css

.left {
    float: left;
    width: 200px;
}
.right {
    float: left;
    width: calc(100% - 200px);
}

通過css3的calc函數可以計算寬度來定義寬度

float布局（面試官想要的答案）

// html

<div class="box">
    <div class
 
="left"></div>
    <div class="right">
      <div class="inner"></div>
    </div>
</div>

// css

.left {
  float: left;
  width: 200px;
  margin-right: -200px;
}
.right {
  float: left;
  width: 100%;
}
.inner {
  margin-left: 200px;
}

根據float元素的margin特性布局，兼容性好。以上css都沒有給出高度和顏色區分。

javascript方面

1. 閉包和作用域、this的理解

2. 原型鏈有關的問題

3. es6方面：let塊級作用域、generator函數的應用

4. javascript中的setTimeout、promise異步的考查

5. jQuery中的設計模式

• 原型模式 ： 整個jQuery庫的構造就是一個原型繼承的模式。
• 發布/訂閱模式：事件監聽模塊為發布訂閱模式
• 代理模式：jQuery中內置proxy方法便是代理模式
• 外觀模式：post、get等方法是對ajax的包裝
• 等等

6. jsonp的實現原理

js算法技巧方面

1. a[n] 數組中取值是 [1, n-1] ，也就是必然有重復數字，在時間復雜度和空間復雜度最小的情況下找出一個重復數字

博主也不懂復雜度，用正則寫了個， a[n].toString().match(/(\d+).*?\1/)[1]

2. 兩個單向鏈表的交點

博主懵逼，不懂數據結構不知啥叫鏈表交點。後來查了下就是兩個鏈表成Y狀，相交後必定後面的數據一樣。這就不難了。

3. 給定一個 ram函數，該函數有50%幾率返回0 和 50%幾率返回1，根據這個ram函數寫一個ran函數，ran函數有25%幾率返回0 1 2 3。

博主腦子轉不快，很慢很慢才理清楚這個簡單的題，很尷尬。

http方面

1. 在瀏覽器輸入一個網址到頁面呈現，計算機做了哪些事情。

在一家公司的CTO問的，尷尬了，之前博主故意百度看了一遍這個問題，結果也是忘得一幹二凈。

在前端層面上就是 發送請求資源 - 建立連接 - 數據傳輸 - 解析數據

有很多大神寫了完整過程： http://blog.csdn.net/xingxingba123/article/details/52743335 http://www.cnblogs.com/webhb/p/5615063.html

2. put和post請求的區別

一般情況我們用post請求來插入一條數據，用put請求更新一條數據。插入與更新的區別。。。

3. cookie和localStorage、sessionStorage的區別

cookie存儲量小，存儲數據小，跟隨著http請求傳輸。

幾次面試的總結，希望盡快掌握，下一次面試表現好一些

web前端面試題記錄