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

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

【PDF文末獲取】

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

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

??? html 語(yǔ)義化

??? canvas 相關(guān)

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

??? html5有哪些新特性？

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

??? 說(shuō)說(shuō) title 和 alt 屬性

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

2、CSS面試題

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

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

??? 使用display:inline-block會(huì)產(chǎn)生什么問(wè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)形式?

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

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

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

??? null是對(duì)象嗎？為什么？

??? call 和 apply 的區(qū)別

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

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

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

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

…

4、前端框架面試題
Vue

??? Vue 雙向綁定原理

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

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

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

??? vue 中怎么重置 data?

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

??? vuex是什么？怎么使用？哪種功能場(chǎng)景使用它？

??? vuex有哪幾種屬性？

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

??? Vue 中 key 值的作用？

??? 什么是MVVM？

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

React

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

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

??? React有哪些限制？

??? 什么是JSX？

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

??? 與 ES5 相比，React 的 ES6 語(yǔ)法有何不同？

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

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

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

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

??? React中的事件是什么？

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

??? 你對(duì) React 的 refs 有什么了解？

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

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

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

??? MVC框架的主要問(wèn)題是什么？

??? Redux與Flux有何不同？

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

??? 什么是React 路由？

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

…

5、瀏覽器面試題

??? 能不能說(shuō)一說(shuō)瀏覽器緩存?

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

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

??? 瀏覽器緩存

??? 談?wù)勀銓?duì)重繪和回流的理解

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

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

??? 能不能說(shuō)一說(shuō)XSS攻擊？

??? BOM對(duì)象模型

…

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

??? HTTP 緩存

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

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

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

??? HTTPS 是什么？具體流程

??? WebSocket與Ajax的區(qū)別

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

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

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

8、算法題
鏈表

面試題：反轉(zhuǎn)單向鏈表
題目需要將一個(gè)單向鏈表反轉(zhuǎn)。思路很簡(jiǎn)單，使用三個(gè)變量分別表示當(dāng)前節(jié)點(diǎn)和當(dāng)前節(jié)點(diǎn)的前后節(jié)點(diǎn)，雖然這題很簡(jiǎn)單，但是卻是一道常考題
以下是實(shí)現(xiàn)該算法的代碼
var reverseList = function(head) { // 判斷下變量邊界問(wèn)題 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 };二叉樹(shù)遍歷

??? 原理: 遞歸

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; };
堆排序
堆排序利用了二叉堆的特性來(lái)做，二叉堆通常用數(shù)組表示，并且二叉堆是一顆完全二叉樹(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ù)組長(zhǎng)度減一，表示數(shù)組末尾已是最大值，不需要再比較大小
4. 對(duì)比左右節(jié)點(diǎn)哪個(gè)大，然后記住大的節(jié)點(diǎn)的索引并且和父節(jié)點(diǎn)對(duì)比大小，如果子節(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)對(duì)比反一下就好。

插入排序
將一個(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ù)的值
這道問(wèn)題出現(xiàn)在諸多的前端面試題中，主要考察個(gè)人對(duì)Object的使用，利用key來(lái)進(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))無(wú)重復(fù)字符的最長(zhǎng)子串
給定一個(gè)字符串，請(qǐng)你找出其中不含有重復(fù)字符的 最長(zhǎng)子串 的長(zhǎng)度。
以下是實(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)類似如下：

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

以下是實(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 } }查找：從對(duì)頭開(kāi)始查找，從時(shí)間復(fù)雜度為 O(n)
插入或刪除：進(jìn)棧與出棧的時(shí)間復(fù)雜度為 O(1)

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

面試總結(jié)
其實(shí)整個(gè)備考的過(guò)程中，心態(tài)也是很重要的一部分，就好像我們當(dāng)年高考的時(shí)候，心態(tài)一定要好?？赡芡瑢W(xué)們經(jīng)過(guò)很長(zhǎng)的時(shí)間備考，然后投遞了很多簡(jiǎn)歷卻沒(méi)有面試機(jī)會(huì)。
首先要看一下是不是簡(jiǎn)歷寫(xiě)得不好，一般沒(méi)有機(jī)會(huì)大部分都是因?yàn)檫@個(gè)原因，可以找一下師兄姐聊一下如何修改簡(jiǎn)歷。然后重新投遞試試。或者有了面試機(jī)會(huì)卻沒(méi)有下輪面試了，那就是可能因?yàn)槟愕募夹g(shù)不夠扎實(shí)，好好準(zhǔn)備自己的基礎(chǔ)，我推薦你

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

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

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

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

?? 以上PDF已經(jīng)打包完畢，需要的伙伴可以在評(píng)論區(qū)留言“資料”即可無(wú)償獲取?。?br>
想要領(lǐng)取資料的小伙伴們，請(qǐng)關(guān)注下方微信公眾號(hào)領(lǐng)取哦~
然后就等著私信查收吧~