前端面試集合

小小周蝦發表於2019-01-22

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,如何交換
  • 事件委託
  • 多個
  • 標籤生成的Dom結構是一個類陣列
  • 類陣列和陣列的區別
  • dom的類陣列如何轉成陣列
  • 介紹單頁面應用和多頁面應用
  • redux狀態樹的管理
  • 介紹localstorage的API

蘑菇街

  • html語義化的理解
  • 的區別
  • 對閉包的理解
  • 工程中閉包使用場景
  • 介紹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)

相關文章