1. 程式人生 > >高階前端面試題大彙總(只有試題,沒有答案)

高階前端面試題大彙總(只有試題,沒有答案)

面試題來源於網路,看一下高階前端的面試題,可以知道自己和高階前端的差距。有些面試題會重複。

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

取陣列的最大值(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,如何交換

事件委託

多個標籤生成的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)