1. 程式人生 > >【面試】2018大廠高階前端面試題彙總

【面試】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時,webpacknode_modules裡的依賴會做什麼

  • JS非同步解決方案的發展歷程以及優缺點

  • Http報文的請求會有幾個部分

  • cookie放哪裡,cookie能做的事情和存在的價值

  • cookietoken都存放在header裡面,為什麼只劫持前者

  • cookiesession有哪些方面的區別

  • ReactDom結構發生變化後內部經歷了哪些變化

  • 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手機端的適配

  • remflex的區別(root em)

  • empx的區別

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

本文轉子 muyiyang_gaoji 微信分享 版權歸原創作者。