前言

全系列分爲四個章節，分別是電話面試部分、一面部分、二面部分、三面部分。全系列不光有題目還有詳細答案，收藏轉發就完事了！

第一章：電話面試部分已經放出：萬字長文系列：Web前端百度面經（含答案）第一章

希望這個系列能夠助力大家，今年一帆風順！！

接下來，長文預警~大家有所心理準備

正文：一面

自我介紹以及之前工作流程和模式

這裏面試官估計想了解以前的工作狀態，是否是一個公認的合理的開發和工作模式，從實習到百度，經歷告訴我，不同量級不同類型的公司在這方面差別很大，同時也能反映出之前的公司技術水平和能力，從而面試官判斷對面的人是否能夠和自己愉快的進行合作開發。

也可能是我想多了，就是簡單問問，減輕點被面試者的壓力

一個基本的語義化佈局的頁面你想怎麼規劃

這個問題說實話沒明白想問啥，難不成只是想問語義化？這麼簡單？

主體框架(簡單的瀑布流佈局)

CSS上有沒有什麼書寫注意點或者可優化的角度

說了這個問題我明白了，這是讓我說一說在基礎層面的頁面優化方向，只不過把大問題分化成細節了

這裏不說很細了，之前專門寫過這方面優化的文章，詳細內容可以點擊下方鏈接去閱讀

Web前端性能優化：JavaScript細節篇

能用html/css解決的問題就不要用js 比如hover顯示隱藏 比如導航高亮 自定義原始樣式 巧用僞類解決問題 使用預編譯器不濫用高消耗的樣式選擇器合併0值去單位，小於1的值去掉0使用Float進行佈局容易產生什麼問題？解決方式呢？

子元素在設置 float 後會脫離文檔流，造成父元素高度塌陷解決方式： 父元素設置高度 清除浮動

簡單說幾種垂直水平居中的方式

固定寬高

不固定寬高

盒子模型

box-sizing: content-box（W3C盒子模型）：元素的寬高大小表現爲內容的大小。box-sizing: border-box（IE盒子模型）：元素的寬高表現爲內容 + 內邊距 + 邊框的大小。背景會延伸到邊框的外沿。什麼情況下回發生迴流和重繪

迴流 頁面一開始渲染 顯示隱藏元素 瀏覽器窗口變化 元素位置變化 元素尺寸變化重繪 樣式改變不影響元素的位置時，比如 color、background，當然還有visiability追問：迴流和重繪的關係是什麼樣的

重繪不一定會發生迴流迴流一定觸發重繪追問：怎麼避免迴流產生

避免多級嵌套避免使用內聯樣式避免使用計算樣式儘量少的使用JS去操作DOM結構使用CSS3屬性以被動啓動GPU加速事件委託

詳細的原理要從DOM的事件機制說起：捕獲事件階段、冒泡事件階段、目標時間階段事件委託是利用冒泡機制來實現的，可以減少內存消耗，減少註冊事件。平常開發遇到涉及數組遍歷或對象遍歷問題都是用什麼方式

這裏說的可能不是很全，記得之前閱讀過一篇全面分析各種循環方式的文章，找到後再爲大家總結一遍，敬請關注。

對象循環 for...in 遍歷 Object.keys(Object),創建包含對象屬性的數組 Object.values(Object),創建包含對象值的數組 Object.getOwnPropertyNames(Object),返回一個數組，包含對象自身的所有屬性（包含不可枚舉屬性） Object.entries(Object),創建了一個二維數組，每個內部數組都有兩個元素，第一個元素是屬性名，第二個屬性值數組循環 基本的 for forEach map for...of 使用ES6 filter()，some(), every()進行業務查找和篩選追問：map和forEach的共同點和區別

共同點 都是遍歷數組 都支持三個參數，item（當前每一項），index（索引值），arr（原數組）區別 map()會分配內存空間存儲新數組並返回, forEach()不會返回數據 forEach()允許callback更改原始數組的元素, map()返回新的數組追問：普通for循環和forEach的區別

這裏一開始沒明白麪試官想要問啥，答了forEach更加簡潔一些，普通for循環針對大量級數據性能更好，然後面試官直接說在跳出循環上說一下，才明白要問的，這裏提醒大家，如果沒弄明白想問啥，一定要問清楚

for 循環可以通過 break，continue， return 跳出循環forEach 不能使用上述跳出方式，可以採用 try...catch 的寫法，扔出一個 Error 跳出循環追問：剛纔說到 for...in 循環對象，有沒有碰到什麼疑惑或者問題，怎麼解決的

遍歷的是原型鏈中的數據，需要使用 hasOwnProperty 看是否屬於該對象。追問：既然說到原型了，講講你理解的原型和原型鏈吧

從循環的問題追問到原型，我可太南了

簡單講

每一個函數都有一個prototype對象屬性，指向另一個對象(原型鏈上面的)prototype就是調用構造函數所創建的那個實例對象的原型(proto)實例對象與原型之間的連接，叫做原型鏈展開講

在展開講的時候，我邊畫圖邊給面試官講的，作爲技術人員嘛，充分利用各種形式展現自己的技術理解，大概就是下邊這張圖

定義了一個函數後，天生自帶 prototype 指向函數的原型對象函數經過new調用後，返回一個全新的實例對象，實例對象的 _proto_ 指向構造函數的原型對象對象的 hasownproperty() 來檢查自身中是否含有該屬性事件機制

瀏覽器的JS引擎管理着事件代碼的調用和執行，主線程在運行時會產生執行棧，棧中的代碼調用某些異步API時會在任務隊列中添加事件，棧中的代碼執行完畢後，就會讀取任務隊列中的事件，去執行事件對應的回調函數，如此循環往復，形成事件循環機制。整體的執行順序：宏任務 -> 微任務 -> 必要的渲染UI -> 下一輪Eventloop通俗點的流程 執行一個宏任務（首次執行的主代碼塊或者任務隊列中的回調函數） 執行過程中如果遇到微任務，就將它添加到微任務的任務隊列中 宏任務執行完畢後，立即執行當前微任務隊列中的所有任務（依次執行） JS引擎線程掛起，GUI線程執行渲染 GUI線程渲染完畢後掛起，JS引擎線程執行任務隊列中的下一個宏任務宏任務： script主代碼、setTimout、setInterval、事件I/O等微任務：promise等追問筆試題：那道經典的setTimeout題，並問什麼會這樣輸出

主線程執行同步任務，也就是主循環，setTimeout 爲宏任務，同時是異步任務，會被掛起到循環結束循環結束執行 setTimeout 的回調,執行時發現 i 的當前作用域不存在，向上查找，在全局作用域中發現了 i ，此時循環已經結束，所以全都輸出同一個數追問筆試題：一道結合了各種 setTimout 和 promise 的事件機制輸出題目,共有十一個輸出代碼塊

題目具體已經不記得了，反正記住執行順序一點一點的輸出，面試時最好帶個筆記本或者電腦，可以隨時記錄下，方便回答

HTTP請求的三次握手機制

三次握手機制這裏不再大篇幅展開講了，隨便搜索就能找到一堆詳解

追問：HTTP請求爲什麼是三次握手，不是兩次或者四次

三次握手是確定客戶端和服務端接收和發送能力都正常的最優次數 第一次：客戶端發送能力正常 第二次：服務端接收能力正常，服務端發送能力正常 第三次：客戶端接收能力正常追問：HTTP、HTTPS的區別

HTTPS更安全：http 是超文本傳輸協議，信息是明文傳輸，https 則是具有安全性的 ssl 加密傳輸協議HTTP更簡單：http 的連接是無狀態的；HTTPS 協議是由 SSL+HTTP 協議構建的可進行加密傳輸、身份認證的網絡協議。追問：關於緩存方面講一講

這個問題之前寫過關於緩存策略的文章，不在展開講，有機會我總結一篇文章發出來

強緩存(不走服務器)： Expires Cache-Control協商緩存(走服務器): Last-Modified/If-Modified-Since ETag/If-None-Match前端跨域問題如何產生，有什麼方法解決

這裏之前寫過詳細的文章，不展開細講了，可以點擊這裏查看跨域主流的四種方式，你清楚嗎？

產生原因：同源策略解決方式： jsonp實現跨域請求 使用 iframe + form 進行跨域請求 CORS(跨域資源共享 Cross-origin resource sharing)進行跨域請求 利用服務器中轉追問：JSONP跨域有什麼特點

只支持 GET 請求追問：CORS進行跨域有什麼特點

這個追問題我回答完之後面試官說是臨時想出來的，但是他沒想到我之前看過相關的文章還整理出來了，這不是巧了麼這不是~ 這個問題的答案也在上面給出的前端跨域文章裏

CORS請求分爲簡單請求和非簡單請求，區分方式是看請求頭和請求方法 (只有 GET、POST、HEAD)簡單請求：服務端配置好的前提下，簡單請求直接請求就可以非簡單請求：在請求時會發送兩次請求，第一次是預檢測請求，返回的狀態碼爲204，第二次請求爲預檢測請求通過後纔會發送真實請求問到這裏其實一面已經結束了，不過面試官看來需求不多，告訴我一面已經過了，看我是Vue技術棧，遂通過Vue又續上了，沒有問很深入的問題，都是小細節，當做聊家常了，然後我猜測二面應該會問關於Vue深層次的問題，不過我還是有點信心的，畢竟是看過源碼的人。

就在我寫這篇文章的收尾階段，網上發佈了關於尤雨溪和Vue的紀錄片，鏈接附上紀錄Vue.js尤雨溪 - 中英CC字幕 - Honeypot呈現，朋友們可以當做茶餘飯後的小片看，這裏建議大家，少看那些場景簡單，人物兩三個人，說着奇奇怪怪語言的視頻！

有沒有遇到深層次對象雙向綁定後子組件未監聽到更新的情況，怎麼解決的

有解決方式： 一：深層監聽 deep: true,但是這樣會帶來性能問題 二：使用 this.$set() 進行賦值Vue的data以Function方式返回的原因

避免產生變量共享，不以返回值的情況下，所有組件將共享同一個對象，指向相同的內存地址Vue的響應式怎麼做的，簡單說

init 時利用 Object.defineproperty 監聽數據變化利用 setter 和 getter 進行觸發尾聲

這裏一面算是正式結束了，面試官走的時候說回答的不錯，我去給你找個精通 Vue 的二面來，你們再聊聊。

一面面試官說完我瞬間感覺要爆炸，我可太南了！但是事實是二面面試官並沒有很深入的問，而是讓我自己說，他從中問一些細節。後來才知道，百度有個業務組的領導是Vue的核心開發者，大家都很熟悉Vue。