【建議收藏】一份超簡潔的前端總結

1、前言

「成功是結果，而不是目的」 ----你們好，我是李開心呀😉~

今天分享的是我在現階段前端學習路上的一張總結清單。

能夠說這篇文章是在看了這麼多掘金優秀文章，以及《JS高程三》以後的一次自我反省，同時分享給你們檢閱。【若是文章中有錯誤的知識總結，請各位大佬們指正，小妹會虛心改正🙏】

開始咯🏃‍♀️

2、CSS篇

1. 文檔聲明 !DOCTYPE

👉點擊查看知識點

2. HTML標籤語義化

👉點擊查看知識點

3. CSS的引入方式

👉點擊查看知識點

4. HTML標籤分類

👉點擊查看知識點

5. CSS選擇器

👉點擊查看知識點

6. CSS盒子模型

👉點擊查看知識點

7. 浮動問題

👉點擊查看知識點

8.出現省略號問題

👉點擊查看知識點

9.定位問題

👉點擊查看知識點

10.彈性盒模型

👉關於這個問題我認爲阮一峯老師的這篇文章是最合適不過了

11.元素上下垂直居中

👉點擊查看知識點

12.CSS中表示長度的單位

👉點擊查看知識點

13 HTML5中新增的屬性有哪些 / html5 你用過哪些？

👉點擊查看知識點

14 使用css,讓一個div消失在視野中；發揮想象力?

👉點擊查看知識點

15.BFC問題

👉點擊查看知識點

16.背景圖片與插入圖片的區別使用

👉點擊查看知識點

17. 兩欄佈局，左側固定，右側自適應

👉點擊查看知識點

18. 清除浮動overflow:hidden的原理，爲何能夠清除

👉點擊查看知識點

19. postcss

👉點擊查看知識點

20. less和css的區別

👉點擊查看知識點

21. 以下代碼

<style>
 .classA { color:blue; }  .classB { color:red;} </style> <p class="classB classA">hello</p> 元素p內的文字最終什麼顏色 複製代碼

👉點擊查看知識點

22. 畫一個三角形、扇形，將一個圓分爲四部分，對角部分是相同顏色，相鄰部分爲不一樣顏色

👉點擊查看知識點

3、手寫代碼篇

1. 數組去重

👉點擊查看知識點

2. 內置new的實現

👉點擊查看知識點

3. 內置call的實現

👉點擊查看知識點

4. 內置apply

👉點擊查看知識點

5. 內置bind

👉點擊查看知識點

6. 防抖

👉點擊查看知識點

7. 節流

👉點擊查看知識點

8. 深克隆

👉點擊查看知識點

9. 深比較

👉點擊查看知識點

10. URL處理

👉點擊查看知識點

11. 原型繼承

👉點擊查看知識點

12. call繼承

👉點擊查看知識點

13. 組合式繼承

👉點擊查看知識點

14. 數組扁平化

👉點擊查看知識點

15. 冒泡排序

👉點擊查看知識點

16. 快速排序

👉點擊查看知識點

17. 插入排序

👉點擊查看知識點

18. 倒計時實現

👉點擊查看知識點

19. 隨機驗證碼

👉點擊查看知識點

20. 選項卡

👉點擊查看知識點

4、正則的使用

1. 驗證手機號

👉點擊查看知識點

2. 驗證是不是有效數字

👉點擊查看知識點

3. 驗證密碼

👉點擊查看知識點

4. 驗證真實姓名

👉點擊查看知識點

5. 驗證郵箱

👉點擊查看知識點

6. 驗證身份證號

👉點擊查看知識點

7. 時間格式轉化

👉點擊查看知識點

8. 字符串中出現次數最多的字符以及次數

👉點擊查看知識點

9. 千分符

👉點擊查看知識點

5、JS篇

1. 經常使用瀏覽器以及它的內核

👉點擊查看知識點

2. JS中數據類型

👉點擊查看知識點

3.JavaScript對象的底層數據結構是什麼

👉點擊查看知識點

4. 前端學習五大階段

👉點擊查看知識點

5. 開發者工具的使用

👉點擊查看知識點

6. JavaScript的組成

👉點擊查看知識點

7. JavaScript的變量

👉點擊查看知識點

8. var、let、const三者的區別

👉點擊查看知識點

9. JavaScript的輸出方式

👉點擊查看知識點

10. number數據類型

👉點擊查看知識點

11.String數據類型

👉點擊查看知識點

12. 字符串中的經常使用方法

👉點擊查看知識點

13. Boolean 數據類型

👉點擊查看知識點

14. 看代碼說輸出，會涉及到Event Queue、Event Loop，面向對象底層機制，閉包等

👉點擊查看知識點

15. 淺拷貝和深拷貝有什麼區別，實現深拷貝

👉點擊查看知識點

16. 實現數組去重，new Set的數組去重和本身實現的哪一個性能會更好

👉點擊查看知識點

17. 說出數組的方法，map和forEach有何區別

👉點擊查看知識點

18. 說一下跨域，jsonp的原理是什麼？node中間件解決跨域問題的原理是什麼？

👉點擊查看知識點

19. Object.create實現了什麼？傳null獲得的結果和普通對象有什麼區別？

👉點擊查看知識點

20. 對prototype和__proto__的理解

👉點擊查看知識點

21. call、apply和bind有何區別，手寫實現call

👉點擊查看知識點

22. 替代es6中拓展運算符傳參的方式

👉點擊查看知識點

23. 如何實現繼承？class裏面super是幹嗎的

👉點擊查看知識點

24. import和require的區別

👉點擊查看知識點

25. 對promise的考察，then鏈的應用

👉點擊查看知識點

26. 實現一個發佈訂閱，有訂閱（on），發佈（emit），一次訂閱功能（once）

👉點擊查看知識點

27. 實現防抖節流，它們兩個之間的區別是什麼？

👉點擊查看知識點

28. 實現請求併發限制，具體爲：封裝一個函數，傳遞請求併發的個數爲參數，實現對併發請求的限制

👉點擊查看知識點

29. 說說閉包以及垃圾回收機制

👉點擊查看知識點

30. 利用async和await如何處理異常事件

👉點擊查看知識點

31. 箭頭函數和普通函數有什麼區別？若是想改變箭頭函數中綁定this怎麼辦？

👉點擊查看知識點

32. 原生js判斷鼠標在一個有對角線矩形的位置

👉點擊查看知識點

6、網絡篇

1. HTTP與HTTPS的區別

👉點擊查看知識點

2. HTTP的請求方式

👉點擊查看知識點

3. 列舉你所瞭解的HTTP網絡狀態碼及其含義？

👉點擊查看知識點

4. 闡述從瀏覽器地址欄輸入網址到看到整個頁面，中間都經歷了什麼？

👉點擊查看知識點

5. 闡述你以前項目中處理過的「性能優化」方案？

👉點擊查看知識點

6. 三次握手、四次揮手

👉點擊查看知識點

7、框架

1. MVVM的理解

👉點擊查看知識點

2. vue中的經常使用指令/或者說開發中經常使用指令

👉點擊查看知識點

3. 對vue生命週期的理解

👉點擊查看知識點

4. Vue的雙向數據綁定原理

👉點擊查看知識點

5. Proxy 相比 defineProperty 的優點

👉點擊查看知識點

6. Vue-router 有哪幾種導航守衛

👉點擊查看知識點

7. Vue 的路由實現: hash 模式和 history 模式

👉點擊查看知識點

8. 組件之間的傳值通訊方式

👉點擊查看知識點

9. Vue 與 Angular 以及 React 的區別

👉點擊查看知識點

10. Vuex 是什麼? 怎麼使用? 那種功能場景使用它?

👉點擊查看知識點

11. 說說vue react angularjs jquery的區別

👉點擊查看知識點

12. react中key的做用，有key沒key有什麼區別，比較同一層級節點什麼意思？

👉點擊查看知識點

13. 你對虛擬dom和diff算法的理解，實現render函數

👉點擊查看知識點

14. 父子組件之間傳值的方式，組件間傳值的方式

👉點擊查看知識點

15. 如何解析jsx

👉點擊查看知識點

16. 生命週期都有哪幾種，分別是在什麼階段作哪些事情？爲何要廢棄一些生命週期？

👉點擊查看知識點

17. 關於react的優化方法

👉點擊查看知識點

18. 綁定this的幾種方式

👉點擊查看知識點

19. 對fiber的理解

👉點擊查看知識點

20. setState是同步仍是異步的

👉點擊查看知識點

21. redux以及react-redux

👉點擊查看知識點

22. 對高階組件的理解

👉點擊查看知識點

8、webpack

1. 用過的哪些webpack的配置

👉點擊查看知識點

2. 在你的項目裏面用過哪些優化

👉點擊查看知識點

3. plugin和loader的區別

👉點擊查看知識點

4. 用過哪些loader、plugin

👉點擊查看知識點

9、安全

1. XSS攻擊的原理、分類、具體案例，前端如何防護

👉點擊查看知識點

2. CSRF攻擊的原理、具體案例，前端如何防護

👉點擊查看知識點

3. HTTP劫持、頁面劫持的原理、防護措施

👉點擊查看知識點

10、參考

【面經】不到一年前端經驗，面試官都會問什麼

一名【合格】前端工程師的自檢清單

11、總結

此次的總結就先到這，若是感受寫的不錯，能夠拿起敲代碼的小手點個贊，以後會繼續分享本身的學習內容👌

下方是個人我的微信，有任何的前端問題能夠一塊兒討論。

微信

本文使用 mdnice 排版