2020最新前端中高級面試題

前言

關於前端面試，及面試題目，我之前有很多文章總結過，可以在右側搜索面試，進行查找。其實面試中可以問的問題很多，最近幾年，我也面試過很多工作2-4年的前端，我一般會抓住他們做的項目，進行更詳細的追問。所以，初中級前端面試的時候，除了掌握基礎知識之外，項目中用到的技術要理清楚，假如你項目中用到的技術，問的時候卻一問三不知，那么，基本上就會pass掉了。針對比較資深或者高級的前端面試，可能和初中級面試會有些不一樣，當然，針對資深的前端，可能聊得東西更深，更廣一些！這篇文章簡單聊聊針對中高級前端我們要聊的話題。

一、前端工程化

關於前端工程化，是一個很大的命題，你在知乎上搜索前端工程化，會有一些文章，這些文章可以幫助你理解前端工程化。

說一下我理解的前端工程化吧，前端工程化不單單包括前端的模塊化、組件化、自動化，還包括前端性能優化，前端目錄規划，前端規范化，自動化測試，發布等等一系列知識。這里我就不一 一介紹了，感興趣的也可以去讀讀張雲龍的文章：

https://github.com/fouber/blog/issues/3

https://github.com/fouber/blog/issues/10

二、 前端設計模式

其實這里可以作為一篇文章來書寫了，不過，假如你不了解，可以網上搜了一下前端設計模式，關於設計模式也是有不少文章的。

三、 前端安全性問題

當然，這個是老的話題，有的在初中級前端面試中也會提及到。但是在中高級面試的時候，你要說出前端安全性問題防御，及前端常見安全性問題的攻擊原理是什么。

1、xss跨站腳本攻擊（原理、如何進行的、防御手段是什么，要說清楚）

2、CSRF跨站請求偽造（如何偽造法？怎么防御？等等都要說清楚）

3、sql腳本注入（注入方式，防御方式）

4、上傳漏洞 （防御方式）

四、 跨域問題的處理

關於跨域，我前面很多文章也提及了，瀏覽器跨域訪問解決方案，這篇文章可以看一下。

另外，面試官可能會問及 cookie跨域及localStorage跨域問題，關於這一點，也可以看我之前剛剛寫的文章：http://www.haorooms.com/post/kuayu_localstorage_cookie

五、前端數據加密

關於前端加密方式及前端加密，這個我在項目中實際用的也不多，微信小程序中可能會用到，我很久很久之前也寫過類似的文章，請看：javascript用戶密碼加密,js密碼加密

六、http相關問題

這個可能涉及的東西也蠻多，可以看我前段時間總結的系列文章：

http://www.haorooms.com/post/long_lianjie_websocket

七、 知識點問題介紹

上面問題可能是前端通用問題吧，下面的問題可能都是相關知識點的，下面簡單總結一下：

1、 webpack相關

這個考察你對webpack的理解是使用程度。

例如可能考察如下知識點：

1、hash（contenthash, chunkhash）

2、多頁面配置

3、發布上線流程

4、如何加快打包速度，減少打包體積

5、和其他工具的區別（grunt,glup,rollup,parcel,Browserify）

2、狀態管理器相關

主要是flux、redux、vuex等

主要問題如下：

一、flux、redux、vuex數據流向，(例如：點擊按鈕觸發到狀態更改，數據是如何流向的？)

例如flux：

1、用戶訪問 View 2、View 發出用戶的 Action 3、Dispatcher 收到 Action，要求 Store 進行相應的更新 4、Store 更新后，發出一個"change"事件 5、View 收到"change"事件后，更新頁面

二、vuex和redux區別

三、vuex數據流？為什么要遵循這個數據流？假如在頁面中直接修改state,而不是通過mutation 的commit方式修改，會怎么樣？

3、 vue相關

vue相關的問題有很多。僅舉例：

1、vue-router如何做歷史返回提示？ 2、vue-router如何做用戶登錄權限等？ 3、vue生命周期 4、vue組件通信 5、vue服務器渲染 6、vue性能優化

4、 nodejs相關

1、nodejs常用模塊 2、nodejs爬蟲 3、nodejs 流 4、nodejs請求如何返回大文件

5、 es6相關

1、generate和async await

...

6、算法

1、冒泡排序 2、數據去重方法 3、取1000個數字里面的質數

7、模塊化

1、amd,cmd及commonjs區別

2、import、require區別

8、其他

1、自動化測試相關 2、mock數據相關 3、pwa相關 4、nginx相關 5、微信小程序相關 6、敏捷開發等

前言

之前在興安得力的時候，我也出過前端的面試題。那么前端人員在外面面試的時候，一般技術人員都會考察我們那些地方呢？我在這里不妨總結一下！（PS：有點小邪惡，這個公開之后，對於面試者來說是方便了。但是，假如你是公司技術人員，是面試官，您不妨修改一下題目，變通一下！）

javascript常見題目

一、您對js的原型是如何理解的？您對js的繼承是如何理解的？能否舉例說明js的繼承？

關於這個題目，我之前的一篇文章 http://www.haorooms.com/post/js_constructor_pro ，您可以看一下。理解一下原型prototype，關於繼承，那主要是js原型鏈的繼承。關於繼承的理解及舉例（我這里就不詳細介紹了，簡單介紹之后，你即使背過了，也不一定理解，對於公司也是不公平的）。我還是推薦面試者看一本書《[JavaScript高級程序設計(第3版)]》，這本書對js講的很詳細。關於這個題目，您可以閱讀其第六章就可以了！認真閱讀之后，相信你能理解，也能夠簡單的說出來！

關於js的繼承，確實是重點和難點，我寫過兩篇博客，大家可以看下：http://www.haorooms.com/post/js_lei_jicheng

http://www.haorooms.com/post/js_jc_lei2

二、js閉包？舉例並說明其主要的作用！

關於閉包，其實是指有權訪問另一個函數作用域中變量的函數。具體我之前也寫過一篇文章，可以看一看！

javascript閉包的理解 http://www.haorooms.com/post/js_bb

javascript閉包入門理解（二）：http://www.haorooms.com/post/js_bbtwo

三、js數組主要有哪些方法？主要參數你了解嗎？

具體你可以查一下，常用的一般有如下：

1 、shift():刪除數組的第一個元素,返回刪除的值。這里是0

2 、unshift(3,4):把參數加載數組的前面，返回數組的長度。現在list:中是3,4,0,1,2

3、pop():刪除數組的最后一個元素，返回刪除的值。這里是2.

4、push(3):將參數加載到數組的最后，返回數組的長度，現在List中時：0,1,2,3

5、concat(3,4):把兩個數組拼接起來。

6、splice(start,deleteCount,val1,val2,...)：從start位置開始刪除deleteCount項，並從該位置起插入val1,val2,...

7、reverse：將數組反序

var a = [1,2,3,4,5]; var b = a.reverse(); //a：[5,4,3,2,1] b：[5,4,3,2,1] 

8、sort(orderfunction)：按指定的參數對數組進行排序 var a = [1,2,3,4,5]; var b = a.sort(); //a：[1,2,3,4,5] b：[1,2,3,4,5]

9、slice(start,end)：返回從原數組中指定開始下標到結束下標之間的項組成的新數組

var a = [1,2,3,4,5]; var b = a.slice(2,5); //a：[1,2,3,4,5] b：[3,4,5]

四、js迭代的方法

every() 、fliter()、forEach()、map()、some()具體大家可以查一下！

五、js數組去重和排序

具體我就不詳細描述了。

六、js正則表達式

關於正則：http://www.haorooms.com/post/js_regex_refuse ，這篇文章應對面試足夠了！

讓你寫個簡單的正則，去掉字符串左右空格。具體看看我之前的文章http://www.haorooms.com/post/js_kong_ge

關於正則，你可以去了解一下！

七、純js的ajax請求原理

可以查詢，了解一下！看下這幾篇文章http://www.haorooms.com/post/js_ajax_chun 和http://www.haorooms.com/post/js_shixian_jquery 最后關於js實現ajax的，最新出了js的fetch方法，很不錯的！

八、js模塊化

可以看下我之前的文章：http://www.haorooms.com/post/js_require_zz

九、雙等號隱性轉換

具體看文章：http://www.haorooms.com/post/js_yinxingleixing

十、js操作符，字符串截取等

具體請看：http://www.haorooms.com/post/js_czf_mst

字符串截取，substr 、substring等的區別

十一、js中繼承中call和apply（）的區別

用法差不多，傳遞參數不同。具體你可以網上查查，也可以看下我的文章 http://www.haorooms.com/post/js_constructor_pro

十二、類數組轉換為數組的方法

Array.prototype.slice.call(arguments);

十三、cookie 不設置過期時間，默認過期時間是多少？

關閉瀏覽器就結束了

十四、改變數組長度的方法有哪些？

shift、unshift、pop、push

十五、js事件循環 event loop

請看文章：http://www.haorooms.com/post/js_xiancheng

十六、require 和 import的區別

看文章：http://blog.csdn.net/qq_28702545/article/details/54892562

jquery常見題目

一、jquery源碼研究過沒有？

二、jquery插件寫過沒有，一般如何寫？

可以看我之前的一篇文章：http://www.haorooms.com/post/js_jquery_chajian

三、jquery的bind(),live(),delegate(),on() 區別

網上可以搜索一下，看一下！

前端常見題目

一、如何處理跨域？

jsonp等，可以看下我寫的 瀏覽器跨域訪問解決方案

二、如何處理緩存？如何清除緩存。

ajax隨機數、ajax參數、meta中設置等。可以看下我寫的 js清除瀏覽器緩存的幾種方法

三、http請求問題，HTTP請求信息由那3部分組成？

1、請求方法URI協議/版本 （例如：GET/haorooms.jspHTTP/1.1） 2、請求頭(Request Header)（例如：Accept:image/gif.image/jpeg.*/* Accept-Language:zh-cn Connection:Keep-Alive Host:localhost等等） 3、請求正文 

關於圖片的請求，可以看我之前的一篇文章 http://www.haorooms.com/post/web_http_request

四、前端性能優化問題，你是如何處理前端性能問題的？

看我之前的一篇文章：http://www.haorooms.com/post/web_xnyh_jscss 及 前端性能優化補充篇

五、網站js和css如何壓縮？有哪些方法？

ant+yuicompressor具體可以看看我之前的一篇文章：http://www.haorooms.com/post/ant_yuicom

ant:http://www.haorooms.com/tools/ant_book/

SASS等 可以對css進行自動壓縮！

也可以用Grunt構建工具進行。可以看下 前端js和css的壓縮合並之grunt

六、用到哪些css插件？

bootstrap，animate.css 等

七、讓你自己搭建一個網站，你是如何做架構的？

考察前端架構能力。

八、一些狀態碼你了解嗎？

200成功類、300重定向類、400客戶端類、500服務器端類。具體可以網上查一下！

九、如何用瀏覽器進行代碼調試？

谷歌瀏覽器、火狐、IE等。（不明白的同學具體網上可以查一下）

十、json字符串轉為json的方法

具體請看：http://www.haorooms.com/post/js_jsons_h

http://www.haorooms.com/post/json_object_json_string

html+css+html5+css3 常見題目

一、假如一個頁面，左側固定，右側自適應，你是如何做到的？

方法很多，一般是margin和浮動，具體可以網上查一下。很簡單。

二、html5新的標簽和特性有哪些？

html5標簽有很多，你可以網上查一下。

三、你常用的css3有哪些？說出你記得的。

哈哈哈，這個很多，你要再復習一下css3包括其動畫等等。

四、如何處理瀏覽器兼容性問題？

請看：http://www.haorooms.com/post/IE_jianrong

五、如何用css美化radio、checkbox等按鈕樣式？

具體可以看我的一篇文章：http://www.haorooms.com/post/css_mh_ck_radio

web touch常見題目

一、做手機網站長見的兼容問題有哪些？

看下手機網站相關文章。

二、網站如何自適應的？響應式網站一般如何制作？

可以隨便聊聊。可以看下http://www.haorooms.com/post/css3media

三、zepto.js使用過程中有哪些問題？jquerymobile用過嗎？會有哪些問題？

用過的話，可以隨便聊一下！

加分項

例如，你們聊到數據庫，數一下如何用mongo做分頁等等，包括mysql數據庫等等。

聊到inux系統，linux常用的命令。

聊到angularjs，vue.js、angularjs的指令，雙向數據綁定。MVVM模式和mvc模式的區別及mvp模式。

聊到前端架構，及百度fits的jello等。

聊到常用的版本控制工具git或者SVN，講講git常用的命令，git回滾到某個版本怎么做（ $ git reset --hard 某個版本號）

人事面試

人事面試和技術面試是有區別的，人事一般問一些概況總結方面的問題，我下面舉一些列子吧！

一、你做了這么多項目，讓你感受最深，印象最深的是哪個項目？你從中學到了什么？為什么會感受最深？

二、做前端開發這么多年來？說下你的感受吧！

三、簡單自我介紹一下自己。

四、你對公司有什么需要了解的？

五、談到薪資，談到離職原因，談到未來幾年的規划等等，我在這里就不具體說了。

上面是我面試過程中最常見的一些問題。注意：面試的時候千萬要真誠，不要撒謊，是什么就是什么，我列舉上面題目的原因是有些前端人員可能技術很好，但是面試的時候緊張，沒有准備。這樣你簡單准備了之后，就能發揮自己正常水平！廣大朋友們，加油吧！

分享幾個前端干貨，面試經常提

2016年3月29日 22470次瀏覽

前言

我前面的文章，也有幾篇講過面試的，不過都沒有很細致的講，例如：總結前端面試過程中最容易出現的問題，等等。還有一些文章，也是面試中可能提問的。今天，分享幾個小知識，算是干貨吧！前端面試中也經常會問及，不過問及的幾率相對較少。我個人認為，面試中你把基礎的知識打好，就可以無敵！哪些基礎知識呢？例如：js的繼承、js函數等等，萬變不離其宗，都是這些的擴展及應用。這些知識理解透徹了，再加一些面試技巧就可以了！

一、怎么讓Chrome支持小於12px 的文字？

這個我們在做移動端的時候，設計師圖片上的文字假如是10px，我們實現在網頁上之后。往往設計師回來找我們，這個字體能小一些嗎？我設計的是10px？為啥是12px?其實我們都知道，谷歌Chrome最小字體是12px，不管你設置成8px還是10px，在瀏覽器中只會顯示12px，那么如何解決這個坑爹的問題呢？

我們的做法是：

針對谷歌瀏覽器內核，加webkit前綴，用transform:scale()這個屬性進行縮放！

<style> p span{font-size:10px;-webkit-transform:scale(0.8);display:block;} </style> <p><span>haorooms博客測試10px</span></p>

二、IOS手機瀏覽器字體齒輪

修改-webkit-font-smoothing屬性，結果是： -webkit-font-smoothing: none: 無抗鋸齒 -webkit-font-smoothing: antialiased | subpixel-antialiased | default: 灰度平滑

三、如何修改chrome記住密碼后自動填充表單的黃色背景？

大體可以通過input : -webkit-autofill來進行修改！

input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; }

四、谷歌瀏覽器運行下面代碼，並解釋！

[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })

運行上面代碼之后，會發現HTML層都被使用不同的顏色添加了一個高亮的邊框。為什么會這樣呢？

首先我們來看

[].forEach.call()，關於call()和apply()，我前面有文章也寫過，具體可以看http://www.haorooms.com/post/js_constructor_pro

[].forEach.call()等價於Array.prototype.forEach.call()

其次我們來看$$("*")

你可以在你的Chrome瀏覽器控制台中輸入$$('a')，然后你就能得到一個當前頁面中所有錨元素的列表。

$$函數是許多現代瀏覽器命令行API中的一個部分，它等價於document.querySelectorAll,你可以將一個CSS選擇器作為這個函數的參數，然后你就能夠獲得當前頁面中所有匹配這個CSS選擇器的元素列表。如果你在瀏覽器控制台以外的地方，你可以使用document.querySelectorAll('')來代替$$('')

為元素添加顏色

為了讓元素都有一個漂亮的邊框，我們在上面的代碼中使用了CSS屬性outline。outline屬性位於CSS盒模型之外，因此它並不影響元素的屬性或者元素在布局中的位置，這對於我們來說非常有用。這個屬性和修改border屬性非常類似，因此下面的代碼應該不會很難理解：

a.style.outline="1px solid #" + color

真正有趣的地方在於定義顏色部分：

（~~(Math.random()*(1<<24))).toString(16)

~~的作用相當於parseInt，和我前面講解的“|”功能類似，關於運算符“I” ，可以去看看！

通過上面代碼可以獲取到一個隨機的顏色值！

五、input [type=search] 搜索框右側小圖標如何美化？

美化效果如下圖：

右側默認的比較難看的按鈕，美化成右側效果。

input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none;height: 15px; width: 15px;border-radius: 8px;background:url("images/searchicon.png") no-repeat 0 0;background-size: 15px 15px;}

用到的是偽元素::-webkit-search-cancel-button，關於什么是偽類和為元素，請看：http://www.haorooms.com/post/css_wl_wys

六、iOS safari 如何阻止“橡皮筋效果”？

可以參考一下知乎上的回答 https://www.zhihu.com/question/22256539 。

但是，我們遇到的問題不是這樣，我是要解決彈跳導致彈出層（position:absolute）的覆蓋層高度小於100%;

針對這個問題，我想到的解決方案如下：

方法一： 把position:absolute改成position:fixed，並在彈出層之后，設置body的高度是100%；overflow是hidden。

方法二：

思路是獲取蘋果瀏覽器導航欄的高度。然后滾動的時候，重新獲取其高度。在導航欄高度變小的時候，給彈出層增加高度的百分比！

代碼如下：

 //ios safari 伸縮判斷 var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true; $(window).scroll(function () { if(agent.indexOf("iPhone")!=-1 || agent.indexOf("iPad")!=-1){ var topbarHeightNow=window.outerHeight-window.innerHeight; if(topbarHeightNow<topbarHeight){ globleflag=false //此處寫處理邏輯 }else{ globleflag=true //此處寫處理邏輯 } } });

七、實現點擊文字，文字后面radio選中效果

這個效果是前端很經常用到和遇到的效果了，實現這個效果的方式也很多，很多朋友用js和jquery來實現，但是最簡單的，我們可以直接用lable標簽的 for 屬性來實現。

看下下面例子：

<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>

label 的for屬性后面跟着input的id,就可以點擊label，來觸發input效果了，大家可以試一試！

八、網站中，圖片文件（jpg，png,gif），如何點擊下載？而非點擊預覽？

我們平時在網站中的圖片，假如我們要下載，如下寫：

<a href="haorooms博客.jpg">下載</a>

我們點擊下載按鈕，只會預覽“haorooms博客.jpg”這張圖片，並不會出現下載框，另存為那種？那么我們如何做呢？

我們只需要如下寫

<a href="haorooms博客.jpg" download >下載</a>

就可以下載了。點擊如下進行嘗試吧！下載

不但如次，我們還可以指定文件名稱，如下寫法：

<a href="haorooms博客.jpg" download="haoroom前端博客圖片下載" >下載</a>

測試如下：下載

上面就是指定下載的寫法！

九、Math.min()比Math.max()大

Math.min() < Math.max() // false Math.min() > Math.max() // true

因為Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。

十、經典面試題目

const Greeters = [] for (var i = 0 ; i < 10 ; i++) { Greeters.push(function () { return console.log(i) }) } Greeters[0]() // 10 Greeters[1]() // 10 Greeters[2]() // 10

把 var 改成 let試試！

const Greeters = [] for (let i = 0 ; i < 10 ; i++) { Greeters.push(function () { return console.log(i) }) } Greeters[0]() // 0 Greeters[1]() // 1 Greeters[2]() // 2

十一、數組對象全等比較

// 這些可以 'abc' === 'abc' // true 1 === 1 // true // 然而這些不行 [1,2,3] === [1,2,3] // false {a: 1} === {a: 1} // false {} === {} // false

因為[1,2,3]和[1,2,3]是兩個不同的數組，只是它們的元素碰巧相同。因此，不能簡單的通過===來判斷。

十二、關於數字和點號

3.toString() 3..toString() 3...toString()

這個題也挺逗, 答案是

 error, '3', error

你如果換一個寫法就更費解了

var a = 3; a.toString()

這個答案就是 '3';

為啥呢?

因為在 js 中 1.1, 1., .1 都是合法的數字. 那么在解析 3.toString 的時候這個 . 到底是屬於這個數字還是函數調用呢? 只能是數字, 因為3.合法啊!

十三、變量提升

如下題目

var name = 'World!'; (function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();

理解這個，我們可以先看下面的題目：

var x = 1; // Initialize x console.log(x + " " + y); // '1 undefined' var y = 2;

相當於：

var x = 1; // Initialize x var y; // Declare y console.log(x + " " + y); // '1 undefined' y = 2; // Initialize y

變量提升了！

所以上面的自調用函數可以如下理解：

var name = 'World!'; (function () { var name; if (typeof name === 'undefined') { name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();

name在scope里面，因此，先找里面，里面找到了name,因此執行的結果是

'Goodbye Jack'

十四、局部變量和全局變量

(function(){ var x = y = 1; })(); console.log(y); console.log(x);

輸出：

1, error

y 被賦值到全局。x 是局部變量，全局中獲取不到。所以打印 x 的時候會報 ReferenceError

十五、正則表達式字面一致也不相等

var a = /123/, b = /123/; a == b a === b

即使正則的字面量一致, 他們也不相等.

答案 false, false

十六、函數名稱不可改變

function foo() { } var oldName = foo.name; foo.name = "bar"; [oldName, foo.name]

答案

['foo', 'foo']

例如：

function doSomething() {} doSomething.name; // "doSomething" var f = function() {}; var object = { someMethod: function() {} }; console.log(f.name); // "f" console.log(object.someMethod.name); // "someMethod"

函數的名字是不可以改變的。

十七、寫出最簡單的去重方式

1、es6的new Set()方式，具體請看：http://www.haorooms.com/post/js_map_set

例如：

let array=[0,3,4,5,3,4,7,8,2,2,5,4,6,7,8,0,2,0,90]; [...new Set(array)]

或者直接

[...new Set([1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0])]

2、es5的Array filter()

[1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0].filter(function(elem,index,Array){ return index === Array.indexOf(elem); })