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

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

【PDF文末獲取】

前端開發(fā)所需掌握知識點(diǎn)概要：

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

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

1、HTML面試題

html 語義化

canvas 相關(guān)

svg和canvas的區(qū)別？

html5有哪些新特性？

如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？

說說 title 和 alt 屬性

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

2、CSS面試題

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

浮動(dòng)布局的優(yōu)點(diǎn)？有什么缺點(diǎn)？清除浮動(dòng)有哪些方式？

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

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

盒模型

CSS如何進(jìn)行品字布局？

CSS如何進(jìn)行圣杯布局

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

什么是BFC？

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

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

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

為什么要初始化樣式？

…

3、JavaScript面試題

0.1+0.2為什么不等于0.3？

什么是BigInt?

為什么需要BigInt?

什么是閉包？

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

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

原型對象和構(gòu)造函數(shù)有何關(guān)系？

能不能描述一下原型鏈？

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

null是對象嗎？為什么？

call 和 apply 的區(qū)別

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

關(guān)于JS中一些重要的api實(shí)現(xiàn)

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

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

…

4、前端框架面試題

Vue

Vue 雙向綁定原理

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

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

組件中寫 name 選項(xiàng)有什么作用？

vue 中怎么重置 data?

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

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

vuex有哪幾種屬性？

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

Vue 中 key 值的作用？

什么是MVVM？

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

React

React有什么特點(diǎn)？

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

React有哪些限制？

什么是JSX？

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

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

解釋 React 中 render() 的目的。

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

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

如何模塊化 React 中的代碼？

React中的事件是什么？

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

你對 React 的 refs 有什么了解？

列出一些應(yīng)該使用 Refs 的情況。

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

什么是高階組件（HOC）？

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

Redux與Flux有何不同？

數(shù)據(jù)如何通過 Redux 流動(dòng)？

什么是React 路由？

為什么React Router v4中使用 switch 關(guān)鍵字 ？

…

5、瀏覽器面試題

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

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

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

瀏覽器緩存

談?wù)勀銓χ乩L和回流的理解

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

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

能不能說一說XSS攻擊？

BOM對象模型

…

6、計(jì)算機(jī)網(wǎng)絡(luò)面試題

HTTP 緩存

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

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

你對計(jì)算機(jī)網(wǎng)絡(luò)的認(rèn)識怎么樣

HTTPS 是什么？具體流程

WebSocket與Ajax的區(qū)別

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

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

7、一些開放性題目

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

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

3)項(xiàng)目介紹

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

5)平時(shí)是如何學(xué)習(xí)前端開發(fā)的？

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

7)你覺得哪個(gè)框架比較好,好在哪里

8)你覺得最難得技術(shù)難點(diǎn)是什么

8、算法題

鏈表

面試題：反轉(zhuǎn)單向鏈表

題目需要將一個(gè)單向鏈表反轉(zhuǎn)。思路很簡單，使用三個(gè)變量分別表示當(dāng)前節(jié)點(diǎn)和當(dāng)前節(jié)點(diǎn)的前后節(jié)點(diǎn)，雖然這題很簡單，但是卻是一道常考題

以下是實(shí)現(xiàn)該算法的代碼

var reverseList = function(head) { // 判斷下變量邊界問題 if (!head || !head.next) return head // 初始設(shè)置為空，因?yàn)榈谝粋€(gè)節(jié)點(diǎn)反轉(zhuǎn)后就是尾部，尾部節(jié)點(diǎn)指向 null let pre = null let current = head let next // 判斷當(dāng)前節(jié)點(diǎn)是否為空 // 不為空就先獲取當(dāng)前節(jié)點(diǎn)的下一節(jié)點(diǎn) // 然后把當(dāng)前節(jié)點(diǎn)的 next 設(shè)為上一個(gè)節(jié)點(diǎn) // 然后把 current 設(shè)為下一個(gè)節(jié)點(diǎn)，pre 設(shè)為當(dāng)前節(jié)點(diǎn) 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) 后序遍歷 } }不能使用遞歸時(shí)，則使用棧就是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é)點(diǎn)（最底層的節(jié)點(diǎn)）都是從左往右順序排序，并且其他層的節(jié)點(diǎn)都是滿的）。二叉堆又分為大根堆與小根堆。

大根堆是某個(gè)節(jié)點(diǎn)的所有子節(jié)點(diǎn)的值都比他小

小根堆是某個(gè)節(jié)點(diǎn)的所有子節(jié)點(diǎn)的值都比他大

堆排序的原理就是組成一個(gè)大根堆或者小根堆。以小根堆為例，某個(gè)節(jié)點(diǎn)的左邊子節(jié)點(diǎn)索引是 i * 2 +1 ，右邊是 i * 2 + 2 ，父節(jié)點(diǎn)是 (i - 1) /2 。

1. 首先遍歷數(shù)組，判斷該節(jié)點(diǎn)的父節(jié)點(diǎn)是否比他小，如果小就交換位置并繼續(xù)判斷，直到他的父節(jié)點(diǎn)比他大

2. 重新以上操作 1，直到數(shù)組首位是最大值

3. 然后將首位和末尾交換位置并將數(shù)組長度減一，表示數(shù)組末尾已是最大值，不需要再比較大小

4. 對比左右節(jié)點(diǎn)哪個(gè)大，然后記住大的節(jié)點(diǎn)的索引并且和父節(jié)點(diǎn)對比大小，如果子節(jié)點(diǎn)大就交換位置

5. 重復(fù)以上操作 3 - 4 直到整個(gè)數(shù)組都是大根堆。

以下是實(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) { // 如果當(dāng)前節(jié)點(diǎn)比父節(jié)點(diǎn)大，就交換 while (array[index] > array[parseInt((index - 1) / 2)]) { swap(array, index, parseInt((index - 1) / 2)); // 將索引變成父節(jié)點(diǎn) index = parseInt((index - 1) / 2); } } function heapify(array, index, size) { let left = index * 2 + 1; while (left < size) { // 判斷左右節(jié)點(diǎn)大小 let largest = left + 1 < size && array[left] < array[left + 1] ? left + 1 : left; // 判斷子節(jié)點(diǎn)和父節(jié)點(diǎn)大小 largest = array[index] < array[largest] ? largest : index; if (largest === index) break; swap(array, index, largest); index = largest; left = index * 2 + 1; } }

以上代碼實(shí)現(xiàn)了小根堆，如果需要實(shí)現(xiàn)大根堆，只需要把節(jié)點(diǎn)對比反一下就好。

插入排序

將一個(gè)新的數(shù)，和前面的比較，只要當(dāng)前數(shù)小于前一個(gè)則和前一個(gè)交換位置，否則終止；

時(shí)間復(fù)雜度：O(N^2)；

空間復(fù)雜度：O(1)

以下是實(shí)現(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ù)組重復(fù)的值

這道問題出現(xiàn)在諸多的前端面試題中，主要考察個(gè)人對Object的使用，利用key來進(jìn)行篩選。

以下是實(shí)現(xiàn)該算法的代碼

let unique = function(arr) { let hashTable = {}; let data = []; for(let i=0,l=arr.length;i

快速排序

以下是實(shí)現(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))無重復(fù)字符的最長子串

給定一個(gè)字符串，請你找出其中不含有重復(fù)字符的 最長子串 的長度。

以下是實(shí)現(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; };時(shí)間復(fù)雜度：O(n2)， 其中 arr.indexOf() 時(shí)間復(fù)雜度為 O(n) ，arr.splice(0, index+1) 的時(shí)間復(fù)雜度也為 O(n)

空間復(fù)雜度：O(n)

隊(duì)列

隊(duì)列和棧類似，不同的是隊(duì)列是先進(jìn)先出 (FIFO) 原則的有序集合，它的結(jié)構(gòu)類似如下：

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

以下是實(shí)現(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 } }查找：從對頭開始查找，從時(shí)間復(fù)雜度為 O(n)

插入或刪除：進(jìn)棧與出棧的時(shí)間復(fù)雜度為 O(1)

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

面試總結(jié)

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

首先要看一下是不是簡歷寫得不好，一般沒有機(jī)會大部分都是因?yàn)檫@個(gè)原因，可以找一下師兄姐聊一下如何修改簡歷。然后重新投遞試試?；蛘哂辛嗣嬖嚈C(jī)會卻沒有下輪面試了，那就是可能因?yàn)槟愕募夹g(shù)不夠扎實(shí)，好好準(zhǔn)備自己的基礎(chǔ)，我推薦你

寫技術(shù)博客

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

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

寫項(xiàng)目

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

交流心得

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

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

收個(gè)尾

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

?以上PDF已經(jīng)打包完畢，需要的伙伴可以在評論區(qū)留言“資料”即可無償獲?。。?/span>

記得關(guān)注一下哦，后續(xù)更新更多編程干貨