小編整理最近了小伙伴中具有代表性的面試經(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ì)？

• 在線文檔編輯，如何處理兩人的沖突，如何展示，考慮各種場(chǎng)景

• excel 文檔沖突高級(jí)處理，文章沖突呢？是上個(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 嗎？

• 介紹一下你對(duì)中間件的理解

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

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

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

• 為什么用 mysql

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

四面

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

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

• 最近在研究什么技術(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

• 你做的頁面在哪些瀏覽器測(cè)試過？這些瀏覽器的內(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)雅降級(jí)之間的不同嗎?

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

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

• 請(qǐng)描述一下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請(qǐng)求一般情況下有

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

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

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

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

• CSS都有哪些選擇器？

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

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

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

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

• 行內(nèi)元素和塊級(jí)元素的具體區(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)容，要求能夠彈出對(duì)話框提示當(dāng)前選中的是第幾個(gè)單選框。

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

• 阻止冒泡函數(shù)

• 輸出多少？

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

• 輸出結(jié)果

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

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

• 請(qǐng)簡要描述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)簽頁之間的通信?

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

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

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

• HTML5 Canvas 元素有什么用？

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

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

• CSS3新增偽類有那些？

• 請(qǐng)用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ū)別?

• 如何解決跨域問題?

• 頁面編碼和被請(qǐng)求的資源編碼如果不一致如何處理？

• 簡述ajax 的過程。

• 闡述一下異步加載。

• 請(qǐng)解釋一下 JavaScript 的同源策略。

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

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

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

• ajax的缺點(diǎn)

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

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

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

五、前端概括性問題

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

• 對(duì)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)該要有自己的想法和思考，這樣子才能把事情做好，做得更深。否則這就像一場(chǎng)夢(mèng)，醒來還是很感動(dòng)。希望各位讀者，看上面的題目并不是背答案，而是理解它，并能活用，以后做類似的事情，有參考的思路。如果遇到和我同一個(gè)面試官，題目當(dāng)然是不完全一樣的，此時(shí)需要臨場(chǎng)發(fā)揮自己的積累和靈活運(yùn)用了。
最后再補(bǔ)充一點(diǎn)，如果你見過了普遍情況，了解到了普遍現(xiàn)象，那要是什么都和人家一樣，最后不就是也成為普遍水平了嗎？如果想脫離當(dāng)前現(xiàn)狀，實(shí)現(xiàn)突破，那么目標(biāo)應(yīng)該是成為有個(gè)性、有特色的、有區(qū)分度的人，成為一名不一樣的前端，不一樣的人。