高級前端面試題大彙總（只有試題，沒有答案）

面試題來源於網絡，看一下高級前端的面試題，能夠知道本身和高級前端的差距。有些面試題會重複。

使用過的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的區別

CSS3動畫的瞭解

介紹下原型鏈（解決的是繼承問題嗎）

對跨域的瞭解

---

Linux 754 介紹

介紹冒泡排序，選擇排序，冒泡排序如何優化

transform動畫和直接使用left、top改變位置有什麼優缺點

如何判斷鏈表是否有環

介紹二叉搜索樹的特色

介紹暫時性死區

ES6中的map和原生的對象有什麼區別

觀察者和發佈-訂閱的區別

react異步渲染的概念,介紹Time Slicing 和 Suspense

聲明週期的改變

中props改變後在哪一個生命週期中處理

介紹純函數

前端性能優化

pureComponent和FunctionComponent區別

介紹JSX

如何作RN在安卓和IOS端的適配

RN爲何能在原生中繪製成原生組件（bundle.js）

介紹虛擬DOM

如何設計一個localStorage，保證數據的實效性

如何設計Promise.all()

介紹高階組件

sum(2, 3)實現sum(2)(3)的效果

react性能優化

兩個對象如何比較

---

JS的原型

變量做用域鏈

防抖和節流的區別

介紹各類異步方案

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)

Vue面試中，常常會被問到的面試題/Vue知識點整理
532道前端真實大廠面試題
學習ES6筆記──工做中經常使用到的ES6語法