百度前端三面面試題全部公開，三面的最后一個問題令我窒息

本文轉載自查看原文 2021-07-22 16:35 257

分享一次百度面試，部分題目會帶有面試答案，百度二面三面都有手寫代碼的環節，對於動手能力弱的小伙伴來說會有些挺吃力。

一面

1. 為什么要用flex布局，align-items和justify-content的區別

傳統布局基於盒模型，非常依賴 display屬性、position屬性、float屬性。而flex布局更靈活，可以簡便、完整、響應式地實現各種頁面布局，比如水平垂直居中。

align-items：定義在側軸（縱軸）方向上的對齊方式；

justify-content：定義在主軸（橫軸）方向上的對齊方式。

2. webpack是怎么打包的，babel又是什么？

把項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到項目的所有依賴文件，使用loaders處理它們，最后打包為一個（或多個）瀏覽器可識別的JavaScript文件。

babel將es6、es7、es8等語法轉換成瀏覽器可識別的es5或es3語法。

3. saas和less不同於普通css的地方

定義變量，可以把反復使用的css屬性值定義成變量，然后通過變量名來引用它們，而無需重復書寫這一屬性值；
嵌套寫法，父子關系一目了然；
使用運算符，可以進行樣式的計算；
內置一些顏色處理函數用來對顏色值進行處理，例如加亮、變暗、顏色梯度等；
繼承：為多個元素定義相同樣式的時候，我們可以考慮使用繼承的做法；
Mixins （混入）：有點像是函數或者是宏，當某段 CSS經常需要在多個元素中使用時，可以為這些共用的 CSS 定義一個Mixin，然后只需要在需要引用這些 CSS 地方調用該 Mixin 即可。

4. es 6模塊和其他模塊不同的地方

對比了一下es6模塊和CommonJS模塊：

5. 有沒有用過es6的一些異步處理函數

Promise，generator，async await

6. redux怎么處理異步操作

可以引入Redux-thunk或者redux-promise這種中間件，可以延遲事件的派發。

其中的原理：是因為他們用了applymiddleware()包裝了store的dispatch方法，擁有可以處理異步的能力。

7. 為什么reducer要是個純函數，純函數是什么？

純函數：對於相同的輸入，永遠會得到相同的輸出，而且沒有任何可觀察的副作用，也不依賴外部環境的狀態。

原因：Redux只通過比較新舊兩個對象的存儲位置來比較新舊兩個對象是否相同（淺比較）。如果你在reducer內部直接修改舊的state對象的屬性值，那么新的state和舊的state將都指向同一個對象。因此Redux認為沒有任何改變，返回的state將為舊的state。兩個state相同的話，頁面就不會重新渲染了。

因為比較兩個Javascript對象所有的屬性是否相同的的唯一方法是對它們進行深比較。但是深比較在真實的應用當中代價昂貴，因為通常js的對象都很大，同時需要比較的次數很多。因此一個有效的解決方法是作出一個規定：無論何時發生變化時，開發者都要創建一個新的對象，然后將新對象傳遞出去。同時，當沒有任何變化發生時，開發者發送回舊的對象。也就是說，新的對象代表新的state。

8. 高階函數是什么，怎么去寫一個高階函數

高階函數：參數值為函數或者返回值為函數。例如map，reduce，filter，sort方法就是高階函數。

編寫高階函數，就是讓函數的參數能夠接收別的函數。

9. vue跟react的區別是什么

10. nodejs處理了什么問題

可以處理高並發的I/O，也能與websocket配合，開發長連接的實時交互應用程序。

11. 響應式布局，怎么做移動端適配

使用媒體查詢可以實現響應式布局。

移動端適配方案：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width: 讓當前viewport寬度等於設備的寬度
user-scalable=no: 禁止用戶縮放
initial-scale=1.0: 設置頁面的初始縮放值為不縮放
maximum-scale=1.0: 允許用戶的最大縮放值為1.0
minimum-scale=1.0: 允許用戶的最小縮放值為1.0
（2）媒體查詢（響應式)

（3）動態 rem 方案

二面

1. 怎么做一個實時的聊天系統

使用WebSocket和nodejs，《nodejs實戰》這本書詳細介紹了這個項目。

2. 當消息有延遲的時候，怎么保證消息的正確順序

每個消息在被創建時，都將被賦予一個全局唯一的、單調遞增的、連續的序列號（SerialNumber，SN）。可以通過一個全局計數器來實現這一點。通過比較兩個消息的SN，確定其先后順序。

3. 怎么做一個登陸窗口，input有哪些兼容性

使用form表單。

4. input按鈕如何校驗

使用正則表達式。

5. 如何實現水平垂直居中，relative、absolute、fixed

6. 寫一個函數，1s之后依次輸出1,2,3,4,5

直接使用了let和定時器。

for(let i = 1 ; i < 6; i++){
    setTimeout(() => {
        conosle.log(i)
    }, 1000)
}

7. 事件隊列（宏任務、微任務）

8. 如何每隔三個數加一個逗號，還要考慮小數點的情況

function transform(number){
    var num = number.toString() 
    var numArr = num.split('.')
    var [num, dotNum] = numArr


    var operateNum = num.split('').reverse()
    var result = [], len = operateNum.length
    for(var i = 0; i< len; i++){
         result.push(operateNum[i])
         if(((i+1) % 3 === 0) && (i !== len-1)){
              result.push(',')
        }
    }

    if(dotNum){
         result.reverse().push('.'， ...dotNum)
         return result.join('')
    }else{
         return result.reverse().join('')
    }

}

9. webpack有配置過嗎？原理知道嗎

10. 父子組件如何通信，子組件怎么跟父組件通信？

父組件把state作為props傳遞給子組件進行通信。

父組件寫好state和處理該state的函數，同時將函數名通過props屬性值的形式傳入子組件，子組件調用父組件的函數，同時引起state變化。

11. 簡單說一下pwa

三面

1. 手寫indexOf

function indexOf(str, val){
    var strLen = str.length, valLen = val.length
    for(var i = 0; i < strLen; i++){
        var matchLen = i + valLen
        var matchStr = str.slice(i, matchLen)
        if(matchLen > strLen){
            return -1
        }
        if(matchStr === val){
            return i
        }
    }
    return -1
}

2. 實現 JS 的繼承

function A () {
   this.name = 'a';    
}

A.prototype.getName = function () {
    return this.name;
}

function B () {
}

// B 如何繼承 A

3. 從url輸入到頁面顯示會有哪些步驟
（1）DNS服務器解析域名，找到對應服務器的IP地址;

（2）和服務器建立TCP三次握手連接；

（3）發送HTTP請求，服務器會根據HTTP請求到數據服務器取出相應的資源，並返回給瀏覽器；

（4）瀏覽器處理響應

加載：瀏覽器對一個html頁面的加載順序是從上而下的。
當加載到外部css文件、圖片等資源，瀏覽器會再發起一次http請求，來獲取外部資源。
當加載到js文件，html文檔會掛起渲染（加載解析渲染同步）的線程，等待js文件加載、解析完畢才可以恢復html文檔的渲染線程。
解析：解析DOM樹和CSSDOM樹。
渲染：構建渲染樹，將DOM樹進行可視化表示，將頁面呈現給用戶。

4. method有哪些方法，分別是什么意思？post和put的區別

post：上傳資源

put：修改資源

5. https有幾次握手

6. http2比http1好的地方

7. 頁面刷新不出來，是有哪些問題
可以從第三題的每個步驟進行分析，大概是：