“全方位總結一下所遇到的面試題目，與大家共同學習，也是對自己的一次總結”

今天給朋友們分享我花了將近兩個月時間，參考了很多網上的優(yōu)質博文和項目整理的一份比較全面的前端面試題庫，還有面試前刷過的題目（其中概括HTML，CSS，JS，React，Vue，NodeJS，互聯(lián)網基礎知識）共有【269頁】。很多朋友靠著這些內容進行復習，拿到了BATJ等大廠的offer， 也已經幫助了很多的前端學習者，希望也能幫助到你。

【PDF文末獲取】

前端開發(fā)所需掌握知識點概要：
HTML&CSS：瀏覽器內核、渲染原理、依賴管理、兼容性、CSS語法、層次關系，常用屬性、布局、選擇器、權重、CSS盒模型、Hack、CSS預處理器、CSS3動畫 JavaScript： 數(shù)據(jù)類型、運算、對象、Function、繼承、閉包、作用域、事件、Prototype、RegExp、JSON、Ajax、DOM、BOM、內存泄漏、跨域、異步請求、模板引擎、模塊化、Flux、同構、算法、ES6、ES7、ES8特性、Nodejs、HTTP 框架和類庫： ajax、jQuery、Bootstrap、axios、Vue、Vuex、React、element-ui、layui、webpack

面試題文檔十分全面，文末還有答案解析?。ㄎ恼卤容^長，耐心看完，讓你面試提升一大截！）
1、HTML面試題

• html 語義化

• canvas 相關

• svg和canvas的區(qū)別？

• html5有哪些新特性？

• 如何處理HTML5新標簽的瀏覽器兼容問題？

• 說說 title 和 alt 屬性

• HTML全局屬性(global attribute)有哪些

2、CSS面試題

• 讓一個元素水平垂直居中，到底有多少種方案？

• 浮動布局的優(yōu)點？有什么缺點？清除浮動有哪些方式？

• 使用display:inline-block會產生什么問題？解決方法？

• 布局題：div垂直居中，左右10px，高度始終為寬度一半

• 盒模型

• CSS如何進行品字布局？

• CSS如何進行圣杯布局

• CSS如何實現(xiàn)雙飛翼布局？

• 什么是BFC？

• 什么是 Css Hack？ie6,7,8 的 hack 分別是什么？

• 描述一個”reset”的 CSS 文件并如何使用它。知道 normalize.css 嗎？你 了解他們的不同之處？

• CSS 中 link 和@import 的區(qū)別是？

• 為什么要初始化樣式？

…

3、JavaScript面試題

• 0.1+0.2為什么不等于0.3？

• 什么是BigInt?

• 為什么需要BigInt?

• 什么是閉包？

• 閉包產生的原因?

• 閉包有哪些表現(xiàn)形式?

• 原型對象和構造函數(shù)有何關系？

• 能不能描述一下原型鏈？

• JS如何實現(xiàn)繼承？

• null是對象嗎？為什么？

• call 和 apply 的區(qū)別

• 描述一下 V8 執(zhí)行一段JS代碼的過程？

• 關于JS中一些重要的api實現(xiàn)

• == 和 ===有什么區(qū)別？

• 如何讓if(a == 1 && a == 2)條件成立？

…

4、前端框架面試題
Vue

• Vue 雙向綁定原理

• 描述下 vue 從初始化頁面--修改數(shù)據(jù)--刷新頁面 UI 的過程？

• 你是如何理解 Vue 的響應式系統(tǒng)的?

• 組件中寫 name 選項有什么作用？

• vue 中怎么重置 data?

• vue 首屏加載優(yōu)化

• vuex是什么？怎么使用？哪種功能場景使用它？

• vuex有哪幾種屬性？

• 虛擬 DOM 實現(xiàn)原理

• Vue 中 key 值的作用？

• 什么是MVVM？

• mvvm和mvc區(qū)別？它和其它框架（jquery）的區(qū)別是什么？哪些場景適合？

React

• React有什么特點？

• 列出React的一些主要優(yōu)點。

• React有哪些限制？

• 什么是JSX？

• 你了解 Virtual DOM 嗎？解釋一下它的工作原理。

• 與 ES5 相比，React 的 ES6 語法有何不同？

• 解釋 React 中 render() 的目的。

• React中的狀態(tài)是什么？它是如何使用的？

• 如何更新組件的狀態(tài)？

• 如何模塊化 React 中的代碼？

• React中的事件是什么？

• 如何在React中創(chuàng)建一個事件？

• 你對 React 的 refs 有什么了解？

• 列出一些應該使用 Refs 的情況。

• 如何在 React 中創(chuàng)建表單

• 什么是高階組件（HOC）？

• MVC框架的主要問題是什么？

• Redux與Flux有何不同？

• 數(shù)據(jù)如何通過 Redux 流動？

• 什么是React 路由？

• 為什么React Router v4中使用 switch 關鍵字 ？

…

5、瀏覽器面試題

• 能不能說一說瀏覽器緩存?

• 能不能說一說瀏覽器的本地存儲？各自優(yōu)劣如何？

• 能不能實現(xiàn)事件的防抖和節(jié)流？

• 瀏覽器緩存

• 談談你對重繪和回流的理解

• 能不能實現(xiàn)圖片懶加載？

• 說一說從輸入URL到頁面呈現(xiàn)發(fā)生了什么？

• 能不能說一說XSS攻擊？

• BOM對象模型

…

6、計算機網絡面試題

• HTTP 緩存

• HTTP 常用的狀態(tài)碼及使用場景？

• HTTP 常用的請求方式，區(qū)別和用途？

• 你對計算機網絡的認識怎么樣

• HTTPS 是什么？具體流程

• WebSocket與Ajax的區(qū)別

• TCP 如何保證有效傳輸及擁塞控制原理。

• TCP 協(xié)議怎么保證可靠的，UDP 為什么不可靠？

7、一些開放性題目
1)說說最近最流行的一些東西吧？常去哪些網站？
2)自我介紹：除了基本個人信息以外，面試官更想聽的是你與眾不同的地方和你的優(yōu)勢。
3)項目介紹
4)前端開發(fā)的職業(yè)現(xiàn)狀和前景是什么？
5)平時是如何學習前端開發(fā)的？
6)1-3年工作經驗，你有信心順利跳槽到BATJ等一線互聯(lián)網大公司嗎？
7)你覺得哪個框架比較好,好在哪里
8)你覺得最難得技術難點是什么

8、算法題
鏈表

面試題：反轉單向鏈表
題目需要將一個單向鏈表反轉。思路很簡單，使用三個變量分別表示當前節(jié)點和當前節(jié)點的前后節(jié)點，雖然這題很簡單，但是卻是一道?？碱}
以下是實現(xiàn)該算法的代碼
var reverseList = function(head) { // 判斷下變量邊界問題 if (!head || !head.next) return head // 初始設置為空，因為第一個節(jié)點反轉后就是尾部，尾部節(jié)點指向 null let pre = null let current = head let next // 判斷當前節(jié)點是否為空 // 不為空就先獲取當前節(jié)點的下一節(jié)點 // 然后把當前節(jié)點的 next 設為上一個節(jié)點 // 然后把 current 設為下一個節(jié)點，pre 設為當前節(jié)點 while(current) { next = current.next current.next = pre pre = current current = next } return pre };二叉樹遍歷

• 原理: 遞歸

function traversal(node,tempOrderTraversal) { if (node != null) { // tempOrderTraversal.push(node.value) 前序遍歷 if (node.left != null) { preOrderTraversal(node.left,tempOrderTraversal) } // tempOrderTraversal.push(node.value) 中序遍歷 if (node.right != null) { preOrderTraversal(node.right,tempOrderTraversal) } // tempOrderTraversal.push(node.value) 后序遍歷 } }不能使用遞歸時，則使用棧就是JS的數(shù)組push、pop
// 非遞歸遍歷 var kthSmallest = function(root, k) { const tempArr = []; let result; tempArr.push(root); while (tempArr.length > 0) { result = tempArr.pop(); if (result.value == k) break; if (result.left != null) tempArr.push(result.left); if (result.right != null) tempArr.push(result.right); } return result; };
堆排序
堆排序利用了二叉堆的特性來做，二叉堆通常用數(shù)組表示，并且二叉堆是一顆完全二叉樹（所有葉節(jié)點（最底層的節(jié)點）都是從左往右順序排序，并且其他層的節(jié)點都是滿的）。二叉堆又分為大根堆與小根堆。

• 大根堆是某個節(jié)點的所有子節(jié)點的值都比他小

• 小根堆是某個節(jié)點的所有子節(jié)點的值都比他大

堆排序的原理就是組成一個大根堆或者小根堆。以小根堆為例，某個節(jié)點的左邊子節(jié)點索引是 i * 2 +1 ，右邊是 i * 2 + 2 ，父節(jié)點是 (i - 1) /2 。
1. 首先遍歷數(shù)組，判斷該節(jié)點的父節(jié)點是否比他小，如果小就交換位置并繼續(xù)判斷，直到他的父節(jié)點比他大
2. 重新以上操作 1，直到數(shù)組首位是最大值
3. 然后將首位和末尾交換位置并將數(shù)組長度減一，表示數(shù)組末尾已是最大值，不需要再比較大小
4. 對比左右節(jié)點哪個大，然后記住大的節(jié)點的索引并且和父節(jié)點對比大小，如果子節(jié)點大就交換位置
5. 重復以上操作 3 - 4 直到整個數(shù)組都是大根堆。

以下是實現(xiàn)該算法的代碼
function heap(array) { checkArray(array); // 將最大值交換到首位 for (let i = 0; i < array.length; i++) { heapInsert(array, i); } let size = array.length; // 交換首位和末尾 swap(array, 0, --size); while (size > 0) { heapify(array, 0, size); swap(array, 0, --size); } return array; } function heapInsert(array, index) { // 如果當前節(jié)點比父節(jié)點大，就交換 while (array[index] > array[parseInt((index - 1) / 2)]) { swap(array, index, parseInt((index - 1) / 2)); // 將索引變成父節(jié)點 index = parseInt((index - 1) / 2); } } function heapify(array, index, size) { let left = index * 2 + 1; while (left < size) { // 判斷左右節(jié)點大小 let largest = left + 1 < size && array[left] < array[left + 1] ? left + 1 : left; // 判斷子節(jié)點和父節(jié)點大小 largest = array[index] < array[largest] ? largest : index; if (largest === index) break; swap(array, index, largest); index = largest; left = index * 2 + 1; } }
以上代碼實現(xiàn)了小根堆，如果需要實現(xiàn)大根堆，只需要把節(jié)點對比反一下就好。

插入排序
將一個新的數(shù)，和前面的比較，只要當前數(shù)小于前一個則和前一個交換位置，否則終止；
時間復雜度：O(N^2)；
空間復雜度：O(1)
以下是實現(xiàn)該算法的代碼
function insertSort(arr) { if(arr == null || arr.length <= 0){ return []; } var len = arr.length; for(var i = 1; i < len; i++) { for(var j = i - 1; j >= 0 && arr[j] > arr[j + 1]; j--) { swap(arr, j, j + 1); } } return arr; } function swap(arr, i, j){ var temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; }去掉一組整型數(shù)組重復的值
這道問題出現(xiàn)在諸多的前端面試題中，主要考察個人對Object的使用，利用key來進行篩選。
以下是實現(xiàn)該算法的代碼
let unique = function(arr) { let hashTable = {}; let data = []; for(let i=0,l=arr.length;i
快速排序
以下是實現(xiàn)該算法的代碼
def quick_sort(arr): if len(arr) < 2: return arr mid = arr[len(arr)//2] left, right = [], [] arr.remove(mid) for item in arr: if item > mid: right.append(item) else: left.append(item) return quick_sort(left)+[mid]+quick_sort(right) b = [11, 99, 33, 69, 77, 88, 55, 11, 33, 36, 39, 66, 44, 22] print(quick_sort(b))無重復字符的最長子串
給定一個字符串，請你找出其中不含有重復字符的 最長子串 的長度。
以下是實現(xiàn)該算法的代碼
var lengthOfLongestSubstring = function(s) { let window = {}; let left = 0, right = 0; let maxLen = 0, maxStr = ''; while (right < s.length) { let c = s[right]; right++; if (window[c]) window[c]++; else window[c] = 1 while (window[c] > 1) { let d = s[left]; left++; window[d]--; } if (maxLen < right - left) { maxLen = right - left; } } return maxLen; };時間復雜度：O(n2)， 其中 arr.indexOf() 時間復雜度為 O(n) ，arr.splice(0, index+1) 的時間復雜度也為 O(n)
空間復雜度：O(n)

隊列
隊列和棧類似，不同的是隊列是先進先出 (FIFO) 原則的有序集合，它的結構類似如下：

常見隊列的操作有：enqueue(e) 進隊、 dequeue() 出隊、 isEmpty() 是否是空隊、 front() 獲取隊頭元素、clear() 清空隊，以及 size() 獲取隊列長度。

以下是實現(xiàn)該算法的代碼
function Queue() { let items = [] this.enqueue = function(e) { items.push(e) } this.dequeue = function() { return items.shift() } this.isEmpty = function() { return items.length === 0 } this.front = function() { return items[0] } this.clear = function() { items = [] } this.size = function() { return items.length } }查找：從對頭開始查找，從時間復雜度為 O(n)
插入或刪除：進棧與出棧的時間復雜度為 O(1)

?? 由于篇幅原因，這里只能分享部分面試題截圖，如有需要以上完整面試題寶典及答案PDF的，請在評論區(qū)留言“面試”即可私信獲取?。?br>

面試總結
其實整個備考的過程中，心態(tài)也是很重要的一部分，就好像我們當年高考的時候，心態(tài)一定要好?？赡芡瑢W們經過很長的時間備考，然后投遞了很多簡歷卻沒有面試機會。
首先要看一下是不是簡歷寫得不好，一般沒有機會大部分都是因為這個原因，可以找一下師兄姐聊一下如何修改簡歷。然后重新投遞試試。或者有了面試機會卻沒有下輪面試了，那就是可能因為你的技術不夠扎實，好好準備自己的基礎，我推薦你

寫技術博客
不用自己去搭建一個博客（要是可以就更好了），選擇一個平臺，CSDN或者掘金都是不錯的平臺，然后就可以開始你的表演了?？梢詫懸恍┳罱膶W習心得，面試技巧以及黑科技工具的使用等等。寫博客的好處有很多，不僅可以鍛煉的表達邏輯，還可以鞏固你的知識體系。兩全其美，何樂而不為？
另外就是可以多逛一下技術社區(qū)，了解前端的動態(tài)，多關注最近出了什么新技術、新框架、新八卦等等。試著去幫別人解答一些問題，別人也很愿意去聽，但是不要抬杠。樂于分享的心態(tài)比技術本身更重要。

寫項目
找一個idea，把之前所學的知識點用一下，或者用新的知識來重構一下舊的項目，都是一種產出的方法。如果你擔心知識不夠牢固可以上一下github找一些優(yōu)質開源項目，看別人是怎么寫的。項目中要把用到技術的那一塊注釋出來，不然過一個月都不知道是你寫的。

交流心得
要是可以的話，可以找同學一起交流最近的學習成果。技術學習的路上是枯燥的，找到相同的學習伙伴很重要，能夠給你一種學下去的動力，兩個相互切磋相互進步也是一種產出的方法。
面試。如果你覺得技術還可以，基礎還不錯的話就嘗試去面試一下，面試官一般比你的層次高很多，知識儲備也比你多，所以面試是一個非常重要的過程，還可以查漏補缺，完善自己的知識體系。

收個尾
我知道內容有些多，大家可以先點贊收藏，但一定要去看。當你把大廠面試題知識點都看完并且理解了，以后就沒有你過不了的前端面試。資源都幫你整理好了，還不學就有些說不過去了。

???以上PDF已經打包完畢，需要的伙伴可以在評論區(qū)留言“資料”即可無償獲取??！