web前端面試題記錄

標籤：輸入   重複數   複雜度   傳輸   做了   結構   display   bsp   相容性   

記錄了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前端面試題記錄