各大互聯網公司面試題

本人於7-8月開始准備面試，過五關斬六將，最終抱得網易歸，深深感受到高級前端面試的套路。以下是自己整理的面試題匯總，不敢藏私，統統貢獻出來。

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

以下是面試題匯總，后續階段會持續深入更新面試題解，共勉！

PS：文末有GitHub鏈接，歡迎各位Star，歡迎加高級前端進階群一起學習（文末）。

阿里

• 使用過的koa2中間件

• koa-body原理

• 介紹自己寫過的中間件

• 有沒有涉及到Cluster

• 介紹pm2

• master掛了的話pm2怎么處理

• 如何和MySQL進行通信

• React聲明周期及自己的理解

• 如何配置React-Router

• 路由的動態加載模塊

• 服務端渲染SSR

• 介紹路由的history

• 介紹Redux數據流的流程

• Redux如何實現多個組件之間的通信，多個組件使用相同狀態如何進行管理

• 多個組件之間如何拆分各自的state，每塊小的組件有自己的狀態，它們之間還有一些公共的狀態需要維護，如何思考這塊

• 使用過的Redux中間件

• 如何解決跨域的問題

• 常見Http請求頭

• 移動端適配1px的問題

• 介紹flex布局

• 其他css方式設置垂直居中

• 居中為什么要使用transform（為什么不使用marginLeft/Top）

• [x] 使用過webpack里面哪些plugin和loader

• [x] 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層面的性能優化
• 整個前端性能提升大致分幾類
• [x] import { Button } from 'antd'，打包的時候只打包button，分模塊加載，是怎么做到的
• [x] 使用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
• [x] webpack整個生命周期，loader和plugin有什么區別
• [x] 介紹AST（Abstract Syntax Tree）抽象語法樹
• 安卓Activity之間數據是怎么傳遞的
• 安卓4.0到6.0過程中WebView對js兼容性的變化
• WebView和原生是如何通信
• 跨域怎么解決，有沒有使用過Apache等方案

今日頭條

• 對async、await的理解，內部原理
• 介紹下Promise，內部實現
• [x] 清除浮動
• [x] 定位問題（絕對定位、相對定位等）
• 從輸入URL到頁面加載全過程
• tcp3次握手
• tcp屬於哪一層（1 物理層 -> 2 數據鏈路層 -> 3 網絡層(ip)-> 4 傳輸層(tcp) -> 5 應用層(http)）
• redux的設計思想
• 接入redux的過程
• 綁定connect的過程
• connect原理
• [x] 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層級過深的問題
• 前端怎么做單元測試
• [x] webpack生命周期
• [x] webpack打包的整個過程
• [x] 常用的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好
• [x] webpack如何配sass，需要配哪些loader
• [x] 配css需要哪些loader
• 如何配置把js、css、html單獨打包成一個文件
• [x] div垂直水平居中（flex、絕對定位）
• 兩個元素塊，一左一右，中間相距10像素
• 上下固定，中間滾動布局如何實現
• [1, 2, 3, 4, 5]變成[1, 2, 3, a, b, 5]
• 取數組的最大值（ES5、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狀態碼
• 403、301、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碼是怎么生成的
• 隨機值存在一樣的情況，如何避免
• [x] 使用webpack構建時有無做一些自定義操作
• [x] 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，如何交換
• 事件委托
• 多個<li>標簽生成的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)

作者：木易楊說
鏈接：https://www.jianshu.com/p/f871c4c0663d
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。