前端面試經歷（位元組、滴滴、虎牙），講真的還挺難，前端大廠面試題總匯得看看

小編整理最近了小伙伴中具有代表性的面試經歷及面試題，他們的情況小編就不多說了，一起看看他們面試中都遇到了什么問題，

位元組

一面

• 剛開始就問我的專案，問的很詳細，
• webpack 提高構建速度的方式
• loader 輸入什么產出什么 ？
• webpack 原理
• webpack 動態加載的原理
• webpack 熱更新
• 如何寫一個 webpack plugin
• AST 的應用
• 如何決議一個 html 文本，還是考 AST
• babel 原理，怎么寫 babel 插件
• 如何設計一個沙盒 sandbox ？
• 小程式的 API 做了什么處理，能夠做到全域變數的隱藏，如果是你，怎么設計 ？
• 實作顏色轉換 ‘rgb(255, 255, 255)’ -> ‘#FFFFFF’ 的多種思路，
• 提供一個數字 n，生成一組 0~n-1 的整數，打亂順序組成陣列，打亂幾次，如何能夠看起來平衡，說出你能想到的所有方法，

二面

• 業務，業務，還是業務，專案復盤有沒有更好的解決方案，
• 如何處理一個重大事故 bug
• 監控體系
• 虛擬 dom 有什么好的地方？ 框架為什么要設計虛擬 dom？
• webpack 的缺點，讓你設計一個新的構建打包工具，你會怎么設計？
• 在線檔案編輯，如何處理兩人的沖突，如何展示，考慮各種場景
• excel 檔案沖突高級處理，文章沖突呢？是上個問題的深化，

三面

• 演算法題：從陣列 [1, 5, 8, 10, 12] 中找到兩個數和為 9，回傳 [1, 8] 這樣的結果，
• 演算法題：從陣列 [1, 5, 8, 10, 12] 中找到三個數和為 19，回傳 [1, 8， 10] 這樣的結果，
• 演算法題：給定一個無序的整數陣列，找到其中最長上升子序列的長度，

滴滴

一面

• webpack 原理
• babel 原理
• 虛擬 DOM 的理解
• 專案里如何做的性能優化
• 寫過webpack loader 或者插件嗎
• 講講你寫的 babel 插件

二面

• redux 的原理
• redux 做狀態管理和發布訂閱模式有什么區別
• react-redux 的原理，是怎么跟 react 關聯起來的
• 了解多端的原理嗎？
• http 與 tcp 的關系
• tcp 可以建立多個連接嗎？
• 介紹一下為什么要有 三次握手，四次揮手
• 寫過 babel 插件嗎？用來干啥的？怎么寫的 babel 插件
• 知道怎么轉化成 AST 的嗎？
• 研究過 React 的運行時嗎？
• 職業規劃，

三面

• 專案介紹
• 說一下你的專案有哪些復雜的點，以及怎么解決的
• 你們的業務組件庫有多少個，是什么樣的組件
• 權限組件是怎么設計的
• 會node 嗎？
• 介紹一下你對中間件的理解
• 怎么保證后端服務穩定性，怎么做容災
• 怎么讓資料庫查詢更快
• 資料庫是用的什么？
• 為什么用 mysql
• 希望滴滴能提供給你什么？

四面

• 介紹一下專案的難點以及怎么解決的
• 自己有什么技術上的優勢
• 最近在研究什么技術？
• 職業規劃
• 移動端的業務有做過嗎？
• 當業務重的時候怎么安排時間？

虎牙

一面

• http 的 get 和 post 區別
• 快取策略
• https 的握手程序
• http2 的特點
• weak-Set、weak-Map 和 Set、Map 區別
• mvvm 模型和 mvc 模型區別
• 如何實作一個 mvvm 模型
• 為何你用 mobx 重構了 saga，說說兩者之間的區別
• 說說 vnode 的了解
• 講講 webpack 的性能優化
• 有寫過 plugin
• 了解 webpack-dev-server 的 HMR 實作原理嗎
• 手寫一下防抖和節流

二面

• 你做過直播，能介紹一下 webRTC 或者現在使用直播方案嗎
• 編碼方面有了解過嗎，能解釋一下碼率嗎
• 編碼方面有了解過嗎，能解釋一下碼率嗎
• RGB 和 YUV 區別
• 有了解過哪些直播協議
• flv 和 mp4 區別有了解過嗎
• MediaSource 規范有了解過

三面

• webSocket 和 ajax 的區別
• xss、csrf 有了解過嗎，如何防范
• 有了解過 React 的 fiber
• 能簡單介紹一下 react 執行程序嗎
• 能介紹一下 hook 嗎
• 情景題，做一個直播彈幕

小編最近整理了一次大廠面試題，包括：HTML和CSS、HTML5和CSS3、JS基礎、Ajax、流行框架、十、Node.Js、前端概括性問題等，想看完整版的前端大廠面試題匯總（1）的小伙伴直接點擊這領取啦

一、HTML和CSS

• 你做的頁面在哪些流覽器測驗過？這些瀏覽器的內核分別是什么?
• 每個HTML檔案里開頭都有個很重要的東西，Doctype，知道這是干什么的嗎？
• Quirks模式是什么？它和Standards模式有什么區別
• div+css的布局較table布局有什么優點？
• img的alt與title有何異同？ strong與em的異同？
• 你能描述一下漸進增強和優雅降級之間的不同嗎?
• 為什么利用多個域名來存盤網站資源會更有效？
• 請談一下你對網頁標準和標準制定機構重要性的理解，
• 請描述一下cookies，sessionStorage和localStorage的區別？
• 簡述一下src與href的區別，
• 知道的網頁制作會用到的圖片格式有哪些？
• 知道什么是微格式嗎？談談理解，在前端構建中應該考慮微格式嗎？
• 在css/js代碼上線之后開發人員經常會優化性能，從用戶重繪網頁開始，一次js請求一般情況下有
• 一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的
• 你如何理解HTML結構的語意化？
• 談談以前端角度出發做好SEO需要考慮什么？
• 有哪項方式可以對一個DOM設定它的CSS樣式？
• CSS都有哪些選擇器？
• CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視范圍內？
• 超鏈接訪問過后hover樣式就不出現的問題是什么？如何解決？
• 什么是Css Hack？ie6,7,8的hack分別是什么？
• 請用Css寫一個簡單的幻燈片效果頁面
• 行內元素和塊級元素的具體區別是什么？行內元素的padding和margin可設定嗎？
• 什么是外邊距重疊？重疊的結果是什么？

二、JS基礎

• javascript的typeof回傳哪些資料型別
• 例舉3種強制型別轉換和2種隱式型別轉換?
• split() join() 的區別
• 陣列方法pop() push() unshift() shift()
• 事件系結和普通事件有什么區別
• IE和DOM事件流的區別
• call和apply的區別
• b繼承a的方法
• JavaScript this指標、閉包、作用域
• 如何阻止事件冒泡和默認事件
• ””和“=”的不同
• JavaScript的資料型別都有什么？
• 看下列代碼輸出為何？解釋原因，
• foo = foo||bar ，這行代碼是什么意思？為什么要這樣寫？
• 完成foo()函式的內容，要求能夠彈出對話框提示當前選中的是第幾個單選框，
• 完成函式showImg()，要求能夠動態根據下拉串列的選項變化，更新圖片的顯示
• 阻止冒泡函式
• 輸出多少？
• 精度問題: JS 精度不能精確到 0.1 所以 ，，，，同時存在于值和差值中
• 輸出結果
• 以下代碼中end字串什么時候輸出
• 請用原生js實作jquery的get\post功能，以及跨域情況下
• 請簡要描述web前端性能需要考慮哪方面，你的優化思路是什么？

三、HTML5 CSS3

• CSS3有那些新特性
• html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HT
• 本地存盤（Local Storage ）和cookies（儲存在用戶本地終端上的資料）之間的區別
• 如何實作瀏覽器內多個標簽頁之間的通信?
• 你如何對網站的檔案和資源進行優化？
• 什么是回應式設計？
• 新的 HTML5 檔案型別和字符集是？
• HTML5 Canvas 元素有什么用？
• HTML5 存盤型別有什么區別？
• 用H5+CSS3解決下導航欄最后一項掉下來的問題
• CSS3新增偽類有那些？
• 請用CSS實作：一個矩形內容，有投影，有圓角，hover狀態慢慢變透明，
• 描述下CSS3里實作元素影片的方法
• html5\CSS3有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
• 你怎么來實作頁面設計圖，你認為前端應該如何高質量完成作業? 一個滿屏 品 字布局 如何設計?

四、Ajax

• Ajax 是什么? 如何創建一個Ajax？
• 同步和異步的區別?
• 如何解決跨域問題?
• 頁面編碼和被請求的資源編碼如果不一致如何處理？
• 簡述ajax 的程序，
• 闡述一下異步加載，
• 請解釋一下 JavaScript 的同源策略，
• GET和POST的區別，何時使用POST？
• ajax 是什么?ajax 的互動模型?同步和異步的區別?如何解決跨域問題?
• Ajax的最大的特點是什么，
• ajax的缺點
• ajax請求的時候get 和post方式的區別
• 解釋jsonp的原理，以及為什么不是真正的ajax
• 什么是Ajax和JSON，它們的優缺點，

五、前端概括性問題

• 常使用的庫有哪些？常用的前端開發工具？開發過什么應用或組件？
• 對BFC規范的理解？
• WEB應用從服務器主動推送Data到客戶端有那些方式？
• 平時如何管理你的專案，如何設計突發大規模并發架構？
• 那些操作會造成記憶體泄漏？
• 談談你認為怎樣做能使專案做的更好？
• php中rmdir可以直接洗掉檔案夾嗎？該目錄必須是空的，而且要有相應的權限–來自api
• phpinset和empty的區別，舉例說明
• php中$_SERVER變數中如何得到當前執行腳本路勁
• 寫一個php函式，要求兩個日期字串的天數差，如2012-02-05~2012-03-06的日
• 如何優化網頁加載速度？

由于篇幅原因列舉的內容不多，需要完整版前端大廠面試匯總（1）的小伙伴們直接點擊這領取，祝大家順風順水順財神！

結束語

無論做什么，不止前端，都應該要有自己的想法和思考，這樣子才能把事情做好，做得更深，否則這就像一場夢，醒來還是很感動，希望各位讀者，看上面的題目并不是背答案，而是理解它，并能活用，以后做類似的事情，有參考的思路，如果遇到和我同一個面試官，題目當然是不完全一樣的，此時需要臨場發揮自己的積累和靈活運用了，

最后再補充一點，如果你見過了普遍情況，了解到了普遍現象，那要是什么都和人家一樣，最后不就是也成為普遍水平了嗎？如果想脫離當前現狀，實作突破，那么目標應該是成為有個性、有特色的、有區分度的人，成為一名不一樣的前端，不一樣的人，