面試分享：應屆前端面試經歷

時間 2019-11-08

標籤面試分享應屆前端經歷欄目快樂工作简体版

原文原文鏈接

由於一些緣由離開了上一家實習的公司，在6月底畢業後我又開始積極的準備面試，此次的面試十分順利，三天面了三家就順利拿到了心儀的offer。感受公司對應屆生的基礎仍是比較注重的，面試問題都偏向基礎知識，對框架等知識反而沒有太多考覈。css

爲了記錄本身的面試過程，也爲了讓正在面試的小夥伴有所準備，下面跟你們分享個人面試經歷。html

一、某網課公司

一輪筆試

4頁紙筆試題目大多考驗原生JS功底，限時一個小時完成，後面四十多分鐘提早完成了，因此你們仍是要學好原生JS啊。前端

margin-top設置爲百分比，大小是相對於誰的值？
padding-top設置爲百分比，大小是相對於誰的值？

答：margin和padding的值設置爲百分比的時候，大小是按照其父元素的寬度的來計算的，不管是margin-left仍是margin-top都是按照父元素寬度來計算的，padding也是同樣，這裏考察的是各種屬性設置爲百分比時的表現狀況，除此以外還有width、height設置爲百分比，line-height設置爲百分比等。vue

函數做用域問題。

let f()=function g() {
    console.log(' ');
}
g();
輸出結果什麼？
複製代碼

答：報未定義錯，g()只能在函數內部訪問。html5

重複定義函數

let x,y;
x=fun1(2,1);
function fun1(a,b) {
    return a+b;
}
y=fun1(2,1);
function fun1(a,b) {
    return a-b;
}
console.log(x,y)；
輸出結果什麼？
複製代碼

答：1 1，JS中函數具備聲明提早的效果，且重複定義同一個函數變量時後定義的覆蓋先定義的。ios

對盒模型認知與理解？

答：講出IE下的怪異盒模型和標註瀏覽器的盒模型，且能夠經過box-sizing切換盒模型。css3

cookie與sessionStorage與localStorage的區別？

答：cookie非純客戶端存儲技術，會強制攜帶在http請求頭部中，容量小，大部分瀏覽器是4KB。sessionStorage與localStorage是純客戶端存儲技術，容量5MB，sessionStorage關閉瀏覽器即清空，localStorage關閉瀏覽器也不清空。git

for與for in與for of的區別？

答：for沒什麼好說了；for-in 循環：遍歷對象自身的和繼承的可枚舉的屬性, 不能直接獲取屬性值。能夠中斷循環；for-of 循環：具備 iterator 接口，就能夠用 for-of 循環遍歷它的成員（屬性值）。for-of 循環可使用的範圍包括數組、Set 和 Map 結構、某些相似數組的對象、Generator 對象，以及字符串。for-of 循環調用遍歷器接口，數組的遍歷器接口只返回具備數字索引的屬性。對於普通的對象，for-of 結構不能直接使用，會報錯，必須部署了 Iterator 接口後才能使用。能夠中斷循環。es6

什麼是跨域，解決方案？

答：跨域是瀏覽器的同源策略，目的是增強客戶端安全性。根據不一樣場景能夠選擇jsonp、CORS、postMessage，而後分別講解下jsonp、CORS、postMessage。web

頁面卡頓時，如何查找緣由以及解決方案？

答：開放題，答的越詳細越好。能夠從使用chrome瀏覽器的開發工具分析請求開始，壓縮資源減少資源大小，合併資源減小請求數量，而後講到頁面性能分析，查看致使頁面卡頓的代碼塊並對具體業務進行具體分析。

使用盡量多的方式實現一個給定寬高的div水平垂直居中？

答：相對定位後經過定位屬性（top、right、bottom、left）配合margin或transform實現；彈性佈局實現等，寫了四五種實現方式，網上能夠搜出七八種實現方式。

給定一個URL，用正則表達式截取出其中的域名(.com結尾，給定的，不是任意域名)。

答：/^w{3}\.\w*\.com$/

在頁面中顯示一個距離新年的倒計時 xx日xx小時xx分xx秒。

答：思路是經過Data對象的API得到當前時間和下一年的1月1號零點的時間，而後相減就是倒計時的時間了，注意使用setTimeout代替setInterval。

給定一個對象，返回對象的屬性組成的數組，且數組的元素要按照a-z排序

答：這題沒有規定要使用原生JS實現，因此我直接使用Object.keys()這個API拿到對象的屬性組成的數組，而後使用數組的sort方法進行排序。

這輪考的都是基礎知識，難度不大。

二輪技術面

作完題等了幾分鐘就有面試官過來了，這輪一個小時多。

作自我介紹
針對上一輪的筆試題進行一些提問
詢問上一家公司的工做經歷（我私下作過一個谷歌插件幫助業務部門工做，他對這個挺感興趣，立即開電腦演示給他看。你們遇到面試官表現出感興趣的時候要抓緊展現啊！）
對簡歷上的項目提了一些問題
服務端與客戶端各有一個10m的文件，服務端修改了文件的其中一個字節，如何讓客戶端花銷最小進行更新？如何讓多個客戶端更新的時候服務端壓力最小？（文件內容就是無規則的亂碼）

答：在服務端對照修改先後的版本找出改動的字節位置以及改動後該字節的值，服務端緩存下來（執行對照的時候花銷較大，緩存下來是回答他第二個問題讓服務端壓力最小）。接着發送到客戶端，客戶端經過blob對象修改文件。（不知道對不對，對服務端不太瞭解，面試官點了點頭就下一題了）

先後端如何一塊兒開發？

答：講了一些以前公司的開發方式，並行開發約定、接口文檔、聯調等。

上一家公司版本管理使用的是什麼？對git是否瞭解？git分支是否使用過？

答：上一家公司用的是svn，可是我本身的項目都是用git，而後講了一下git分支的命令。

給定一個大量子元素的ul，要求寫出原生和vue版本的，點擊li元素時輸出li元素所在的位置下標？進而詢問爲何要用委託？進而詢問爲何vue中咱們不須要寫委託？

答：考察事件綁定的兼容性，是否知道使用委託提升效率。vue的內部使用了事件委託來處理咱們使用v-on綁定的事件。

面完後感受二輪的面試官還算滿意，讓我在這等一下。

三輪技術面

等了幾分鐘後，第二位面試官進來了，從九點半開始筆試到如今兩個鍾了啊！立刻又開始第三輪面試，這誰頂得住啊。這輪面了一個鐘。

自我介紹
介紹html5新增特性

答：語義化標籤、加強表單元素、視頻音頻元素、canvas元素、svg元素、拖拽、地理定位、web worker、web storage、web socket，針對這幾點詳細將了一下，其餘的我就不知道了。

介紹css3新增特性

答：新增了選擇器、頁面分割多列、內容生成、轉換、過渡、動畫、hack，每講到一個的時候都會讓我詳細講出來有哪些屬性之類的，好比我說過渡的時候立刻要我說出過渡的屬性名。

介紹es6

答：新的定義變量方式let const、解構賦值、模板字符串以及字符串新增API、函數默認值、對象字面量的屬性或方法的簡寫、箭頭函數、類與繼承、promise、模塊化import export、新的類型symbol。

事件是如何觸發的？

答：兩種IE8如下的直接冒泡、其餘瀏覽器的冒泡捕獲。

如何阻止事件的默認行爲？如何阻止事件的冒泡？

答：我：event.preventDefault阻止事件的默認行爲，event.stopPropagation阻止事件的冒泡。面試官：不正確，存在兼容性問題。我：忽然想到不兼容IE8如下，可是IE8的API實在是忘記了，沒有答出來。

https協議如何實現的？

答：傳輸層之上增長一層，經過ssl/tls協議協商加密。

ssl協議如何進行加密的？

答：公鑰加密。

是否有看過vue 的源碼？

答：只分析過數據雙向綁定的相關代碼，其餘的沒有了解。

瀏覽器出於什麼安全性要求要限制同源策略？

答：不知道..（驚了，只知道怎麼繞過同源策略，可是一直沒想過爲何要有同源策略）

vue爲何不兼容IE8如下？

答：不知道..(只知道vue不兼容IE8如下，徹底不知道爲何不兼容啊)

get與post的區別？

答：我：交互的數據保存的位置不一樣，get數據通過編碼後與url相連後發送給後端，post則是將數據保存在http請求體重。面試官：get數據通過什麼編碼？API是什麼？我：不知道..

算法題：給定一個不定長度的二維數組，讓二位數組中的每一個一維數組出一個元素組成一個新的數組，這樣的數組有多少個？將新的一維數組存放在一個二維數組中輸出。

這題想不出來，徹底沒有刷過算法題，面試官提示我能夠先假定二維數組只有兩個一維數組元素，而後假定二維數組有三個一維數組元素，而後看我想不出來想結束面試了，我表示仍是想作一下，最後又拖延了二十分鐘作出來了（花費了二十分鐘等我，不知道會不會引發面試官的不適）。跟面試官的作法不一樣，因此他直接拿了一組數據讓我在電腦跑，跑的結果是對的。

let arr=[[1,2],[3,4],[5,6]];

init(arr);
fun(arr);

function fun(arr) {
  if(arr.length==1) {
    // console.log(arr[0]);
  }
  else {
    let a=[];
    for(let i=0;i<arr[0].length;i++) {
      for(let j=0;j<arr[1].length;j++) {
        arr[0][i].push(arr[1][j]);
        a.push(arr[0][i])
      }
    }
    console.log(a)
    arr.splice(0,2,a)
    fun(arr);
  }
}

function init(arr) {
  let a=[];
  for(let i=0;i<arr[0].length;i++) {
    for(let j=0;j<arr[1].length;j++) {
      a.push([arr[0][i],arr[1][j]]);
    }
  }
  arr.splice(0,2,a)
}
複製代碼

一口氣從九點半面到十二點多快一點，面試效率很高，一次面完，不須要來回屢次，體驗很好，後續沒有拿到offer，有點遺憾

總結：本身對計算機網絡、算法、框架源代碼掌握的很薄弱，還需增強。

二、某工廠互聯網+部門

一輪技術部門主管面（只有一輪）

面試官不是作前端的有點尷尬，不少時候是在聽我講，時間大約半小時左右。

自我介紹
vue是一個怎麼樣的框架？

答：照搬了官網的介紹，而後講解了一下vue的指令插槽組件等等。

對ajax有什麼理解？

答：講了一下原生ajax以及axios這個庫。

對npm有什麼理解？

答：包管理工具。

對跨域有什麼理解？

答：跟上一家筆試題答的同樣。

現場開電腦看個人博客，而後就給我介紹公司狀況，開發部有後端有IOS有安卓可是沒有前端

總結：面試前最好在網上了解一下公司是作什麼的，技術部門規模大不大之類的，省得白跑一趟。遇到非前端來面前端的儘可能就不要去這個公司了，畢竟對應屆生來講，成長才是最重要的，而有一個好的leader帶你成長可讓你少走不少彎路。

三、某租車公司

一輪hr面

自我介紹
介紹項目
以爲本身是個什麼性格的人？
與其餘人產生爭執的時候怎麼解決？
學習能力怎麼樣，怎麼證實？

答：舉例我花了兩個月考了軟考的網絡工程師，而且拿到了120多分，滿分150

爲何畢設能夠拿那麼高分？

答：從代碼量、項目正式上線、兼容多端等角度講解了一下

感受hr小姐姐還算滿意，因爲本身是應屆生，直接被小姐姐壓了1k指望薪資（o(╯□╰)o）。

二輪技術面

自我介紹
演示谷歌插件以及如何實現的
在上家公司的項目中，本身主要負責的部分是什麼？
position有哪些屬性？

答：static、relative、absolute、fixed、sticky（sticky是粘性定位，有兼容性問題，大多數人會漏掉這個屬性值）。

z-index的做用是什麼？什麼狀況下z-index設置了很大的值的時候仍是會被其餘元素覆蓋？

答：z-index可讓已定位的元素設置層疊的層級，但z-index的效果受限於父元素，即設置了z-index的元素的層疊層級只在父元素內生效。

promise.then()中return undefined時，整個方法返回什麼？

答：rejected狀態的promise對象（妥妥錯了，應該是resolved狀態的promise對象）。

異步宏任務與微任務執行順序問題。

console.log(‘1’);
new Promise(()=> {
	console.log(‘2’);
})
.then(()=> {
	console.log(‘3’)
})
setTimeout(()=> {
	console.log(‘4’)
})
console.log(‘5’)
輸出結果？
複製代碼

輸出1 2 5 3 4。