前端面試技能點總結

最近在面試，做爲一個前端菜鳥面了幾家公司，面試的這段時間也學習了很多知識，算是給本身查缺補漏。下面就面試當中的一些技術點作一個回顧和整理，本身總結提升的同時供你們交流和參考。

1. vue中MVVM的實現原理

   答：因爲我讀過vue的源碼，因此能夠比較清楚的說明這其中的原理。主要是數據劫持、模板解析、依賴收集這幾個過程。這道題也是被問到最多的一道題。能夠參考：剖析Vue實現原理 - 如何實現雙向綁定mvvm

2. Object.defineProperty方法有什麼做用？有哪些參數？能夠經過描述對象來設置哪些特性？

   答：這道題是上一道題的拓展。Object.defineProperty方法能夠給一個對象設置相關的屬性，這個方法一共有三個參數，第一個參數是目標對象，第二個參數是屬性名，第三個參數能夠是一個描述對象。描述對象一個有以下特性：value -- 設置屬性值、configurable -- 表示是否可刪除屬性，可否修改屬性的特性、writable -- 是不是隻讀屬性、enumerable -- 是不是可枚舉屬性、get -- 讀取屬性時調用的函數、set -- 設置屬性時調用的函數。

3. for in能夠遍歷原型鏈上的屬性嗎？能夠遍歷不可枚舉屬性嗎？Object.keys能夠遍歷到不可枚舉屬性嗎？怎麼遍歷到對象的不可枚舉屬性？

   答：這道題也是上一道題中說起的枚舉特性的拓展。for in 能夠遍歷到原型鏈上的屬性，可是遍歷不到不可枚舉屬性。Object.keys不能遍歷到原型鏈上的屬性也不能遍歷到不可枚舉屬性。能夠經過Object.getOwnPropertyNames()方法訪問到不可枚舉屬性（最後一小問沒有回答出來）。

4. react中的事件跟js原生的事件有什麼區別？

   答：react中的事件是合成事件，經過事件冒泡的原理綁定在根元素上。普通的事件時綁定在目標元素上。

5. 事件捕獲和事件冒泡機制。

   答：在一個有層次的多個元素之間，事件會先通過捕獲階段，捕獲階段是從最頂層元素一直到目標元素。當捕獲階段結束以後事件會從目標元素向底層元素進行傳遞也就是冒泡階段。具體細節能夠參考《javascript 高級程序設計》的第十三章事件流。

6. 說一下對Promise的理解。Promise有哪些經常使用的靜態方法？Promise.all()方法的做用是什麼？能夠傳入哪些類型的參數？

   答：Promise是一個構造函數，實例化的過程當中能夠傳入一個函數，這個函數有兩個參數。在函數內部能夠經過resolve、reject來修改Promise的狀態，狀態發生變化後會在當前事件隊列的末尾去執行then或者catch裏面的方法。經常使用的靜態方法有Promise.all、Promise.race、Promise.resolve、Promise.reject等。Promise.all方法能夠傳入一個數組，數組中的每一項都是一個Promise實例，只有數組中全部的Promise的狀態都是成功時纔會去改變Promise.all方法對應的Promise狀態。Promise.all方法除了能夠傳入數組還能夠傳入全部具備iterator的對象。具體能夠參考阮老師的es6入門Promise。

7. 正則表達式有哪些經常使用的符號？略

8. 列舉經常使用的數組方法，哪些方法會改變原數組？略

9. for of能夠遍歷哪些數據類型？

   答：能夠遍歷具備iterator接口的對象。能夠參考阮老師的es6入門Iterator 和 for...of 循環

10. CSS中overflow有哪些屬性值？分別是什麼做用？默認值是什麼？略

11. webpack中有哪些經常使用的loader？css-loader與style-loader的做用分別是什麼？

    答：經常使用的有css-loader、babel-loader、vue-loader、style-loader、url-loader等。css-loader是用來解析css文件的，由於webpack會將全部的東西都當成是模塊，可是沒有辦法去解析css文件以及分析css文件中的依賴項因此須要css-loader去進行分析。style-loader會將經過css-loader編譯好的模塊提取出來經過style標籤的形式插入到html文件中。

12. webpack中有哪些經常使用的plugin？怎麼作代碼分割？

    答：因爲我用的webpack3.x的版本，因此回答的也是該版本中一些經常使用的plugin。經常使用的有htmlWebpackPlugin、extractTextPlugin、commonChunkPlugin等。

13. 簡要描述js的事件循環。

    答：能夠參考事件循環

14. 簡要描述瀏覽器的渲染原理。

    答：我就簡單說了說瀏覽器的渲染過程和一些概念：DOM樹、CSSOM樹、render、paint。能夠參考你真的瞭解迴流和重繪嗎?

15. 瀏覽器發起請求的整個過程。

    答：這是一道老生常談的題了，從DNS解析到三次握手到發送請求報文到服務端響應，具體答案能夠自行百度。

16. 經常使用的http請求頭和響應頭。與緩存相關的有哪些？http1.0與http1.1中關於緩存有些什麼區別？

    答：能夠參考完全弄懂HTTP緩存機制及原理

17. 經常使用的http響應狀態碼。分別表示什麼意思？ 答：2xx、3xx、4xx、5xx

18. 談談對websocket的理解。有哪些替代方案？

    答：我對webscoket的理解比較有限，只知道是用來作全雙工通信的，是一個持久鏈接。創建鏈接的過程實際上是經過http協議進行的，鏈接完成以後經過upgrade字段進行了協議升級，修改成websocket協議，該協議的請求頭數據量比較少。當時回答的替代方案是ajax輪詢和服務端推送，具體的推送方案不清楚。後來查了一些資料作了一點了解。能夠參考《圖解HTTP》這本書和《JavaScript高級程序設計》的第二十一章，裏面提到了comet、SSE兩種方案。

19. TCP與UDP的區別。

    答：理解的很少，只知道TCP是可靠傳輸UDP是不可靠傳輸。

20. 經常使用的web性能優化有哪些手段？

    答：這道題我主要從http請求和頁面渲染兩個方面作得解答，http請求上主要是將代碼分割，進行代碼壓縮，gZip編碼，路由懶加載等一些手段來完成優化。頁面渲染上主要涉及到DOM操做，減小重排、讀寫分離、動畫上幀率跟瀏覽器的刷新頻率保持一致。能夠參考一下阮老師的博客網頁性能管理詳解

21. 說一下做用域鏈。原型鏈。

    答：說的主要是《JavaScript高級程序設計》這本書上的內容，說到原型鏈我通常會畫一張原型鏈關係圖。能夠參考我寫的一篇博客js總結系列（三）原型鏈

22. 爲何0.1 + 0.2 === 0.3是false？

    答：這道題我主要是說了一下小數在內存中的存儲方案，取的是一個近似值致使的精度丟失。

23. 如何實現js的繼承？你說的這些繼承方式各自有什麼缺點？如何實現完美繼承？

    答：構造函數繼承、原型鏈繼承、組合繼承、完美繼承。這些都是高程中的內容，能夠照搬。

24. 經常使用的設計模式有哪些？分別有哪些應用場景？

    答：對設計模式總結的比較少，回答的時候說到了單例模式：用來作全屏遮罩或一些模態框；觀察者模式：舉了vue中實現數據綁定的例子；裝飾者模式：用來擴展對象；工廠模式：舉了jQuery中生成jQuery對象的例子。你們能夠專門作個總結。

25. 如何實現一個能夠設置過時時間的localstorage存儲？

    答：這題寫了兩三版，初版考慮到的問題不多。在面試官的提示之下才有較高的完成度。主要是提供兩個方法set和get，set的時候不只要存儲內容還須要存儲過時時間，而後在get方法中判斷是否已通過期。固然還有一些優化手段。

26. 爲何會有跨域問題？經常使用的解決方案有哪些？

    答：直接上阮老師博客瀏覽器同源政策及其規避方法、跨域資源共享 CORS 詳解

27. 常見的一些web安全問題

    答：XSS、CSRF

28. let和var有哪些區別？略

29. new關鍵字有什麼做用？如何實現一個new關鍵字的方法？略

30. 外層div中有兩個子元素，如何經過flex佈局實現兩個子元素垂直居中，左右分別頂到兩邊的佈局？略

31. 如何經過定位的方式實現一個不肯定寬高元素的垂直水平居中？略

32. 使用過node嗎？主要作什麼？

    答：服務端node使用較少，主要是用來作一些打包時候的自定義功能腳本。平時作一些代理服務器啥的。後端的話主要是demo水平。

33. express和koa有什麼區別？

    答：瞭解的很少，主要是從回調的處理和中間件的使用不一樣兩個方面

34. 知道三次握手和四次揮手嗎？ 答：略

35. 談談你對閉包的理解。

    答：你們仍是自行百度比較好。

36. 虛擬DOM是什麼？瞭解diff算法嗎？

    答：虛擬DOM使用js對象來模擬DOM樹的結構。js對象中有標籤名、屬性、子元素。具體細節你們自行百度吧，比我說的專業。

37. vue和react中循環生成元素時的key有什麼做用？

    答：也是從diff算法的角度來講的，循環的時候key是虛擬DOM的惟一標誌符，能夠節約性能。

38. DNS解析過程

    答：瀏覽器緩存、操做系統配置文件、DNS服務器

39. window.onload和document.ready有什麼區別？

    答：window.onload是頁面多有的元素的已經渲染完成包括image等。document.ready是DOM元素渲染完成，一些圖片請求並不必定已經完成。

40. 移動端1px問題產生的緣由是什麼？有什麼解決方案？

    答：直接上文章移動端 1px 像素問題及解決辦法

41. rem的原理？還有哪些移動端佈局方案？

    答：說了一下根據屏幕寬度進行動態計算而後給html元素這是fontSize。其餘的方案主要說了一下響應式、vw、vh、百分比佈局等。

42. 移動端爲何click事件會延遲300ms？如何禁止屏幕的縮放？

    答：主要是iPhone爲了判斷用戶是否發生了雙擊。禁止縮放經過設置視口的縮放比例。

43. PC、移動端、微信小程序開發你會分別選用什麼框架？說明你的理由。

    答：我給出的答案是PC業務場景複雜的狀況下選用react，由於函數編程更加靈活；移動端選用vue，通常來講移動端場景不會很複雜，vue比較輕量化；小程序選用vue，有較爲完善的框架。

44. 瞭解SSR嗎？有什麼好處？

    答：沒用過，大概結合了node的服務端渲染說了一下本身的理解，好處是首屏性能和SEO

45. 怎麼判斷一個數據的類型？

    答：Object.property.toString.call(obj)

46. 說一下vue的生命週期鉤子？vue-router有哪些鉤子？優先級是怎麼樣的？略

47. 對於秒殺類的業務怎麼確保倒計時的準確性？

    答：隨便想了想，我說能夠在活動開始前的某個時間點發送一個請求獲取服務端時間。如今想一想好像也不太理想，感受須要在初始化頁面的時候服務端就返回一個相對的時間而不是絕對時間。

48. 接口返回了一個很是龐大的數據怎麼渲染到頁面上？

    答：面試官提到了數據層級很深，我提到了數據緩存、分頁渲染、數據扁平化等一些手段。

49. 經常使用的異步處理方案及它們的一些優缺點。

    答：主要說了回調函數、Promise、generator、async/await

50. 原生js給一個元素綁定事件有哪些形式？有什麼區別？

    答：onclick 和 addEventListener。前者只能綁定一次，屢次綁定會發生覆蓋，後者能夠綁定多個事件處理函數，不會發生覆蓋。

因爲個人水平有限，以上問題的完成度並無達到100%，以上記錄了我印象比較深的一些問題，也有些因爲時間間隔較長有所遺漏。後續若是新的內容會作出更新。

更多內容能夠關注公衆號：偉偉學python