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

一面

剛開(kāi)始就問(wèn)我的項(xiàng)目，問(wèn)得很詳細(xì)。

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

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

webpack 原理

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

webpack 熱更新

如何寫(xiě)一個(gè) webpack plugin

AST 的應(yīng)用

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

babel 原理，怎么寫(xiě) 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ù)組，打亂幾次，如何能夠看起來(lái)平衡，說(shuō)出你能想到的所有方法。

二面

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

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

監(jiān)控體系

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

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

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

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

三面

算法題：從數(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è)無(wú)序的整數(shù)數(shù)組，找到其中最長(zhǎng)上升子序列的長(zhǎng)度。

滴滴

一面

webpack 原理

babel 原理

虛擬 DOM 的理解

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

寫(xiě)過(guò)webpack loader 或者插件嗎

講講你寫(xiě)的 babel 插件

二面

redux 的原理

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

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

了解多端的原理嗎？

http 與 tcp 的關(guān)系

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

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

寫(xiě)過(guò) babel 插件嗎？用來(lái)干啥的？怎么寫(xiě)的 babel 插件

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

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

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

三面

項(xiàng)目介紹

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

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

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

會(huì)node 嗎？

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

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

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

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

為什么用 mysql

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

四面

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

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

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

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

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

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

虎牙

一面

http 的 get 和 post 區(qū)別

緩存策略

https 的握手過(guò)程

http2 的特點(diǎn)

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

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

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

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

說(shuō)說(shuō) vnode 的了解

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

有寫(xiě)過(guò) plugin

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

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

二面

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

編碼方面有了解過(guò)嗎，能解釋一下碼率嗎

編碼方面有了解過(guò)嗎，能解釋一下碼率嗎

RGB 和 YUV 區(qū)別

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

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

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

三面

webSocket 和 ajax 的區(qū)別

xss、csrf 有了解過(guò)嗎，如何防范

有了解過(guò) React 的 fiber

能簡(jiǎn)單介紹一下 react 執(zhí)行過(guò)程嗎

能介紹一下 hook 嗎

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

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

一、HTML和CSS

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

每個(gè)HTML文件里開(kāi)頭都有個(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è)域名來(lái)存儲(chǔ)網(wǎng)站資源會(huì)更有效？

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

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

簡(jiǎn)述一下src與href的區(qū)別。

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

知道什么是微格式嗎？談?wù)劺斫狻Ｔ谇岸藰?gòu)建中應(yīng)該考慮微格式嗎？

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

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

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

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

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

CSS都有哪些選擇器？

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

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

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

請(qǐng)用Css寫(xiě)一個(gè)簡(jiǎn)單的幻燈片效果頁(yè)面

行內(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 ，這行代碼是什么意思？為什么要這樣寫(xiě)？

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

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

阻止冒泡函數(shù)

輸出多少？

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

輸出結(jié)果

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

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

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

三、HTML5 CSS3

CSS3有那些新特性

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

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

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

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

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

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

HTML5 Canvas 元素有什么用？

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

用H5+CSS3解決下導(dǎo)航欄最后一項(xiàng)掉下來(lái)的問(wèn)題

CSS3新增偽類有那些？

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

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

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

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

四、Ajax

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

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

如何解決跨域問(wèn)題?

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

簡(jiǎn)述ajax 的過(guò)程。

闡述一下異步加載。

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

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

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

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

ajax的缺點(diǎn)

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

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

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

五、前端概括性問(wèn)題

常使用的庫(kù)有哪些？常用的前端開(kāi)發(fā)工具？開(kāi)發(fā)過(guò)什么應(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)限--來(lái)自api

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

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

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

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

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

結(jié)束語(yǔ)

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

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

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

然后就等著私信查收吧~