一年前端面試打怪升級之路（二）

傳送門：

一年前端面試打怪升級之路（一）

一年前端面試打怪升級之路（二）

一年前端面試打怪升級之路（三）

對於DXY的面試印象最深入最難忘，因此就詳細地列一個單獨的篇幅吧

DXY

最想去的一家公司，參加過他們的技術分享會，技術氛圍早有耳聞。不侷限於作商業化的項目，而是會投入精力去作優化流程和提升效率的事情，開發開源工具，或者重構老舊項目等等

在我問到部門工做流程，第一位面試官說了一句話：在肯定好技術選型後，怎麼爽怎麼寫。

這不是程序員的高潮嗎？！

全程歷時將近3小時，是學到最多的一次面試，也是目前以來被虐的最慘的一次。

筆試

首先筆試半小時，有一些常規的題目，涵蓋的內容有基本數據類型，去重數組函數，Dom優化方案，行內元素有哪些，label的做用（這個頗有意思），css選擇器的查找方式（從右往左）；css選擇器的優先級；setTimeout異步流程；函數this的指向。

也有一些我的不太肯定答案的題目。其中不熟練的點有正則的聲明，即時函數的執行流程，操做符優先級，css僞類選擇器的優先級

將不肯定的題目羅列一下

<!--關於正則 -->
正則聲明的正確選項

<!--console輸出結果是什麼，考察操做符優先級-->
var a = 1,b =2;
console.log(a+++b)

<!--console輸出結果是什麼，考察即時函數的執行流程-->
var result = (function(){
    return 1;
},function(){
    return "2"
})()
console.log(typeof result)

<!--關於css選擇器優先級排序-->
id class 標籤選擇器 屬性值選擇器  僞類選擇器  通配符選擇器 繼承選擇（大概是這幾類的排序）

複製代碼

作完題目檢查了一遍，而後交給hr，等待通知。

等的時候對於DOM建立的優化那一題忽然有了更好的方案

題目是這樣的：

<!--對下列方法進行優化-->
var nodeI,m;
var data = [] //這裏的data是一組真實數據
for(var i = 0,m = data.length ; i<m ; i++){
    nodeI = document.creatElement("li");
    nodeI.noteText = data[i];
    var con = document.getElementById("container");
    con.appendChild(nodeI);   
}
複製代碼

我在寫的時候思考了一下子，最後只是把container容器的變量提取爲了全局，這樣就不須要循環都去建立一個變量。

可是以後想到應該使用innerHTML屬性直接使用字符串添加，這樣的效率是最高的，瀏覽器只須要對元素重排一次，而不是每次循環都去從新渲染頁面一次。

想着想着，面試官就進來了

第一位

一位冷冰冰的大哥，全程沒什麼話，很認真地在看我帶過去的簡歷，以及筆試題。

第一句話就對我說，你這個基本數據類型寫錯了吧，這麼基礎的題

我心想完了不會跪在這種題目吧。拿過來仔細看了下，五種類型string,null,number,boolean,undefined沒寫錯啊。面試官說還有object，而Null是屬於object的。

我以爲他說的不對，因而現場查了下，結果顯示我寫的應該是對的，我說了句，這點以後再求證好了就跳過了這個話題。

以後，他就開始指了幾道我寫的答案，問我是怎麼思考的。

遇到不會的，我就說我不肯定，他也沒告訴我正確答案是什麼，我說的對不對。一直都是毫無波瀾的表情。

過完了題目，我開始想展現下寫的項目，拿出資料以及存在手機的動圖，他很隨意地看了下，而後說好的我知道了。

以後問有沒有作過h5，和pc端有什麼不一樣。

我說沒有作過完整的項目，h5在通常在手機端使用，點擊事件不太同樣；另外對頁面性能要求比較高

看他反應想來是對個人答案不太滿意。

後來問我有沒有作過從0開始配置，開發產品，打包項目，到發佈上線的完整工做流。

我實話實說沒有，由於公司項目不須要使用腳手架，也沒有使用打包工具。我本身寫的項目有使用過webpack，瞭解一些配置和打包方法，但沒有過發佈項目的經驗。（後知後覺，他應該是想問開發環境和生產環境的配置有什麼不同）

他說ok瞭解，而後就問我有沒有什麼問題問他的

這句話通常就是想要結束面試的標識。我詢問了他們對這個崗位的要求，以及他們的技術棧。這些點面試官有比較耐心地去解答，這時候才感受出來他是個有條不紊，話很少，可是很務實的人。

我感受應該是看過簡歷以及筆試題以後，內心已經有了預判以爲水平不夠，因此結束的很是快

他也直說，他們組缺少的成員，我這個水平可能還達不到。讓我再等等，他去溝通下有沒有其餘組的人有興趣的。

隨後就出去了。

第一位失敗，重點問題整理以下。

1. H5和普通PC端有什麼不一樣
2. 從0配置到發佈上線的完整流程
3. 將來一年對本身的技術方向的規劃
4. 對前端行業的見解

沒有問個人項目，沒有問解決問題的過程，沒有問筆試題之外的技術問題。

二面

第二位面試官，以前有過一些瞭解，有關注他的掘金,一個高級前端，端着電腦進來，從頭至尾笑眯眯，仍是溫州老鄉。感受很親切。偷偷@相學長一下，不知道他會不會知道哈哈哈

too young too simple。個人懷疑人生之路開始了

首先作了簡單的自我介紹，在自我介紹裏我趕忙趁機講了下我作過的項目，使用的技術點，以及一些比較有趣的小demo，都是上場面試中沒來得及展現的

他有仔細聽，有沒有評價我也忘了。和上一位面試官同樣沒有過多的表示。或許是由於對JQ的項目興趣不大吧。

接着又回到了筆試題上，我就搶先說了應該是錯了很多，並且有道題我後來有想到更好的優化方案。

1. 我闡述了個人方案

<!--對下列方法進行優化-->
var nodeI,m;
var data = [] //這裏的data是一組真實數據
var html = "";
var con = document.getElementById("container");
for(var i = 0,m = data.length ; i<m ; i++){
    html += "<li>"+data[i]+"</li>"
}
con.innerHTML = html;
複製代碼

問1：爲何這樣更好呢。

我說只在最後一步把內容加到頁面中，減小了瀏覽器重排重繪的次數

他馬上問2：什麼是重排重繪？

前兩天剛看到了這個概念，講了下本身的理解。重排是須要從新分析頁面元素尺寸；重繪是元素樣式的改變

問3：什麼狀況下會致使重排重繪？

我說頁面佈局被修改或者從新渲染的時候。

問4：能不能再具體點

當時沒理get到他想要的答案，我就又重複了一遍。他應該是想問怎樣算是佈局被修改吧

標準答案：

1. 添加或者刪除可見的DOM元素
2. 元素位置改變
3. 元素尺寸改變
4. 元素內容改變（例如：一個文本被另外一個不一樣尺寸的圖片替代）
5. 頁面渲染初始化（這個沒法避免）
6. 瀏覽器窗口尺寸改變

問5：v-show元素的顯示和隱藏算是重排嗎?

我說算。個人答案應該是對的，但他應該是但願我能答出「添加或者刪除可見的dom元素屬於重排」這句話，v-show是設置了css的屬性，是算重排的

接着基本上開始一道道過筆試題，以及在原來題目基礎上擴展。

2. setTimeout的異步執行

原題以下

<!--執行結果是什麼-->
var a = 2;
setTimeout(function(){
   a--;
});
a++
console.log(a);
複製代碼

題目仍是比較簡單，最終輸出的是3.

變態的來了

問1：若是外面的a++循環一百萬次呢，順序如何？

答，仍是同樣，setTimeout在後面

問2：爲何會這樣？

（標準答案：同步會阻塞進程。）

這裏稍微有點答非所問了，我受到近期看的一篇文章影響一直在強調同步異步和阻塞非阻塞的區別，異步是執行完了告訴你，同步是等待你執行完；堵塞是瀏覽器一直在請求是否完成。我也不知道我在說啥，我估計他也不知道我在說啥 - -）

問3：知道promise嗎，寫了一個promise對象，混合setTimeout方法，要求判斷輸出的前後順序

知道一點，曾經看到過相似的題目，可是時間比較久了不太記得，被我蒙對了

問4：爲何會這樣？

根據個人理解簡單講了下事件循環機制

更多能夠參照這兩篇文章：

這一次，完全弄懂 JavaScript 執行機制

深刻淺出JavaScript事件循環機制

問6：給你一個需求讓你寫吧。有一個實時搜索的搜索框，連續輸入的時候不觸發實時搜索，當用戶停下來1s以上時，再顯示搜索結果

電腦一擺，讓我敲。

十臉懵逼說的就是我

不過其實這個需求不該該寫不出來，以前作過的導航優化用的也是這個方法，在規定時間內未執行事件，就使用clearTimeout清空計時器。不過當時死腦筋陷入了時間戳，沒往這方面想。

正確寫法

var time = null;
input.addEventListener("input",()=>{
    cleartimeout(time);
    time = setTimeout(()=>{
        seach();
    })
})
複製代碼

學長說若是這只是開始，若是能答出來還能夠接着問抽象，不過我第一步就沒答出來

淚奔~~~~

3. 對this的理解

原題是讓選擇正確的調用方法，也比較簡單，正確選項長這樣

var opt = {
    name:"Amy",
    say:function(){return this.name}
}
複製代碼

擴展開始

問1：怎麼理解函數中的this

指向調用函數的對象

問2：箭頭函數的this呢

額。不改變this指向，函數外部指向哪裏就是哪裏

問3：setTimeout函數裏面的呢

指向全局

問4：我把上面的增長一個name2:this.name輸出什麼？

undefined..（更確切地說，根據執行環境不一樣，輸出結果也不一樣。這裏的this指向全局，瀏覽器中的window.name實際上是存在的，通常來講是空字符串）

我把say方法改爲這樣會如何

say:function(){
    setTimeout(function(){return this.name})
}
複製代碼

問5：改爲這樣呢

say:function(){
    setTimeout(()=>{return this.name})
}
複製代碼

只能說必定要自信，雖然對於this是理解的，可是問到後面我已經沒底氣了，都不太敢說。

最後兩個問題我都忘了本身當時怎麼說的了，正確答案都是undefined，由於在執行say()的時候函數上下文爲全局了

4.跨域

原題是讓寫幾個跨域方案

我寫了cors,jsonp,window.name

問1：jsonp是怎麼實現的

我說經過script標籤引入

問2：爲何能夠這麼用，數據怎麼返回的？

我說script標籤是能夠跨域訪問CDN的

標準答案：JSONP 由兩部分組成：回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字通常是在請求中指定的。而數據就是傳入回調函數中的 JSON 數據。

問3：window.name的侷限

只能在同一窗口，大小2m

問3：知道localstorge和sessionstorge的區別嗎

local是關閉窗口還會存在，數據永久保存，除非去清除瀏覽器緩存，session關閉窗口就清空了了

問4：localstorge和域名有關嗎，sessionstorge呢

相同瀏覽器的條件下，local在同一域名和端口下是能夠共享的，而不一樣頁面沒法共享session的數據 （注：若是同源，且屬於一個窗口下的iframe，session也是共享的）

4. 關於vue

首先問了幾個關於vue的基本問題

拓展開始

問1：你以爲vue和JQ相比，有什麼優點

我說了維護更方便，以及數據渲染頁面的方式使邏輯和頁面分離，更加高效

他好像不太滿意，又追問了一遍。

我說有兩個最大的優點，一個是雙向綁定，一個是組件。他點了點頭，而後繼續問：

問2：vue的雙向綁定的原理是什麼

我說在改變輸入框的屬性時其實是在調用defineProperty的get和set方法(更專業的說法叫wacher),在方法裏面去修改綁定的元素的值。

問3 ：虛擬dom有了解嗎

知道..不怎麼了解

問4：寫的時候爲何data不直接返回對象數據，而是要用函數的形式return出結果？

恩....不瞭解

問56789：啊我已經說了不瞭解了因此以後的問題已經不知道他在問什麼了...

不過他就開始跟我講虛擬dom的工做原理，而後還時不時問幾個問題，你以爲他是怎麼作到的？若是是你會怎麼實現？

中途扔了一個問題給我，虛擬DOM的是這麼檢測到代碼已經執行完了，而後插入真實的Dom中的。容許我查資料，他去洗手間。

短期內我也並無查出什麼東西，而後他回來了跟我解釋。

大概意思是，vue裏面有一個相似於setTimeout的異步機制，在全部同步進程執行完後，執行這個異步操做，做爲這段進程結束的標識。

相似於剛剛問的a++一萬次，setTimeout依然在最後執行。

恩...不明覺厲

6. 關於js原生

問1：怎麼去實現查找元素的find方法？

沒見過這種類型的題目，因此想了一下子，而後弱雞地說遍歷啊...

問2：他說遍歷子節點只能遍歷一層啊，那子節點的子節點呢？

繼續弱雞地說，遞歸呀...

問3：還有什麼更有效率的方法能夠代替遍歷？

不知道哎。。

他引導了我半天，才說有方法叫querySelector()知道嗎，我說知道的，見過可是沒去了解過。

他開始跟我說這個效率是最高的，我問爲啥，他說由於底層就不是用js寫的，我不明覺厲，表示驚歎。然而心中默默吐槽，你特麼不是要我寫個方法嗎！不能這麼開外掛的！

ps：後來特地去查了下，發現他說的不對啊，這個方法的性能仍是比不上js原生getElementById的，不過和jq相比，仍是快很是多，特地測試了下

//測試代碼
console.time('$(".item")');
for (var i = 0; i < 10000; i++) {
  $(".item");
}
console.timeEnd('$(".item")');
//$(".item"): 56.569091796875ms

console.time('querySelectorAll');
for (var i = 0; i < 10000; i++) {
  document.querySelectorAll(".item");
}
console.timeEnd('querySelectorAll');
//querySelectorAll: 1781ms

console.time('getElementsByClassName');
for (var i = 0; i < 10000; i++) {
  document.getElementsByClassName("item");
}
console.timeEnd('getElementsByClassName');
//getElementsByClassName: 54ms

複製代碼

7.關於css：

1. 行內元素怎麼設置垂直居中，塊級元素呢，舉三種方法

我說了四種方法：

1. 經常使用的絕對定位
2. flex佈局，然而flex佈局的屬性名記不清了
3. 還有display設置爲table
4. 使用transform或者margin往回移動50%

2. 清除浮動都有哪些方法

說了both-clear和overflow：hidden兩種方法

3. nth-of-child和nth-of-type的區別

nth-of-child：查找位置優先 nth-of-type：查找元素優先

4. 怎麼實如今兩個元素中間有空位時，移到另外一個元素依然讓其顯示

我說能夠用css3動畫實現。

他問還有沒有其餘的方法

沒答上來，就算是他的解釋也無法讓我理解，怎麼作到對一個元素hover以後去設置另外一個元素的display屬性？？不用js能實現？

5. 怎麼實現三角形，爲何會有這種現象？

將元素寬高設爲0，而後邊框只保留一邊，另外三邊設爲透明。畫了個圖說明緣由。

6. 怎麼對三角形設置陰影

我說用filter中的drop-shadow屬性，他問爲何，還有什麼作法，我想了一下說能夠直接再寫個三角形放在下面，還能夠寫個矩形而後旋轉下

關於css我以爲答得還能夠，包括後來的反饋也是說擅長css。不過也可能由於到最後了面試官懶得再展開了。

8.最後問了平時是怎麼學習的

我說看視頻，看書

問：看什麼書

我說最近看了dom編程藝術和js面向對象

他立刻問：繼承有哪幾種方式

我講了我理解的兩種，我看的那本書中寫了十幾種繼承方式

問：知道class嗎

我說知道一些

問：和構造函數有區別嗎

有區別，他的屬性的是不可枚舉的

這部分應該是答得不怎麼樣了，沒有使用過，只不過之前粗略地瀏覽過一遍文檔，估計由於已經面試了很長時間因此也沒多作展開。

面試就告一段落。

總結

以上爲問題記錄，有些問題很簡單，篇幅問題就沒一一寫出來了；還有些問題實在是超出了理解範圍，都不知道他在問什麼。只能憑藉短時間記憶複述他的原話，忘了也很無力啊

高級前端的角度就是，你不只僅要會用，還要知道爲何要這麼用。

最後他問了我還有什麼想問他的。我當時傻逼地問了我表現怎麼樣，他說通常，不算好也不算差

其實我更想問他你是怎麼學習的，以及對個人發展有什麼建議。

當時被問的有些絕望，只想知道本身有沒有戲

技術總監

由於已經到了他們的下班時間了，總監就問了2個問題

1. 爲何大家公司還在用JQ（目前部門就我一我的全職寫前端實在是沒有人手去重構項目啊！）

2. 你以爲本身在技術方面的優點是什麼

我只能極力表達本身的學習能力，畢竟工做時間不長，並且面試表現也不算太好，同時跟他們的技術棧不符。

但面試時百分之90的問題都是我在工做之餘的學習成果，若是侷限於公司的業務，不少新的概念我是接觸不到的。

最後仍是個等通知的結果。只能說這是一個全憑實力說話的地方，不看你工做年限的多少，不看你的性格，也沒人想要去了解你的潛力，很現實的投入產出比問題，只看你如今能不能爲他們產生價值。

不過不要緊，收穫不少，繼續努力吧嘿~