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

前端開發(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

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

1、HTML面試題

html 語義化

canvas 相關

sv和canvas的區(qū)別？

html5有哪些新特性？

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

說說 title 和 alt 屬性

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

2、CSS面試題

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

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

使用display:inline-block會產(chǎn)生什么問題？解決方法？

布局題：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?

什么是閉包？

閉包產(chǎn)生的原因?

閉包有哪些表現(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、計算機網(wǎng)絡面試題

HTTP 緩存

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

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

你對計算機網(wǎng)絡的認識怎么樣

HTTPS 是什么？具體流程

WebSocket與Ajax的區(qū)別

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

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

7、一些開放性題目

1)說說最近最流行的一些東西吧？常去哪些網(wǎng)站？

2)自我介紹：除了基本個人信息以外，面試官更想聽的是你與眾不同的地方和你的優(yōu)勢。

3)項目介紹

4)前端開發(fā)的職業(yè)現(xiàn)狀和前景是什么？

5)平時是如何學習前端開發(fā)的？

6)1-3年工作經(jīng)驗，你有信心順利跳槽到BATJ等一線互聯(lián)網(wǎng)大公司嗎？

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ū)留言“面試”即可私信獲?。?！

面試總結

其實整個備考的過程中，心態(tài)也是很重要的一部分，就好像我們當年高考的時候，心態(tài)一定要好?？赡芡瑢W們經(jīng)過很長的時間備考，然后投遞了很多簡歷卻沒有面試機會。

首先要看一下是不是簡歷寫得不好，一般沒有機會大部分都是因為這個原因，可以找一下師兄姐聊一下如何修改簡歷。然后重新投遞試試?；蛘哂辛嗣嬖嚈C會卻沒有下輪面試了，那就是可能因為你的技術不夠扎實，好好準備自己的基礎，我推薦你

寫技術博客

不用自己去搭建一個博客（要是可以就更好了），選擇一個平臺，CSDN或者掘金都是不錯的平臺，然后就可以開始你的表演了?？梢詫懸恍┳罱膶W習心得，面試技巧以及黑科技工具的使用等等。寫博客的好處有很多，不僅可以鍛煉的表達邏輯，還可以鞏固你的知識體系。兩全其美，何樂而不為？

另外就是可以多逛一下技術社區(qū)，了解前端的動態(tài)，多關注最近出了什么新技術、新框架、新八卦等等。試著去幫別人解答一些問題，別人也很愿意去聽，但是不要抬杠。樂于分享的心態(tài)比技術本身更重要。

寫項目

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

交流心得

要是可以的話，可以找同學一起交流最近的學習成果。技術學習的路上是枯燥的，找到相同的學習伙伴很重要，能夠給你一種學下去的動力，兩個相互切磋相互進步也是一種產(chǎn)出的方法。

面試。如果你覺得技術還可以，基礎還不錯的話就嘗試去面試一下，面試官一般比你的層次高很多，知識儲備也比你多，所以面試是一個非常重要的過程，還可以查漏補缺，完善自己的知識體系。

收個尾

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

?以上PDF已經(jīng)打包完畢，

獲取方式：

1. 一鍵三連+關注

2. 在后臺主動? “資料”