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

一面

? ? 剛開始就問我的項(xiàng)目，問得很詳細(xì)。

? ? webpack 提高構(gòu)建速度的方式

? ? loader 輸入什么產(chǎn)出什么 ？

? ? webpack 原理

? ? webpack 動(dòng)態(tài)加載的原理

? ? webpack 熱更新

? ? 如何寫一個(gè) webpack plugin

? ? AST 的應(yīng)用

? ? 如何解析一個(gè) html 文本，還是考 AST

? ? babel 原理，怎么寫 babel 插件

? ? 如何設(shè)計(jì)一個(gè)沙盒 sandbox ？

? ? 小程序的 API 做了什么處理，能夠做到全局變量的隱藏，如果是你，怎么設(shè)計(jì) ？

? ? 實(shí)現(xiàn)顏色轉(zhuǎn)換 'rgb(255, 255, 255)' -> '#FFFFFF' 的多種思路。

? ? 提供一個(gè)數(shù)字 n，生成一組 0~n-1 的整數(shù)，打亂順序組成數(shù)組，打亂幾次，如何能夠看起來平衡，說出你能想到的所有方法。

二面

? ? 業(yè)務(wù)，業(yè)務(wù)，還是業(yè)務(wù)，項(xiàng)目復(fù)盤有沒有更好的解決方案。

? ? 如何處理一個(gè)重大事故 bug

? ? 監(jiān)控體系

? ? 虛擬 dom 有什么好的地方？ 框架為什么要設(shè)計(jì)虛擬 dom？

? ? webpack 的缺點(diǎn)，讓你設(shè)計(jì)一個(gè)新的構(gòu)建打包工具，你會(huì)怎么設(shè)計(jì)？

? ? 在線文檔編輯，如何處理兩人的沖突，如何展示，考慮各種場景

? ? excel 文檔沖突高級處理，文章沖突呢？是上個(gè)問題的深化。

三面

? ? 算法題：從數(shù)組 [1, 5, 8, 10, 12] 中找到兩個(gè)數(shù)和為 9，返回 [1, 8] 這樣的結(jié)果。

? ? 算法題：從數(shù)組 [1, 5, 8, 10, 12] 中找到三個(gè)數(shù)和為 19，返回 [1, 8， 10] 這樣的結(jié)果。

? ? 算法題：給定一個(gè)無序的整數(shù)數(shù)組，找到其中最長上升子序列的長度。

滴滴

一面

? ? webpack 原理

? ? babel 原理

? ? 虛擬 DOM 的理解

? ? 項(xiàng)目里如何做的性能優(yōu)化

? ? 寫過webpack loader 或者插件嗎

? ? 講講你寫的 babel 插件

二面

? ? redux 的原理

? ? redux 做狀態(tài)管理和發(fā)布訂閱模式有什么區(qū)別

? ? react-redux 的原理，是怎么跟 react 關(guān)聯(lián)起來的

? ? 了解多端的原理嗎？

? ? http 與 tcp 的關(guān)系

? ? tcp 可以建立多個(gè)連接嗎？

? ? 介紹一下為什么要有 三次握手，四次揮手

? ? 寫過 babel 插件嗎？用來干啥的？怎么寫的 babel 插件

? ? 知道怎么轉(zhuǎn)化成 AST 的嗎？

? ? 研究過 React 的運(yùn)行時(shí)嗎？

? ? 職業(yè)規(guī)劃。

三面

? ? 項(xiàng)目介紹

? ? 說一下你的項(xiàng)目有哪些復(fù)雜的點(diǎn)，以及怎么解決的

? ? 你們的業(yè)務(wù)組件庫有多少個(gè)，是什么樣的組件

? ? 權(quán)限組件是怎么設(shè)計(jì)的

? ? 會(huì)node 嗎？

? ? 介紹一下你對中間件的理解

? ? 怎么保證后端服務(wù)穩(wěn)定性，怎么做容災(zāi)

? ? 怎么讓數(shù)據(jù)庫查詢更快

? ? 數(shù)據(jù)庫是用的什么？

? ? 為什么用 mysql

? ? 希望滴滴能提供給你什么？

四面

? ? 介紹一下項(xiàng)目的難點(diǎn)以及怎么解決的

? ? 自己有什么技術(shù)上的優(yōu)勢

? ? 最近在研究什么技術(shù)？

? ? 職業(yè)規(guī)劃

? ? 移動(dòng)端的業(yè)務(wù)有做過嗎？

? ? 當(dāng)業(yè)務(wù)重的時(shí)候怎么安排時(shí)間？

虎牙

一面

? ? http 的 get 和 post 區(qū)別

? ? 緩存策略

? ? https 的握手過程

? ? http2 的特點(diǎn)

? ? weak-Set、weak-Map 和 Set、Map 區(qū)別

? ? mvvm 模型和 mvc 模型區(qū)別

? ? 如何實(shí)現(xiàn)一個(gè) mvvm 模型

? ? 為何你用 mobx 重構(gòu)了 saga，說說兩者之間的區(qū)別

? ? 說說 vnode 的了解

? ? 講講 webpack 的性能優(yōu)化

? ? 有寫過 plugin

? ? 了解 webpack-dev-server 的 HMR 實(shí)現(xiàn)原理嗎

? ? 手寫一下防抖和節(jié)流

二面

? ? 你做過直播，能介紹一下 webRTC 或者現(xiàn)在使用直播方案嗎

? ? 編碼方面有了解過嗎，能解釋一下碼率嗎

? ? 編碼方面有了解過嗎，能解釋一下碼率嗎

? ? RGB 和 YUV 區(qū)別

? ? 有了解過哪些直播協(xié)議

? ? flv 和 mp4 區(qū)別有了解過嗎

? ? MediaSource 規(guī)范有了解過

三面

? ? webSocket 和 ajax 的區(qū)別

? ? xss、csrf 有了解過嗎，如何防范

? ? 有了解過 React 的 fiber

? ? 能簡單介紹一下 react 執(zhí)行過程嗎

? ? 能介紹一下 hook 嗎

? ? 情景題，做一個(gè)直播彈幕

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

一、HTML和CSS

? ? 你做的頁面在哪些瀏覽器測試過？這些瀏覽器的內(nèi)核分別是什么?

? ? 每個(gè)HTML文件里開頭都有個(gè)很重要的東西，Doctype，知道這是干什么的嗎？

? ? Quirks模式是什么？它和Standards模式有什么區(qū)別

? ? div+css的布局較table布局有什么優(yōu)點(diǎn)？

? ? img的alt與title有何異同？ strong與em的異同？

? ? 你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級之間的不同嗎?

? ? 為什么利用多個(gè)域名來存儲(chǔ)網(wǎng)站資源會(huì)更有效？

? ? 請談一下你對網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解。

? ? 請描述一下cookies，sessionStorage和localStorage的區(qū)別？

? ? 簡述一下src與href的區(qū)別。

? ? 知道的網(wǎng)頁制作會(huì)用到的圖片格式有哪些？

? ? 知道什么是微格式嗎？談?wù)劺斫?。在前端?gòu)建中應(yīng)該考慮微格式嗎？

? ? 在css/js代碼上線之后開發(fā)人員經(jīng)常會(huì)優(yōu)化性能，從用戶刷新網(wǎng)頁開始，一次js請求一般情況下有

? ? 一個(gè)頁面上有大量的圖片（大型電商網(wǎng)站），加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶更好的

? ? 你如何理解HTML結(jié)構(gòu)的語義化？

? ? 談?wù)勔郧岸私嵌瘸霭l(fā)做好SEO需要考慮什么？

? ? 有哪項(xiàng)方式可以對一個(gè)DOM設(shè)置它的CSS樣式？

? ? CSS都有哪些選擇器？

? ? CSS中可以通過哪些屬性定義，使得一個(gè)DOM元素不顯示在瀏覽器可視范圍內(nèi)？

? ? 超鏈接訪問過后hover樣式就不出現(xiàn)的問題是什么？如何解決？

? ? 什么是Css Hack？ie6,7,8的hack分別是什么？

? ? 請用Css寫一個(gè)簡單的幻燈片效果頁面

? ? 行內(nèi)元素和塊級元素的具體區(qū)別是什么？行內(nèi)元素的padding和margin可設(shè)置嗎？

? ? 什么是外邊距重疊？重疊的結(jié)果是什么？

二、JS基礎(chǔ)

? ? javascript的typeof返回哪些數(shù)據(jù)類型

? ? 例舉3種強(qiáng)制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換?

? ? split() join() 的區(qū)別

? ? 數(shù)組方法pop() push() unshift() shift()

? ? 事件綁定和普通事件有什么區(qū)別

? ? IE和DOM事件流的區(qū)別

? ? call和apply的區(qū)別

? ? b繼承a的方法

? ? JavaScript this指針、閉包、作用域

? ? 如何阻止事件冒泡和默認(rèn)事件

? ? ”==”和“===”的不同

? ? JavaScript的數(shù)據(jù)類型都有什么？

? ? 看下列代碼輸出為何？解釋原因。

? ? foo = foo||bar ，這行代碼是什么意思？為什么要這樣寫？

? ? 完成foo()函數(shù)的內(nèi)容，要求能夠彈出對話框提示當(dāng)前選中的是第幾個(gè)單選框。

? ? 完成函數(shù)showImg()，要求能夠動(dòng)態(tài)根據(jù)下拉列表的選項(xiàng)變化，更新圖片的顯示

? ? 阻止冒泡函數(shù)

? ? 輸出多少？

? ? 精度問題: JS 精度不能精確到 0.1 所以 。。。。同時(shí)存在于值和差值中

? ? 輸出結(jié)果

? ? 以下代碼中end字符串什么時(shí)候輸出

? ? 請用原生js實(shí)現(xiàn)jquery的get\post功能，以及跨域情況下

? ? 請簡要描述web前端性能需要考慮哪方面，你的優(yōu)化思路是什么？

三、HTML5 CSS3

? ? CSS3有那些新特性

? ? html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HT

? ? 本地存儲(chǔ)（Local Storage ）和cookies（儲(chǔ)存在用戶本地終端上的數(shù)據(jù)）之間的區(qū)別

? ? 如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信?

? ? 你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化？

? ? 什么是響應(yīng)式設(shè)計(jì)？

? ? 新的 HTML5 文檔類型和字符集是？

? ? HTML5 Canvas 元素有什么用？

? ? HTML5 存儲(chǔ)類型有什么區(qū)別？

? ? 用H5+CSS3解決下導(dǎo)航欄最后一項(xiàng)掉下來的問題

? ? CSS3新增偽類有那些？

? ? 請用CSS實(shí)現(xiàn)：一個(gè)矩形內(nèi)容，有投影，有圓角，hover狀態(tài)慢慢變透明。

? ? 描述下CSS3里實(shí)現(xiàn)元素動(dòng)畫的方法

? ? html5\CSS3有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？

? ? 你怎么來實(shí)現(xiàn)頁面設(shè)計(jì)圖，你認(rèn)為前端應(yīng)該如何高質(zhì)量完成工作? 一個(gè)滿屏 品 字布局 如何設(shè)計(jì)?

四、Ajax

? ? Ajax 是什么? 如何創(chuàng)建一個(gè)Ajax？

? ? 同步和異步的區(qū)別?

? ? 如何解決跨域問題?

? ? 頁面編碼和被請求的資源編碼如果不一致如何處理？

? ? 簡述ajax 的過程。

? ? 闡述一下異步加載。

? ? 請解釋一下 JavaScript 的同源策略。

? ? GET和POST的區(qū)別，何時(shí)使用POST？

? ? ajax 是什么?ajax 的交互模型?同步和異步的區(qū)別?如何解決跨域問題?

? ? Ajax的最大的特點(diǎn)是什么。

? ? ajax的缺點(diǎn)

? ? ajax請求的時(shí)候get 和post方式的區(qū)別

? ? 解釋jsonp的原理，以及為什么不是真正的ajax

? ? 什么是Ajax和JSON，它們的優(yōu)缺點(diǎn)。

五、前端概括性問題

? ? 常使用的庫有哪些？常用的前端開發(fā)工具？開發(fā)過什么應(yīng)用或組件？

? ? 對BFC規(guī)范的理解？

? ? WEB應(yīng)用從服務(wù)器主動(dòng)推送Data到客戶端有那些方式？

? ? 平時(shí)如何管理你的項(xiàng)目，如何設(shè)計(jì)突發(fā)大規(guī)模并發(fā)架構(gòu)？

? ? 那些操作會(huì)造成內(nèi)存泄漏？

? ? 談?wù)勀阏J(rèn)為怎樣做能使項(xiàng)目做的更好？

? ? php中rmdir可以直接刪除文件夾嗎？該目錄必須是空的，而且要有相應(yīng)的權(quán)限--來自api

? ? phpinset和empty的區(qū)別，舉例說明

? ? php中$_SERVER變量中如何得到當(dāng)前執(zhí)行腳本路徑

? ? 寫一個(gè)php函數(shù)，要求兩個(gè)日期字符串的天數(shù)差，如2012-02-05~2012-03-06的日

? ? 如何優(yōu)化網(wǎng)頁加載速度？

由于篇幅原因列舉的內(nèi)容不多，需要完整版前端大廠面試匯總已經(jīng)打包完畢.

結(jié)束語

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

最后再補(bǔ)充一點(diǎn)，如果你見過了普遍情況，了解到了普遍現(xiàn)象，那要是什么都和人家一樣，最后不就是也成為普遍水平了嗎？如果想脫離當(dāng)前現(xiàn)狀，實(shí)現(xiàn)突破，那么目標(biāo)應(yīng)該是成為有個(gè)性、有特色的、有區(qū)分度的人，成為一名不一樣的前端，不一樣的人。?

想要領(lǐng)取資料的小伙伴們，請關(guān)注下方微信公眾號領(lǐng)取哦~?

然后就等著私信查收吧~