2022前端面試總結

先說些廢話

這是一篇筆者面試記錄的文章，并非要寫一篇非常全面的面試題匯總文章，希望看完本文對您能有一定的幫助，

首先，面試對個人來說，就是一種對以往作業之中經驗積累的一種檢驗，如果平時在作業中對自己遇到的問題、難點、新知識點，沒有花時間去學習積累，
那么我相信，面試的時候花時間背面試題，也不一定能勝任預期的作業，不過摸魚混工時的作業除外~

其次，面試中除了技術面試，還有針對專案中運用的技術亮點和個人能夠提供的技術解決方案等等能力的展現，這方面的能力沒實際解決過就一定無法提出自己的解決方案，
所以居安思危，平時就嚴格要求自己，對于疑難問題、性能問題，不逃避問題，迎難而上去解決，才能使得自己真正在技術崗位上站穩腳跟，

作業中必備的核心框架工具

Vue和React是前端開發崗必備的兩種技術堆疊，以下是作業中專案開發必須要具備的框架技能，參考大綱查漏補缺

Vue（Vue2/3）

1. Vue主流組件庫（ant-design、element-ui、arco-design）
2. Vue組件封裝（公共組件抽離，npm組件發布以及私有部署，撰寫組件必須考慮的幾個要素props、methods、樣式）
3. Vue父子、兄弟組件通信（Vuex，EventBus）
4. 生命周期函式、Watch函式、以及計算屬性Computed的應用
5. Vue動態路由，權限相關（選單頁面、按鈕操作），單點登錄，使用圖片驗證防止CSFR攻擊
6. Vue3更新的內容，老舊Vue2專案維護和新專案Vue3技術選型的注意點，Vue配合TypeScript

React（React16及以上）

1. 企業級開發框架UMI（簡化專案構建和初始開發流程）
2. React主流組件庫（ant-design、arco-design）
3. React組件封裝（類比Vue）
4. React組件通信（Redux、Redux-thunk、Redux-saga、Redux-logger、dva）
5. 生命周期函式、React Hooks鉤子函式的應用
6. 無狀態組件、專案分層（view + model + service）
7. React路由和權限（類比Vue）

公共部分

1. webpack打包配置、性能優化、webpack.dev.conf.js添加cdn配置
2. 如何首屏加載優化、圖示和圖片資源優化

目前面試中已經遇到的問題

JavaScript和CSS

1. ES6的資料型別有哪些？（基本資料型別和參考資料型別，ES6新增Symbol，用于物件屬性中唯一的key；新增BigInt用于解決資料量過大Int報錯的問題）
2. ES6新增的方法有哪些？（new Set()處理陣列去重，new Map()鏈式處理陣列，可以搭配Filter使用，再說一些和ForEach的區別，ForEach是在原陣列中操作，
   可以再說說is()，判斷值是否相等；assign()，淺拷貝物件；entries()與后者反之和fromEntries()鍵值對陣列轉為物件）
   • Javascript中的assign()方法到底是淺拷貝還是深拷貝？
   • Es6新增的物件方法
3. 如何判斷一個資料是否是物件？（1.isArray 2.Object.prototype.toString().call()，回傳'[object Array]'即為 3.實體的建構式屬性constructor指向建構式，陣列.contructor===Array即可 4.使用instanceof亦可，a instanceof Array）
   • JS判斷是否是陣列的四種做法
4. 什么是BFC盒子模型，他的作用是什么（具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素；
   觸發條件：1.overflow 除了 visible 以外的值 (hidden、auto、scroll)，2.絕對定位元素：position (absolute、fixed)，3.display 為 inline-block、table-cells、flex，）
   • 盒子模型與BFC
5. null和undefined的區別（null和undefined非嚴格相等，自身也全等，但是相互不嚴格相等；null是人為賦予初始空值，undefined是全域物件的屬性；typeof(null)不是null，而是object，
   是因為typeof判斷二進制碼，object前三位是0，null剛好也是，typeof(undefined)正常；）
6. var和let的區別（var是函式作用域，let是塊狀作用域，let宣告的變數不能重復；const宣告的變數不可修改；var宣告的變數屬于window，可以window.訪問，let和const的不行）
   • var和let的區別
   • const 宣告了陣列，還能 push 元素嗎，為什么？
7. push()、pop()、shift()、unshift()、splice()、sort()、reverse()操作的區別，shift洗掉第一個元素并回傳，unshift反之，
   splice用于添加或洗掉陣列中的元素，array.splice(index,howmany,item1,.....,itemX)；index必需，規定從何處添加/洗掉元素；
   howmany可選，規定應該洗掉多少元素，必須是數字，但可以是 "0"，如果未規定此引數，則洗掉從index開始到原陣列結尾的所有元素；
   item1, ..., itemX可選，要添加到陣列的新元素
   • JavaScript splice() 方法
8. axios有什么競品是否有了解過（ajax和fetch，fetch是js原生api，需要自己做一些封裝；ajxa針對mvc不是現在mvvm，并且基于原生xhr，還需要引入jquery；axios支持promise，支持防止csrf）
   • ajax、axios、fetch之間的詳細區別以及優缺點
   • Ajax、Fetch、Axios
9. js的深拷貝和淺拷貝（1. 常用深拷貝使用JSON.parse+JSON.stringify、2. object.assign一級屬性深拷貝二級屬性淺拷貝、3. 用foreach方法遞回迭代實作深拷貝、4. 使用第三方函式庫，比如loadsh的clonedeep或者underscore的deepclone，clone是淺拷貝）
   • js的深拷貝與淺拷貝
10. H5移動端如何做性能優化（1. 資源壓縮，圖片壓縮，引入資源包壓縮，有條件的使用cdn加速，icon雪碧圖精靈圖，2. 優化dom結構，減少頁面的重繪和重排布，首屏支出的頁面使用行內css，使用節流防抖的手段減少修改dom事件觸發的頻率，
    3. 使用預先加載骨架圖的方式優化用戶體驗，我們之前有用過page-web-skeleton這個chorme組件快速生成骨架圖，4. 盡量使用css內置影片，減少使用requestAnimationFrame，他會觸發大量的dom操作，
       而內置影片會呼叫硬體加速，體驗更優，5. 配合后端同學做介面合并，對于首頁顯示的介面統一為一個總介面，并針對性優化，6. 最后就是優化主要針對不同專案，通過不同的方式去做優化，針對性的修改）
    • H5前端性能優化圖鑒
11. css樣式的優先規則（簡而言之，行內樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標簽選擇器 = 偽元素選擇器，!important最高）
    • CSS的優先級
    • CSS 樣式優先級

Vue

1. Vue的實作原理，Object.defineProperty()；Vue2 和 Vue3 的實作回應式的區別； Vue如何實作陣列的回應式（底層代碼主要是撰寫了一套js相同的方法暴露出來，Vue通過原型攔截的方式重寫了陣列的7個方法）
2. Vue如何封裝一個組件（定義引數，定義需要暴露出的方法，引數需要寫的屬性，最后export出來）
3. Vue父子組件和兄弟組件的通信方式（1. 第一種方式借助父組件，2. 第二種方式借助eventbus，在main中全域注冊事件bus，通過\(on和\)emit來監聽和觸發，3. 使用Vuex）
   • vue學習之----兄弟組件之間通信方式
4. Vue如何實作v-model（使用object.defineProperty設定getset方法，再給系結的input輸入框的keyup事件添加劫持，從而實作mvvm，即資料驅動頁面；接著繼續吹mvvm和之前jquery時代的區別；
   jquery主要是鏈式函式操作，對dom的操作很多，性能上會有一定落后；mvvm是指model，view，viewmodel，最后一個是同步view和model的物件，model是業務邏輯，view是頁面ui）
   • Vue的v-model的原理和實作
   • 什么是MVVM？
5. 當Vue使用history模式的時候，出現404，nginx該如何處理（try_files $uri $uri/ /index.html，表示查找當前請求地址對應的檔案是否存在，不存在則查找請求地址對應的目錄是否存在，還是不存在則重定向到/index.html頁面）
   • Nginx：vue路由使用history模式重繪404

React（個人簡歷未突出react能力，所以這方面問的比較少）

1. redux如何使用？
2. redux中傳遞組件樣式css無法生效怎么辦？

雜亂記錄一些

• 前端性能優化：H5頁面如何解決首屏加載白屏問題、如何防止記憶體泄漏
• 前端安全基礎：XSS攻擊、XSRF攻擊
• js繼承的幾種方式：總結JS繼承的六種方式、js幾種繼承
• js如何創建物件：JS創建物件的四種方式
• 如何實作一個promise：javaScript之js模擬封裝一個promise、模擬實作 Promise（小白版）
• 高德地圖、Cesium、ArcGIS有哪些圖層？
• 原型和原型鏈有什么作用，簡單描述一下？

筆試面試題記錄

1. 一些奇奇怪怪作業中很少用到的冷門CSS知識點考察題目（比如：長50px，寬50px，border-radius: 30px 50px; 是什么效果？）
2. 陣列去重、陣列排序以及組合能力的演算法題（牛客網和Leecode刷題處理）
3. 手寫sql（加分項）

八股文匯總整理

八股文總會被問到，還是需要看看，大部分八股文遇到的問題也都可以在作業中遇到，你遇到過自然印象就深刻

1. 前端200道面試題及答案（更新中）
2. 50個最新TypeScript面試題合集 – TypeScript開發教程
3. React面試題最全
4. react 面試題整理
5. 耗時一個月，React 知識點萬字大總結（超全超基礎）
6. webpack 面試題整理
7. vue面試常問的原理
8. 12道vue高頻原理面試題,你能答出幾道?
9. vue面試題整理(2022-持續更新中...)
10. vue3面試題：2022 最新前端 Vue 3.0 面試題及答案
11. vue3.0 面試題總結
12. 高頻 JS面試題 資料型別和變數、閉包、作用域、原型鏈、繼承
13. CSS高頻面試題

我是 fx67ll.com，如果您發現本文有什么錯誤，歡迎在評論區討論指正，感謝您的閱讀！
如果您喜歡這篇文章，歡迎訪問我的 本文github倉庫地址，為我點一顆Star，Thanks~ ??
轉發請注明參考文章地址，非常感謝！！！

標籤：其他

上一篇：YOLOv5】LabVIEW+OpenVINO讓你的YOLOv5在CPU上飛起來

下一篇：云原生愛好者周刊：野心很大的云原生資料庫 SurrealDB