web前端面試題記錄

記錄了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請求傳輸。

 

幾回面試的總結，但願儘快掌握，下一次面試表現好一些