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

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

另外，宣傳一下自己發(fā)布在CSDN的一個前端Vue的項目：基于vue + vuex + mint-ui + node + mySQL模仿拼多多電商系統(tǒng)。希望有興趣的同學(xué)，可以一起學(xué)習(xí)。

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

HTML&CSS：瀏覽器內(nèi)核、渲染原理、依賴管理、兼容性、CSS語法、層次關(guān)系，常用屬性、布局、選擇器、權(quán)重、CSS盒模型、Hack、CSS預(yù)處理器、CSS3動畫

JavaScript：

數(shù)據(jù)類型、運算、對象、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

面試題文檔十分全面，文末還有答案解析！（文章比較長，耐心看完，讓你面試提升一大截！）

1、HTML面試題

html 語義化

canvas 相關(guān)

svg和canvas的區(qū)別？

html5有哪些新特性？

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

說說 title 和 alt 屬性

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

2、CSS面試題

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

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

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

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

盒模型

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

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

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)形式?

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

能不能描述一下原型鏈？

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

null是對象嗎？為什么？

call 和 apply 的區(qū)別

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

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

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

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

…

4、前端框架面試題

Vue

Vue 雙向綁定原理

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

你是如何理解 Vue 的響應(yīng)式系統(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 有什么了解？

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

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

什么是高階組件（HOC）？

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

Redux與Flux有何不同？

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

什么是React 路由？

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

…

5、瀏覽器面試題

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

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

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

瀏覽器緩存

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

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

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

能不能說一說XSS攻擊？

BOM對象模型

…

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

HTTP 緩存

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

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

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

HTTPS 是什么？具體流程

WebSocket與Ajax的區(qū)別

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

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

7、一些開放性題目

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

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

3)項目介紹

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

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

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

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

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

8、算法題

鏈表

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

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

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

堆排序

堆排序利用了二叉堆的特性來做，二叉堆通常用數(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. 重復(fù)以上操作 3 - 4 直到整個數(shù)組都是大根堆。

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

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

插入排序

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

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

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

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

去掉一組整型數(shù)組重復(fù)的值

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

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

快速排序

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

無重復(fù)字符的最長子串

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

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

? ??

時間復(fù)雜度：O(n2)， 其中 arr.indexOf() 時間復(fù)雜度為 O(n) ，arr.splice(0, index+1) 的時間復(fù)雜度也為 O(n)

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

隊列

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

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

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

}

查找：從對頭開始查找，從時間復(fù)雜度為 O(n)

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

??? 由于篇幅原因，這里只能分享部分面試題截圖，如有需要以上完整面試題寶典及答案PDF的，！

面試總結(jié)

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

首先要看一下是不是簡歷寫得不好，一般沒有機會大部分都是因為這個原因，可以找一下師兄姐聊一下如何修改簡歷。然后重新投遞試試。或者有了面試機會卻沒有下輪面試了，那就是可能因為你的技術(shù)不夠扎實，好好準(zhǔn)備自己的基礎(chǔ)，我推薦你

寫技術(shù)博客

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

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

寫項目

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

交流心得

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

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

收個尾

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

?? 【留言“面試”獲取前端大廠面試寶典】

不想每次面試都像菜市場上廉價的白菜一樣讓人挑選，那就讓自己強大起來。奮斗啊年輕人?。。?/p>

推薦教程：

《HTML5面向?qū)ο髮崿F(xiàn)炫酷飛機大戰(zhàn)效果》

《前端Vue框架實戰(zhàn)項目：購物車 快速上手，通俗易懂》

《前端開發(fā)零基礎(chǔ)教程：微信小程序開發(fā)學(xué)習(xí)》

一鍵三連+關(guān)注

想要領(lǐng)取資料的小伙伴們，請關(guān)注下方微信公眾號領(lǐng)取哦~?

然后就等著私信查收吧~