2018大廠高級前端面試題彙總

更新：謝謝你們的支持，最近折騰了一個博客官網出來，方便你們系統閱讀，後續會有更多內容和更多優化，猛戳這裏查看css

------ 如下是正文 ------html

本人於7-8月開始準備面試，過五關斬六將，最終抱得網易歸，深深感覺到高級前端面試的套路。如下是本身整理的面試題彙總，不敢藏私，通通貢獻出來。前端

面試的公司分別是：阿里、網易、滴滴、今日頭條、有贊、挖財、滬江、餓了麼、攜程、喜馬拉雅、兌吧、微醫、寺庫、寶寶樹、海康威視、蘑菇街、酷家樂、百分點和海風教育。node

如下是面試題彙總，前端進階系列會持續深刻更新面試題解，共勉！react

阿里

使用過的koa2中間件webpack
koa-body原理css3
介紹本身寫過的中間件git
有沒有涉及到Clustergithub
介紹pm2web
master掛了的話pm2怎麼處理
如何和MySQL進行通訊
React聲明週期及本身的理解
如何配置React-Router
路由的動態加載模塊
服務端渲染SSR
介紹路由的history
介紹Redux數據流的流程
Redux如何實現多個組件之間的通訊，多個組件使用相同狀態如何進行管理
多個組件之間如何拆分各自的state，每塊小的組件有本身的狀態，它們之間還有一些公共的狀態須要維護，如何思考這塊
使用過的Redux中間件
如何解決跨域的問題
常見Http請求頭
移動端適配1px的問題
介紹flex佈局
其餘css方式設置垂直居中
居中爲何要使用transform（爲何不使用marginLeft/Top）
使用過webpack裏面哪些plugin和loader
webpack裏面的插件是怎麼實現的
dev-server是怎麼跑起來
項目優化
抽取公共文件是怎麼配置的
項目中如何處理安全問題
怎麼實現this對象的深拷貝

網易

介紹redux，主要解決什麼問題
文件上傳如何作斷點續傳
表單能夠跨域嗎
promise、async有什麼區別
搜索請求如何處理（防抖）
搜索請求中文如何請求
介紹觀察者模式
介紹中介者模式
觀察者和訂閱-發佈的區別，各自用在哪裏
介紹react優化
介紹http2.0
經過什麼作到併發請求
http1.1時如何複用tcp鏈接
介紹service worker
介紹css3中position:sticky
redux請求中間件如何處理併發
介紹Promise，異常捕獲
介紹position屬性包括CSS3新增
瀏覽器事件流向
介紹事件代理以及優缺點
React組件中怎麼作事件代理
React組件事件代理的原理
介紹this各類狀況
前端怎麼控制管理路由
使用路由時出現問題如何解決
React怎麼作數據的檢查和變化

滴滴

react-router怎麼實現路由切換
react-router裏的<Link>標籤和<a>標籤有什麼區別
<a>標籤默認事件禁掉以後作了什麼才實現了跳轉
React層面的性能優化
整個前端性能提高大體分幾類
import { Button } from 'antd'，打包的時候只打包button，分模塊加載，是怎麼作到的
使用import時，webpack對node_modules裏的依賴會作什麼
JS異步解決方案的發展歷程以及優缺點
Http報文的請求會有幾個部分
cookie放哪裏，cookie能作的事情和存在的價值
cookie和token都存放在header裏面，爲何只劫持前者
cookie和session有哪些方面的區別
React中Dom結構發生變化後內部經歷了哪些變化
React掛載的時候有3個組件，textComponent、composeComponent、domComponent，區別和關係，Dom結構發生變化時怎麼區分data的變化，怎麼更新，更新怎麼調度，若是更新的時候還有其餘任務存在怎麼處理
key主要是解決哪一類的問題，爲何不建議用索引index（重繪）
Redux中異步的請求怎麼處理
Redux中間件是什麼東西，接受幾個參數（兩端的柯里化函數）
柯里化函數兩端的參數具體是什麼東西
中間件是怎麼拿到store和action，而後怎麼處理
state是怎麼注入到組件的，從reducer到組件經歷了什麼樣的過程
koa中response.send、response.rounded、response.json發生了什麼事，瀏覽器爲何能識別到它是一個json結構或是html
koa-bodyparser怎麼來解析request
webpack整個生命週期，loader和plugin有什麼區別
介紹AST（Abstract Syntax Tree）抽象語法樹
安卓Activity之間數據是怎麼傳遞的
安卓4.0到6.0過程當中WebView對js兼容性的變化
WebView和原生是如何通訊
跨域怎麼解決，有沒有使用過Apache等方案

今日頭條

對async、await的理解，內部原理
介紹下Promise，內部實現
清除浮動
定位問題（絕對定位、相對定位等）
從輸入URL到頁面加載全過程
tcp3次握手
tcp屬於哪一層（1 物理層 -> 2 數據鏈路層 -> 3 網絡層(ip)-> 4 傳輸層(tcp) -> 5 應用層(http)）
redux的設計思想
接入redux的過程
綁定connect的過程
connect原理
webpack介紹
== 和 ===的區別，什麼狀況下用相等==
bind、call、apply的區別
動畫的瞭解
介紹下原型鏈（解決的是繼承問題嗎）
對跨域的瞭解

有贊

Linux 754 介紹
介紹冒泡排序，選擇排序，冒泡排序如何優化
transform動畫和直接使用left、top改變位置有什麼優缺點
如何判斷鏈表是否有環
介紹二叉搜索樹的特色
介紹暫時性死區
ES6中的map和原生的對象有什麼區別
觀察者和發佈-訂閱的區別
react異步渲染的概念,介紹Time Slicing 和 Suspense
16.X聲明週期的改變
16.X中props改變後在哪一個生命週期中處理
介紹純函數
前端性能優化
pureComponent和FunctionComponent區別
介紹JSX
如何作RN在安卓和IOS端的適配
RN爲何能在原生中繪製成原生組件（bundle.js）
介紹虛擬DOM
如何設計一個localStorage，保證數據的實效性
如何設計Promise.all()
介紹高階組件
sum(2, 3)實現sum(2)(3)的效果
react性能優化
兩個對象如何比較

挖財

JS的原型
變量做用域鏈
call、apply、bind的區別
防抖和節流的區別
介紹各類異步方案
react生命週期
介紹Fiber
前端性能優化
介紹DOM樹對比
react中的key的做用
如何設計狀態樹
介紹css，xsrf
http緩存控制
項目中如何應用數據結構
native提供了什麼能力給RN
如何作工程上的優化
shouldComponentUpdate是爲了解決什麼問題
如何解決props層級過深的問題
前端怎麼作單元測試
webpack生命週期
webpack打包的整個過程
經常使用的plugins
pm2怎麼作進程管理，進程掛掉怎麼處理
不用pm2怎麼作進程管理

滬江

介紹下瀏覽器跨域
怎麼去解決跨域問題
jsonp方案須要服務端怎麼配合
Ajax發生跨域要設置什麼（前端）
加上CORS以後從發起到請求正式成功的過程
xsrf跨域攻擊的安全性問題怎麼防範
使用Async會注意哪些東西
Async裏面有多個await請求，能夠怎麼優化（請求是否有依賴）
Promise和Async處理失敗的時候有什麼區別
Redux在狀態管理方面解決了React自己不能解決的問題
Redux有沒有作過封裝
react生命週期，經常使用的生命週期
對應的生命週期作什麼事
遇到性能問題通常在哪一個生命週期裏解決
怎麼作性能優化（異步加載組件...）
寫react有哪些細節能夠優化
React的事件機制（綁定一個事件到一個組件上）
介紹下事件代理，主要解決什麼問題
前端開發中用到哪些設計模式
React/Redux中哪些功能用到了哪些設計模式
JS變量類型分爲幾種，區別是什麼
JS裏垃圾回收機制是什麼，經常使用的是哪一種，怎麼處理的
通常怎麼組織CSS（Webpack）

餓了麼

小程序裏面開頁面最多多少
React子父組件之間如何傳值
Emit事件怎麼發，須要引入什麼
介紹下React高階組件，和普通組件有什麼區別
一個對象數組，每一個子對象包含一個id和name，React如何渲染出所有的name
在哪一個生命週期裏寫
其中有幾個name不存在，經過異步接口獲取，如何作
渲染的時候key給什麼值，可使用index嗎，用id好仍是index好
webpack如何配sass，須要配哪些loader
配css須要哪些loader
如何配置把js、css、html單獨打包成一個文件
div垂直水平居中（flex、絕對定位）
兩個元素塊，一左一右，中間相距10像素
上下固定，中間滾動佈局如何實現
[1, 2, 3, 4, 5]變成[1, 2, 3, a, b, 5]
取數組的最大值（ES五、ES6）
apply和call的區別
ES5和ES6有什麼區別
some、every、find、filter、map、forEach有什麼區別
上述數組隨機取數，每次返回的值都不同
如何找0-5的隨機數，95-99呢
頁面上有1萬個button如何綁定事件
如何判斷是button
頁面上生成一萬個button，而且綁定事件，如何作（JS原生操做DOM）
循環綁定時的index是多少，爲何，怎麼解決
頁面上有一個input，還有一個p標籤，改變input後p標籤就跟着變化，如何處理
監聽input的哪一個事件，在何時觸發

攜程

手寫兩道算法題
對React見解，有沒有遇到一些坑
對閉包的見解，爲何要用閉包
手寫數組去重函數
手寫數組扁平化函數
介紹下Promise的用途和性質
Promise和Callback有什麼區別
React生命週期

喜馬拉雅

ES6新的特性
介紹Promise
Promise有幾個狀態
說一下閉包
React的生命週期
componentWillReceiveProps的觸發條件是什麼
React16.3對生命週期的改變
介紹下React的Filber架構
畫Filber渲染樹
介紹React高階組件
父子組件之間如何通訊
Redux怎麼實現屬性傳遞，介紹下原理
React-Router版本號
網站SEO怎麼處理
介紹下HTTP狀態碼
40三、30一、302是什麼
緩存相關的HTTP請求頭
介紹HTTPS
HTTPS怎麼創建安全通道
前端性能優化（JS原生和React）
用戶體驗作過什麼優化
對PWA有什麼瞭解
對安全有什麼瞭解
介紹下數字簽名的原理
先後端通訊使用什麼方案
RESTful經常使用的Method
介紹下跨域
Access-Control-Allow-Origin在服務端哪裏配置
csrf跨站攻擊怎麼解決
前端和後端怎麼聯調

兌吧

localStorage和cookie有什麼區別
CSS選擇器有哪些
盒子模型，以及標準狀況和IE下的區別
如何實現高度自適應
prototype和——proto——區別
_construct是什麼
new是怎麼實現的
promise的精髓，以及優缺點
如何實現H5手機端的適配
rem、flex的區別（root em）
em和px的區別
React聲明週期
如何去除url中的#號
Redux狀態管理器和變量掛載到window中有什麼區別
webpack和gulp的優缺點
如何實現異步加載
如何實現分模塊打包（多入口）
前端性能優化（1js css；2 圖片；3 緩存預加載； 4 SSR； 5 多域名加載；6 負載均衡）
併發請求資源數上限（6個）
base64爲何能提高性能，缺點
介紹webp這個圖片文件格式
介紹koa2
Promise如何實現的
異步請求，低版本fetch如何低版本適配
ajax如何處理跨域
CORS如何設置
jsonp爲何不支持post方法
介紹同源策略
React使用過的一些組件
介紹Immuable
介紹下redux整個流程原理
介紹原型鏈
如何繼承

微醫

介紹JS數據類型，基本數據類型和引用數據類型的區別
Array是Object類型嗎
數據類型分別存在哪裏
var a = {name: "前端開發"}; var b = a; a = null那麼b輸出什麼
var a = {b: 1}存放在哪裏
var a = {b: {c: 1}}存放在哪裏
棧和堆的區別
垃圾回收時棧和堆的區別
數組裏面有10萬個數據，取第一個元素和第10萬個元素的時間相差多少
棧和堆具體怎麼存儲
介紹閉包以及閉包爲何沒清除
閉包的使用場景
JS怎麼實現異步
異步整個執行週期
Promise的三種狀態
Async/Await怎麼實現
Promise和setTimeout執行前後的區別
JS爲何要區分微任務和宏任務
Promise構造函數是同步仍是異步執行，then呢
發佈-訂閱和觀察者模式的區別
JS執行過程當中分爲哪些階段
詞法做用域和this的區別
日常是怎麼作繼承
深拷貝和淺拷貝
loadsh深拷貝實現原理
ES6中let塊做用域是怎麼實現的
React中setState後發生了什麼
setState爲何默認是異步
setState何時是同步的
爲何3大框架出現之後就出現不少native（RN）框架（虛擬DOM）
虛擬DOM主要作了什麼
虛擬DOM自己是什麼（JS對象）
304是什麼
打包時Hash碼是怎麼生成的
隨機值存在同樣的狀況，如何避免
使用webpack構建時有無作一些自定義操做
webpack作了什麼
a，b兩個按鈕，點擊aba，返回順序多是baa，如何保證是aba（Promise.then）
node接口轉發有無作什麼優化
node起服務如何保證穩定性，平緩降級，重啓等
RN有沒有作熱加載
RN遇到的兼容性問題
RN如何實現一個原生的組件
RN混原生和原生混RN有什麼不一樣
什麼是單頁項目
遇到的複雜業務場景
Promise.all實現原理

寺庫

介紹Promise的特性，優缺點
介紹Redux
RN的原理，爲何能夠同時在安卓和IOS端運行
RN如何調用原生的一些功能
介紹RN的缺點
介紹排序算法和快排原理
堆和棧的區別
介紹閉包
閉包的核心是什麼
網絡的五層模型
HTTP和HTTPS的區別
HTTPS的加密過程
介紹SSL和TLS
介紹DNS解析
JS的繼承方法
介紹垃圾回收
cookie的引用爲了解決什麼問題
cookie和localStorage的區別
如何解決跨域問題
前端性能優化

寶寶樹

使用canvas繪圖時如何組織成通用組件
formData和原生的ajax有什麼區別
介紹下表單提交，和formData有什麼關係
介紹redux接入流程
rudux和全局管理有什麼區別（數據可控、數據響應）
RN和原生通訊
介紹MVP怎麼組織
介紹異步方案
promise如何實現then處理
koa2中間件原理
經常使用的中間件
服務端怎麼作統一的狀態處理
如何對相對路徑引用進行優化
node文件查找優先級
npm2和npm3+有什麼區別

海康威視

knex鏈接數據庫響應回調
介紹異步方案
如何處理異常捕獲
項目如何管理模塊
前端性能優化
JS繼承方案
如何判斷一個變量是否是數組
變量a和b，如何交換
事件委託
多個
標籤生成的Dom結構是一個類數組
類數組和數組的區別
dom的類數組如何轉成數組
介紹單頁面應用和多頁面應用
redux狀態樹的管理
介紹localstorage的API

蘑菇街

html語義化的理解
<b>和<strong>的區別
對閉包的理解
工程中閉包使用場景
介紹this和原型
使用原型最大的好處
react設計思路
爲何虛擬DOM比真實DOM性能好
react常見的通訊方式
redux總體的工做流程
redux和全局對象之間的區別
Redux數據回溯設計思路
單例、工廠、觀察者項目中實際場景
項目中樹的使用場景以及瞭解
工做收穫

酷家樂

react生命週期
react性能優化
添加原生事件不移除爲何會內存泄露
還有哪些地方會內存泄露
setInterval須要注意的點
定時器爲何是不精確的
setTimeout(1)和setTimeout(2)之間的區別
介紹宏任務和微任務
promise裏面和then裏面執行有什麼區別
介紹pureComponet
介紹Function Component
React數據流
props和state的區別
介紹react context
介紹class和ES5的類以及區別
介紹箭頭函數和普通函數的區別
介紹defineProperty方法，何時須要用到
for..in 和 object.keys的區別
介紹閉包，使用場景
使用閉包特權函數的使用場景
get和post有什麼區別

百分點

React15/16.x的區別
從新渲染render會作些什麼
哪些方法會觸發react從新渲染
state和props觸發更新的生命週期分別有什麼區別
setState是同步仍是異步
對無狀態組件的理解
介紹Redux工做流程
介紹ES6的功能
let、const以及var的區別
淺拷貝和深拷貝的區別
介紹箭頭函數的this
介紹Promise和then
介紹快速排序
算法：前K個最大的元素

海風教育

對react見解，它的優缺點
使用過程當中遇到的問題，如何解決的
react的理念是什麼（拿函數式編程來作頁面渲染）
JS是什麼範式語言(面向對象仍是函數式編程)
koa原理，爲何要用koa(express和koa對比)
使用的koa中間件
ES6使用的語法
Promise 和 async/await 和 callback的區別
Promise有沒有解決異步的問題（promise鏈是真正強大的地方）
Promise和setTimeout的區別（Event Loop）
進程和線程的區別（一個node實例就是一個進程，node是單線程，經過事件循環來實現異步

）
介紹下DFS深度優先
介紹下觀察者模式
觀察者模式裏面使用的數據結構(不具有順序，是一個list)

交流

本人Github連接以下，歡迎各位Star

github.com/yygmind/blo…

我是木易楊，網易高級前端工程師，跟着我每週重點攻克一個前端面試重難點。接下來讓我帶你走進高級前端的世界，在進階的路上，共勉！