2018年底前端面試總結(jié)

Anchorer 發(fā)布于2019-08-29 17:30 / 655人閱讀

摘要：主要是整理一些自己還記得的面試題。標(biāo)注重點(diǎn)的是頻繁出現(xiàn)的，也確實(shí)很重要的知識(shí)點(diǎn)。總之要深度理解舉一反三邏輯清晰表達(dá)流暢。以上，僅供參考。

主要是整理一些自己還記得的面試題。很多題目會(huì)根據(jù)項(xiàng)目?jī)?nèi)容提問(wèn)，現(xiàn)在只記得一些比較常規(guī)的問(wèn)題，后面想起來(lái)會(huì)做一些補(bǔ)充。標(biāo)注重點(diǎn)的是頻繁出現(xiàn)的，也確實(shí)很重要的知識(shí)點(diǎn)。

css

盒子模型：ie與其他瀏覽器的區(qū)別，如何改變盒子模型

圖形：實(shí)現(xiàn)扇形/圓環(huán)/梯形/三角形等（建議掌握常見(jiàn)圖形實(shí)現(xiàn)）

定位：position有哪些值并描述作用，z-index使用條件以及優(yōu)先級(jí)

flex：有哪些屬性并描述作用，如何實(shí)現(xiàn)柵格/圣杯布局/流式布局等（重點(diǎn)，建議記住所有屬性并掌握常見(jiàn)使用場(chǎng)景）

布局：垂直居中/九宮格/固定某個(gè)自適應(yīng)某個(gè)的方法有哪些（建議每個(gè)常見(jiàn)布局多了解幾種方法）

使用過(guò)哪些css3特性

動(dòng)畫：animation有哪些屬性值及其基本使用，實(shí)現(xiàn)一個(gè)上拋后下墜的動(dòng)畫，jquery中是如何實(shí)現(xiàn)動(dòng)畫的，知道或使用過(guò)哪些動(dòng)畫庫(kù)

轉(zhuǎn)換：transform有哪些屬性值以及基本使用

基本數(shù)據(jù)類型和引用數(shù)據(jù)類型分別有哪些及其區(qū)別

原型/原型鏈?zhǔn)窃趺礃拥模謩e使用es5和es6實(shí)現(xiàn)繼承，繼承方法有哪些并各有什么優(yōu)缺點(diǎn)，你在項(xiàng)目中哪里使用到原型鏈/繼承（重點(diǎn)）

有哪些設(shè)計(jì)模式，你在項(xiàng)目哪里使用到

說(shuō)說(shuō)閉包和鏈?zhǔn)秸{(diào)用，你在哪里使用到閉包

this指向問(wèn)題（一般會(huì)有具體的代碼）

說(shuō)說(shuō)JS的內(nèi)存機(jī)制及垃圾回收機(jī)制

call/apply/bind的作用與區(qū)別

有哪些遍歷數(shù)組的方法及其特點(diǎn)

實(shí)現(xiàn)一個(gè)深拷貝的方法

函數(shù)節(jié)流和防抖的實(shí)現(xiàn)

數(shù)組去重的實(shí)現(xiàn)方法（建議掌握多種方法，并知曉其特點(diǎn)）

數(shù)組的排序，亂序，找出中位數(shù)（建議掌握多種方法，并知曉其特點(diǎn)）

二叉樹(shù)的三種遍歷方法

使用es6實(shí)現(xiàn)一個(gè)工廠模式

實(shí)現(xiàn)一個(gè)觀察者模式（重點(diǎn)）

實(shí)現(xiàn)一個(gè)lazyMan（請(qǐng)自行搜索）

線性數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換成樹(shù)形結(jié)構(gòu)

求數(shù)組中最大和的連續(xù)子數(shù)組

封裝一個(gè)只能執(zhí)行一次的函數(shù) once(fnc)，后面執(zhí)行返回undefined

如何解決數(shù)字運(yùn)算精度問(wèn)題，比如0.1+0.2!=0.3

使用過(guò)哪些es6特性

let/const/var的區(qū)別

普通函數(shù)和箭頭函數(shù)的區(qū)別

Promise和async/await的使用及其異同（重點(diǎn)，最好能使用es5實(shí)現(xiàn)Promise）

運(yùn)算結(jié)果：true == "1", 3 + "2", 3 * "2", a=1;b=a++ 等等

通信協(xié)議

http狀態(tài)碼有哪些及其含義（重點(diǎn)，建議除了404和200再至少記住常見(jiàn)的10個(gè)）

http控制緩存的方法以及區(qū)別，什么情況會(huì)出現(xiàn)304，你的項(xiàng)目中是如何配置的（重點(diǎn)）

https與http的區(qū)別，https的原理及其局限性，說(shuō)說(shuō)http2

請(qǐng)求方法有哪些及其區(qū)別，請(qǐng)求報(bào)頭/響應(yīng)報(bào)頭有哪些

登錄注冊(cè)除了https還有哪些可以增強(qiáng)安全性

WebSocket是什么及其特點(diǎn)

vue/react

vue的內(nèi)置組件有哪些，nextTick有什么用

vue/react組件生命周期（重點(diǎn)，建議描述完整的過(guò)程，并描述各個(gè)鉤子函數(shù)可以做哪些事情，而不僅僅是說(shuō)出鉤子函數(shù)）

vue的雙向數(shù)據(jù)綁定原理（重點(diǎn)，除了監(jiān)聽(tīng)數(shù)據(jù)變化，建議再了解一下數(shù)據(jù)變化后到更新dom的過(guò)程，主要是發(fā)布-訂閱者模式）

vue的virtual-dom原理及其更新算法

vue-router路由的兩種模式有什么區(qū)別

在vue中數(shù)組的哪些操作方法可以觸發(fā)vue視圖更新，為什么

vue父子組件之間如何通信

vuex的基本使用原理，你在哪些項(xiàng)目的哪些地方使用到

開(kāi)發(fā)過(guò)哪些組件，依據(jù)什么理念或方法去設(shè)計(jì)開(kāi)發(fā)組件

spa有什么特點(diǎn)，服務(wù)端渲染有什么特點(diǎn)

vue和react有什么區(qū)別（如果使用過(guò)不止一個(gè)框架，那么很可能會(huì)問(wèn)類似的問(wèn)題）

最近react更新了哪些內(nèi)容（主要是新版本的特性，可以適當(dāng)跟之前版本對(duì)比）

瀏覽器及其他

瀏覽器輸入url到顯示出頁(yè)面內(nèi)容的過(guò)程（重點(diǎn)，建議至少要從建立通信和瀏覽器解析渲染角度去說(shuō)）

Dom 插入/刪除/查找/移動(dòng)操作，分別有哪些方法

gulp與webpack的區(qū)別

webpack的基礎(chǔ)配置有哪些（重點(diǎn)）

項(xiàng)目中你在webpack做了哪些優(yōu)化，項(xiàng)目中你打包成哪些文件，有哪些加快build的優(yōu)化方法（重點(diǎn)）

有哪些優(yōu)化網(wǎng)站性能的方法，有哪些圖片優(yōu)化方法（重點(diǎn)）

一個(gè)頁(yè)面有非常多內(nèi)容的時(shí)候如何優(yōu)化，比如一個(gè)非常長(zhǎng)的列表

同源策略是什么，跨域有哪些解決方法，jsonp原理是什么（重點(diǎn)）

如何實(shí)現(xiàn)上報(bào)js報(bào)錯(cuò)，如何監(jiān)聽(tīng)js報(bào)錯(cuò)

Hybrid App實(shí)現(xiàn)Native與H5交互的方法有哪些，需要注意什么事情，你在項(xiàng)目中是怎么做的

Hybrid App如何調(diào)試，如何定位問(wèn)題

Service worker是什么，有什么特點(diǎn)，HTTP緩存與Service worker緩存有什么區(qū)別

圖片上傳前怎么實(shí)現(xiàn)圖片預(yù)覽，上傳中怎么獲取進(jìn)度

后臺(tái)系統(tǒng)怎么設(shè)計(jì)權(quán)限控制

遇到過(guò)哪些兼容性問(wèn)題（有時(shí)候會(huì)針對(duì)pc、移動(dòng)端問(wèn)）

常規(guī)題

你做的最滿意/最復(fù)雜的一個(gè)項(xiàng)目是哪個(gè)，你遇到最難/最棘手的問(wèn)題有哪些，是如何解決的

最近有在研究什么東西

平時(shí)的學(xué)習(xí)計(jì)劃是怎樣的

技術(shù)上想從哪些方向發(fā)展/學(xué)習(xí)

你的職業(yè)規(guī)劃是什么

為什么從上家公司離職

總結(jié)

上面遇到的問(wèn)題有些是筆試，有些是交談問(wèn)的，也有些都出現(xiàn)過(guò)。筆試的時(shí)候建議先易后難，盡量不要留白，可以描述一下思路，或者寫幾個(gè)關(guān)鍵點(diǎn)，也比留白好很多，因?yàn)槊嬖嚬傥幢貢?huì)針對(duì)你沒(méi)答出來(lái)的題目再次進(jìn)行提問(wèn)。另外，一些單詞要記得如何讀寫，不然很多時(shí)候你知道這個(gè)東西，但是你卻表達(dá)不出來(lái)，也是要扣分的。總之要深度理解、舉一反三、邏輯清晰、表達(dá)流暢。

以上，僅供參考。