標籤：

Web前端面試題面試技巧有哪些？

01-14

  1. 帶二維碼吧，效果其實也挺好的

  2. github都成標配了，有博客大部分都會加分
  3. 線上已運營的網站，給面試官show注釋裡面自己的簽名也是酷酷的
  4. 還有可以帶塊平板，面試時有wifi當然好，沒有起碼有個離線版本或者APP在平板上可以展示
  5. 自己的網站選擇新浪sae或者github pages也好，最好買個自己的域名，綁定自己的獨立域名會高一點逼格的~

  6. 有什麼好的平台的賬號也可以選擇性寫上去，效果不比博客差
  7. 刷刷面試題

最後，帶上一個好的心態去吧，沒有好作品不要緊，沒有好的實力也不要緊，最要緊是要別人看到你的潛力~祝成功~

通常情況下我們都會從求職者的角度去考慮面試求職這件事，但是如果換個角度，從面試官的角度來看這件事呢？如何從面試官的角度來準備好一場面試呢？本文只針對初級前端或者沒有工作經驗的應屆畢業生。

大部分人在求職的時候，通常是這樣的流程：

寫簡歷-&>網上找企業投簡歷-&>收到面試通知，準備-&>面試。這整個過程中，還包含著準備面試的階段。關於如何準備面試不是本文探討的內容，這篇文章是想從面試官或者企業的角度出發，嘗試從招聘方理解他們會如何去面試一個求職者這個角度來幫助我們更好的準備面試，從而得到自己心儀的offer（本文只針對it行業，或者再縮小範圍，只針對前端招聘）。

ps：只所以想寫這篇文章，是因為之前招的前端由於各種原因被辭退了，所以這段時間又開始在招聘初級前端工程師。從之前的面試者到面試官的身份轉換，這個過程產生了一些想法，所以就把這些想法記錄下來，也算是為以後自己的求職做準備。

面試官是如何面試求職者

其實我也還是屬於入門一年多的前端，並沒有太多經驗和能力來面試別人，尤其是在面試和招聘這兩個方面。但是這並不妨礙你去學習。我網上找過資料，詢問過公司的大神，也向公司負責人事的總經理請教過。這篇文章其實就是基於這幾方面收集的整合。

一般企業會從下面幾個方面來考察面試者

  1. 考察對方專業知識，根據對方的回答再進行深入提問。考察專業知識這點已經是共識了。只有專業知識符合了，才能有機會進行下面的面試階段。
  2. 詢問對方感興趣的技術是什麼（技術方面），然後根據他所說的技術，深入挖掘問下去。因為在面試官看來，如果你連感興趣的東西都了解得不多，學得不夠好，不是態度的問題就是學習能力的問題。而這兩者都是企業不願意在一個員工身上看到的。
  3. 詢問對方的做項目中遇到什麼樣的難題，怎麼解決的？每個人在做項目的時候都會遇到難題，但是如果你沒有記錄總結的習慣，你就不太可能在這個環節回答得很好。
  4. 詢問對方平時遇到問題都是如何解決的或者拋出一個問題讓對方給出解決方案或者思路。從對方的回答中來判斷對方解決問題的思路和方法。
  5. 詢問對方下班後的時間都會花在什麼地方？從對方的回答中判斷對方是否會主動學習，畢竟程序員這個行業是需要保持不斷學習的步伐才能不落後。當然了這個問題是需要有提問技巧的，如果這麼直白得問，求職者的回答肯定都是套路。
  6. 在溝通的過程觀察對方的表達能力。 如果是表達能力存在比較大的問題，則可能會給後面的工作造成困擾，因為你在公司不是一個人在戰鬥，肯定是需要同事的溝通與協作。能把意思表達清楚是一個必須要掌握的能力。
  7. 談到薪資的過程，可通過公司提供的成長性、技術成長等方面來平衡對方的心理落差。這點是總經理說的，HR總是想著法子將你的工資壓下來（一臉鄙視）。

求職者如何準備面試

有了這幾個參考的角度，是不是就會覺得準備面試就沒有那麼無從下手了。那我們就看針對上面說的一點一點來看如何應對

一、專業知識

這部分的內容就好像上學時代考卷中的選擇題和填空題。前端基本專業知識就那些，你看或不看，它都在那裡。這部分就沒有太多技巧可言了，好好找幾份前端面試題，該背得背，該coding得還是老老實實地coding。這裡附上兩份github的面試題大全：

  • My-blog/Front-end-Developer-Questions at master · markyun/My-blog · GitHub
  • Front-end-Developer-Interview-Questions/Translations/Chinese at master · h5bp/Front-end-Developer-Interview-Questions · GitHub

二、感興趣的技術

如果把整個面試過程看做一場考試，第一部分是封閉型問題，那麼這部分則是開放性問題，沒有標準可言。

但是有一點一定要注意的：所說的技術一定是你最熟悉的，因為對於你感興趣的技術，面試官一定不會放過這個機會，深入問下去的。

可能會有人會覺得，感興趣的技術為什麼非得是你熟練掌握的技術呢？我對一項新的技術很感興趣，但是我還沒有來得及深入學習。這樣的想法也是正確的，在平常的回答中，你大可以這麼說。但這是在面試啊，你需要在跟面試官的溝通過程中，讓對方更多的了解到你。所以如果你這麼回答：「我對這項技術很感興趣，但是我還不懂這項技術」，目測面試官會一臉懵逼，這還能不能愉快得溝通啊。這簡直就是面試話題終結者。因為在面試官看來，如果你連喜歡的東西都研究得不夠深入，那麼你所謂的喜歡也太廉價了。

這就回到了面試的目的。面試的目的不是讓你百分百的表達你的真實想法，而是讓你儘可能得在整個面試過程中，讓對方能更全面得了解到你的能力。任何行為和言語如果不能達到這個目的，都應該盡量減少或者避免。

三、做項目過程遇到什麼難以解決的難題？最後如何解決

這個問題我問過很多應屆畢業生，屢試不爽。普遍的回答都是沒有什麼問題。沒有問題本身就是最大的問題。試想下，你在做任何東西的過程中怎麼可能沒有問題呢？比如你在利用新框架做一個項目，那麼關於環境的搭建是否有疑問？關於新框架語法是否有疑問？還有每個框架都會存在很多坑，你沒有踩過嗎？還有作為web開發者，PC的瀏覽器兼容問題有遇到過嗎？Android和iOS兼容性問題？這些都是你在做項目過程中可能會遇到的問題，如果你就這麼回答沒有，則一定說明你沒有深入思考過或者遇到問題從來不會記錄和總結。

那麼對於這個問題該如何準備呢

其實如果有記錄和總結問題的習慣的話，那麼這個問題就迎刃而解。如果沒有的話，那就從現在開始培養這個習慣咯。可以每天建立一個問題記錄列表，用來收集每天的問題（模板如下）:

# 問題描述：

gulp執行sass命令報錯

node_modules/node-sass/vendor/darwin-x64-48/binding.node,

解決辦法

是node-sass的問題，rebuild即可

npm rebuild node-sass

通過每日記錄問題來培養這種習慣。這個方法也可以用在做項目的過程中，專門為每個項目建一個問題記錄列表，所有在項目開發過程中遇到的問題，都可以扔到這個列表中，然後再按照上面的方法，將問題描述和解決辦法補齊。最後在項目結束後，就可以通過這份問題記錄列表來做總結。

這樣就不用再擔心在這個問題回答不出來了，就把你問題記錄列表裡的內容拋出來就行。

四、詢問對方平時遇到問題都是如何解決

工作中最重要的能力應當是解決問題的能力。解決問題的能力包括思路和能力兩部分。思路就是你想到如何去解決這個問題，而能力就是指具體解決問題的能力，這裡指coding能力。所以在遇到問題的時候，如何清晰地將你解決問題的思路表達出來就顯得很重要了。思路這種東西，就是你腦袋中的各種想法，如果你沒有刻意得訓練過，很難一下子將其通過語言清楚得表達出來。所以要想回答好這個問題，也需要在平常的學習和工作過程中，有意識地將解決問題的想法通過文字或者流程圖、思維導圖等方式記錄下來。這樣的訓練過程能強化解決問題的思路，對解決問題也是很有幫助的。

五、詢問對方下班後的時間都會花在什麼地方？

這個問題意圖太明顯了，所以大部分面試者的回答都是套路，不夠具體且沒有可信度。比如：「下班後一般就看書、學習」這類的回答。講真的，如果你從無數個面試者口中聽到類似的話，那麼你可能就不會再相信這句話了。這類問題的回答就跟制定計劃很類似，如果你制定的計劃非常模糊：我要學習Vuejs，那多半這個計劃就會執行不下去了。但如果你制定的計劃是這樣的：

學習計劃：掌握vuejs，能獨立完成vuejs的項目
具體行動：
1、官網學習vuejs api
2、使用vuejs完成TODO sample
3、使用vue-cli腳手架構建項目
4、學習vue-router的使用
5、學習vue-resource使用
6、做一個XXX項目

那麼這個計劃就相對完成的概率就高很多。

同樣地，如果你的回答是具體且可實施的，那麼可信度就會大大增加了。對於這個問題，我的回答會是這樣的：

正常情況下是6點下班，除去通勤和吃飯及休息時間，一般8點半開始空閑出來。
1、首先，我會選擇先花20分鐘到30分鐘跟著健身App鍛煉，即保持健康，也為了保證後續學習的精神狀態。
2、接著便是學習、看書和coding time。在奇妙清單中，我建有「學習計劃」，「閱讀計劃」，「項目計劃」三個清單。
一般是會先花半個小時在閱讀計划上。半個小時結束之後，再根據學習計劃和項目計劃來安排。
比如這兩天的時間用來完成項目計劃中的任務，然後後面幾天就可以用來學習，完成學習計劃中的任務。

相信這樣回答的可信度肯定拉「下班後一般就看書、學習」這種回答好幾條街。

當然了，這麼回答的前提是你真的有這麼在做，我可沒有教你虛造這樣的回答。

六、關於表達能力

關於如何提高表達能力，網上已經有太多的資源和教程了。我只能幫你到這，剩下的就靠你自己了。

再多說一句，以程序員這個行業對表達能力的要求遠沒有其他行業如銷售那般高，只要你能把意思簡潔明了地表達清楚就可以了。如果當中能再多點風趣幽默，那簡直就是完美了。

七：關於薪資

關於如何談薪資，可以參考之前寫過文章：http://www.iamsuperman.cn/2016/08/02/interview/how-to-deal-with-hr/

總之一句話，合理認識你的價值，不要被HR的話所嚇倒了。該要多少錢，就要多少，不要慌！

瀉藥

高票回答都說了很多基礎相關的知識點，我就不贅述了

說點不一樣的

帶上自己的電腦吧，展示代碼用，如果你自己做的東西真的還不錯，絕對可以加分很多。代碼寫的優雅漂亮，會增加很多印象分(面試官視角)。

當然展示代碼之前要想清楚，你自己寫的代碼是不是真的OK。。。 縮進混亂命名隨意設計糟糕的代碼還是好好藏起來為妙。。。

http://www.jianshu.com/p/6534972420af

這是我前端面試題總結，分享給大家

沒啥特別的技巧，盡量說清楚你已經懂的東西就行了。

如果靠什麼「歪門邪道」性的技巧通過了面試，也過不了試用期。

HTML+CSS


1.對WEB標準以及W3C的理解與認識

標籤閉合、標籤小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外
鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維
護、改版方便，不需要變動頁面內容、提供列印版本而不需要複製內容、提高網站易用性；


2.xhtml和html有什麼區別


HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言


最主要的不同：


XHTML 元素必須被正確地嵌套。


XHTML 元素必須被關閉。


標籤名必須用小寫字母。


XHTML 文檔必須擁有根元素。


3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?


用於聲明文檔使用那種規範（html/Xhtml）一般為 嚴格 過度 基於框架的html文檔

加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug


4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?


塊級元素：div p h1 h2 h3 h4 form ul


行內元素: a b br i span input select


Css盒模型:內容，border ,margin，padding


5.CSS引入的方式有哪些? link和@import的區別是?


內聯 內嵌 外鏈 導入


區別 ：同時載入


前者無兼容性，後者CSS2.1以下瀏覽器不支持


Link 支持使用javascript改變樣式，後者不可


6.CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?


標籤選擇符 類選擇符 id選擇符


繼承不如指定 Id&>class&>標籤選擇


後者優先順序高


7.前端頁面有哪三層構成，分別是什麼?作用是什麼?


結構層 Html 表示層 CSS 行為層 js


8.css的基本語句構成是?


選擇器{屬性1:值1;屬性2:值2;……}


9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?


Ie(Ie內核) 火狐（Gecko） 谷歌（webkit） opear(Presto)


10.寫出幾種IE6 BUG的解決方法


1.雙邊距BUG float引起的 使用display


2.3像素問題 使用float引起的 使用dislpay:inline -3px


3.超鏈接hover 點擊後失效 使用正確的書寫順序 link visited hover active


4.Ie z-index問題 給父級添加position:relative


5.Png 透明 使用js代碼 改


6.Min-height 最小高度 ！Important 解決』


7.select 在ie6下遮蓋 使用iframe嵌套


8.為什麼沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）


11.標籤上title與alt屬性的區別是什麼?

Alt 當圖片不顯示是 用文字代表。


Title 為該屬性提供信息


12.描述css reset的作用和用途。


Reset重置瀏覽器的css默認屬性 瀏覽器的品種不同，樣式不同，然後重置，讓他們統一


13.解釋css sprites，如何使用。


Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量


14.瀏覽器標準模式和怪異模式之間的區別是什麼?


盒子模型 渲染模式的不同


使用 window.top.document.compatMode 可顯示為什麼模式


15.你如何對網站的文件和資源進行優化?期待的解決方案包括：


文件合併


文件最小化/文件壓縮


使用CDN託管


緩存的使用


16.什麼是語義化的HTML?


直觀的認識標籤 對於搜索引擎的抓取有好處


17.清除浮動的幾種方式，各自的優缺點


1.使用空標籤清除浮動 clear:both（理論上能清楚任何標籤，，，增加無意義的標籤）


2.使用overflow:auto（空標籤元素清除浮動而不得不增加無意代碼的弊端,,使用zoom:1用於兼容IE）


3.是用afert偽元素清除浮動(用於非IE瀏覽器)


Javascript


1.javascript的typeof返回哪些數據類型


Object number function boolean underfind


2.例舉3種強制類型轉換和2種隱式類型轉換?


強制（parseInt,parseFloat,number）


隱式（== – ===）


3.split() join() 的區別


前者是切割成數組的形式，後者是將數組轉換成字元串


4.數組方法pop() push() unshift() shift()


Push()尾部添加 pop()尾部刪除


Unshift()頭部添加 shift()頭部刪除


5.事件綁定和普通事件有什麼區別


6.IE和DOM事件流的區別


1.執行順序不一樣、


2.參數不一樣


3.事件加不加on


4.this指向問題


7.IE和標準下有哪些兼容性的寫法


Var ev = ev || window.event


document.documentElement.clientWidth || document.body.clientWidth


Var target = ev.srcElement||ev.target


8.ajax請求的時候get 和post方式的區別


一個在url後面 一個放在虛擬載體裡面


有大小限制


安全問題


應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的


9.call和apply的區別


Object.call(this,obj1,obj2,obj3)


Object.apply(this,arguments)


10.ajax請求時，如何解釋json數據


使用eval parse 鑒於安全性考慮 使用parse更靠譜


11.b繼承a的方法


12.寫一個獲取非行間樣式的函數


function getStyle(obj,attr,value)


{


if(!value)


{


if(obj.currentStyle)


{


return obj.currentStyle(attr)


}


else


{


obj.getComputedStyle(attr,false)


}


}


else


{


obj.style[attr]=value


}


}


13.事件委託是什麼


讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！

http://www.webasily.com/?p=78 例子可見此鏈接


14.閉包是什麼，有什麼特性，對頁面有什麼影響


閉包就是能夠讀取其他函數內部變數的函數。

深入理解JavaScript的閉包特性 如何給循環中的對象添加事件 此鏈接可查看（問這個問題的不是一個公司）


15.如何阻止事件冒泡和默認事件


canceBubble return false


16.添加 刪除 替換 插入到某個接點的方法


obj.appendChidl()


obj.innersetBefore


obj.replaceChild


obj.removeChild


17.解釋jsonp的原理，以及為什麼不是真正的ajax


動態創建script標籤，回調函數


Ajax是頁面無刷新請求數據操作


18.javascript的本地對象，內置對象和宿主對象


本地對象為array obj regexp等可以new實例化


內置對象為gload Math 等不可以實例化的


宿主為瀏覽器自帶的document,window 等


19.document load 和document ready的區別


Document.onload 是在結構和樣式載入完才執行js


Document.ready原生種沒有這個方法，jquery中有 $().ready(function)


20.」==」和「===」的不同


前者會自動轉換類型


後者不會


21.javascript的同源策略


一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裡的同一來源指的是主機名、協議和埠號的組合


22.編寫一個數組去重的方法


function oSort(arr)


{


var result ={};


var newArr=[];


for(var i=0;i&
{


if(!result[arr])


{


newArr.push(arr)


result[arr]=1


}


}


return newArr


}


·歡迎添加我微信：agoodjob11

邀請你加入群聊，程序源·微吧。

碰到明顯懂行的姿態放低，謙卑點。碰到明顯不懂的開啟吹牛皮模式…

1.有高大上的作品的話帶上自己的作品，面試官就會問你作品的相關問題，變被動為主動

2.一定要自信，知識是學不完的，表現的很厲害是關鍵，讓面試官覺得你是潛力股就Ok

3.提前在網上刷刷筆試題啊什麼的

talk is cheap show me your code

luke_up的博客 - 博客頻道 - CSDN.NET 希望大家能瀏覽瀏覽，提提意見，在此感謝不已。裡面有一些面試熱點

推薦閱讀：

※辯論能為我們帶來什麼?意義是什麼?
※如何才能做出傳播量10萬+的HTML5傳播頁面？大量轉發的HTML5都有哪些共同特點？
※為什麼有人撩妹的時候會故意欺負妹子？
※如何評價UC震驚部？
※你一共有幾個郵箱賬戶？分別用的是哪幾家公司的服務？

TAG:互聯網 | 前端開發 | 程序員 | HTML5 | 前端工程師 |