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

阿里

• 使用過的koa2中介軟體

• koa-body原理

• 介紹自己寫過的中介軟體

• 有沒有涉及到Cluster

• 介紹pm2

• 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]

• 取陣列的最大值（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碼是怎麼生成的

• 隨機值存在一樣的情況，如何避免

• 使用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，如何交換

• 事件委託

• 多個<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)