DXY
最想去的一家公司沟突，參加過他們的技術(shù)分享會(huì)组底，技術(shù)氛圍早有耳聞丈积。不局限于做商業(yè)化的項(xiàng)目，而是會(huì)投入精力去做優(yōu)化流程和提高效率的事情债鸡，開發(fā)開源工具江滨，或者重構(gòu)老舊項(xiàng)目等等
在我問到部門工作流程，第一位面試官說了一句話：在確定好技術(shù)選型后厌均，怎么爽怎么寫唬滑。
這不是程序員的高潮嗎？莫秆！
全程歷時(shí)將近3小時(shí)间雀，是學(xué)到最多的一次面試，也是目前以來被虐的最慘的一次镊屎。
筆試
首先筆試半小時(shí)惹挟，有一些常規(guī)的題目，涵蓋的內(nèi)容有基本數(shù)據(jù)類型缝驳，去重?cái)?shù)組函數(shù)连锯，Dom優(yōu)化方案，行內(nèi)元素有哪些用狱，label的作用（這個(gè)很有意思）运怖，css選擇器的查找方式（從右往左）；css選擇器的優(yōu)先級(jí)夏伊；setTimeout異步流程摇展；函數(shù)this的指向。
也有一些個(gè)人不太確定答案的題目溺忧。其中不熟練的點(diǎn)有正則的聲明咏连，即時(shí)函數(shù)的執(zhí)行流程，操作符優(yōu)先級(jí)鲁森，css偽類選擇器的優(yōu)先級(jí)
將不確定的題目羅列一下
<!--關(guān)于正則 -->
正則聲明的正確選項(xiàng)
<!--console輸出結(jié)果是什么祟滴，考察操作符優(yōu)先級(jí)-->
var a = 1,b =2;
console.log(a+++b)
<!--console輸出結(jié)果是什么，考察即時(shí)函數(shù)的執(zhí)行流程-->
var result = (function(){
return 1;
},function(){
return "2"
})()
console.log(typeof result)
<!--關(guān)于css選擇器優(yōu)先級(jí)排序-->
id class 標(biāo)簽選擇器 屬性值選擇器 偽類選擇器 通配符選擇器 繼承選擇（大概是這幾類的排序）
做完題目檢查了一遍歌溉，然后交給hr垄懂，等待通知。
等的時(shí)候?qū)τ贒OM創(chuàng)建的優(yōu)化那一題突然有了更好的方案
題目是這樣的：
<!--對(duì)下列方法進(jìn)行優(yōu)化-->
var nodeI,m;
var data = [] //這里的data是一組真實(shí)數(shù)據(jù)
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);
}
我在寫的時(shí)候思考了一會(huì)兒，最后只是把container容器的變量提取為了全局草慧，這樣就不需要循環(huán)都去創(chuàng)建一個(gè)變量桶蛔。
但是之后想到應(yīng)該使用innerHTML屬性直接使用字符串添加，這樣的效率是最高的冠蒋，瀏覽器只需要對(duì)元素重排一次羽圃，而不是每次循環(huán)都去重新渲染頁(yè)面一次。
想著想著抖剿，面試官就進(jìn)來了
第一位
一位冷冰冰的大哥，全程沒什么話识窿，很認(rèn)真地在看我?guī)н^去的簡(jiǎn)歷斩郎，以及筆試題。
第一句話就對(duì)我說喻频，你這個(gè)基本數(shù)據(jù)類型寫錯(cuò)了吧缩宜，這么基礎(chǔ)的題
我心想完了不會(huì)跪在這種題目吧。拿過來仔細(xì)看了下甥温，五種類型string,null,number,boolean,undefined沒寫錯(cuò)啊锻煌。面試官說還有object，而Null是屬于object的姻蚓。
我覺得他說的不對(duì)宋梧，于是現(xiàn)場(chǎng)查了下，結(jié)果顯示我寫的應(yīng)該是對(duì)的狰挡，我說了句捂龄，這點(diǎn)之后再求證好了就跳過了這個(gè)話題。
之后加叁，他就開始指了幾道我寫的答案倦沧，問我是怎么思考的。
遇到不會(huì)的它匕，我就說我不確定展融，他也沒告訴我正確答案是什么，我說的對(duì)不對(duì)豫柬。一直都是毫無(wú)波瀾的表情告希。
過完了題目，我開始想展示下寫的項(xiàng)目轮傍，拿出資料以及存在手機(jī)的動(dòng)圖暂雹，他很隨意地看了下，然后說好的我知道了创夜。
之后問有沒有做過h5杭跪，和pc端有什么不同。
我說沒有做過完整的項(xiàng)目，h5在一般在手機(jī)端使用涧尿，點(diǎn)擊事件不太一樣系奉；另外對(duì)頁(yè)面性能要求比較高
看他反應(yīng)想來是對(duì)我的答案不太滿意。
后來問我有沒有做過從0開始配置姑廉，開發(fā)產(chǎn)品缺亮，打包項(xiàng)目，到發(fā)布上線的完整工作流桥言。
我實(shí)話實(shí)說沒有萌踱，因?yàn)楣卷?xiàng)目不需要使用腳手架，也沒有使用打包工具号阿。我自己寫的項(xiàng)目有使用過webpack并鸵，了解一些配置和打包方法，但沒有過發(fā)布項(xiàng)目的經(jīng)驗(yàn)扔涧。（后知后覺园担，他應(yīng)該是想問開發(fā)環(huán)境和生產(chǎn)環(huán)境的配置有什么不一樣）
他說ok了解，然后就問我有沒有什么問題問他的
這句話一般就是想要結(jié)束面試的標(biāo)識(shí)枯夜。我詢問了他們對(duì)這個(gè)崗位的要求弯汰，以及他們的技術(shù)棧。這些點(diǎn)面試官有比較耐心地去解答湖雹，這時(shí)候才感覺出來他是個(gè)有條不紊咏闪，話不多，但是很務(wù)實(shí)的人劝枣。
我感覺應(yīng)該是看過簡(jiǎn)歷以及筆試題之后汤踏，心里已經(jīng)有了預(yù)判覺得水平不夠，所以結(jié)束的非程蛱冢快
他也直說溪胶，他們組缺乏的成員，我這個(gè)水平可能還達(dá)不到稳诚。讓我再等等哗脖，他去溝通下有沒有其他組的人有興趣的。
隨后就出去了扳还。
第一位失敗才避，重點(diǎn)問題整理如下。
- H5和普通PC端有什么不同
- 從0配置到發(fā)布上線的完整流程
- 未來一年對(duì)自己的技術(shù)方向的規(guī)劃
- 對(duì)前端行業(yè)的看法
沒有問我的項(xiàng)目氨距，沒有問解決問題的過程桑逝，沒有問筆試題以外的技術(shù)問題。
二面
第二位面試官俏让，之前有過一些了解楞遏，有關(guān)注他的掘金,一個(gè)高級(jí)前端茬暇，端著電腦進(jìn)來，從頭到尾笑瞇瞇寡喝，還是溫州老鄉(xiāng)糙俗。感覺很親切。偷偷@相學(xué)長(zhǎng)一下预鬓，不知道他會(huì)不會(huì)知道哈哈哈
too young too simple巧骚。我的懷疑人生之路開始了
首先做了簡(jiǎn)單的自我介紹，在自我介紹里我趕緊趁機(jī)講了下我做過的項(xiàng)目格二，使用的技術(shù)點(diǎn)劈彪，以及一些比較有趣的小demo，都是上場(chǎng)面試中沒來得及展示的
他有仔細(xì)聽顶猜，有沒有評(píng)價(jià)我也忘了粉臊。和上一位面試官一樣沒有過多的表示∈欢担或許是因?yàn)閷?duì)JQ的項(xiàng)目興趣不大吧。
接著又回到了筆試題上远寸，我就搶先說了應(yīng)該是錯(cuò)了不少抄淑，而且有道題我后來有想到更好的優(yōu)化方案。
1. 我闡述了我的方案
<!--對(duì)下列方法進(jìn)行優(yōu)化-->
var nodeI,m;
var data = [] //這里的data是一組真實(shí)數(shù)據(jù)
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：為什么這樣更好呢驰后。
我說只在最后一步把內(nèi)容加到頁(yè)面中肆资，減少了瀏覽器重排重繪的次數(shù)
他立刻問2：什么是重排重繪？
前兩天剛看到了這個(gè)概念灶芝，講了下自己的理解郑原。重排是需要重新分析頁(yè)面元素尺寸；重繪是元素樣式的改變
問3：什么情況下會(huì)導(dǎo)致重排重繪夜涕？
我說頁(yè)面布局被修改或者重新渲染的時(shí)候犯犁。
問4：能不能再具體點(diǎn)
當(dāng)時(shí)沒理get到他想要的答案，我就又重復(fù)了一遍女器。他應(yīng)該是想問怎樣算是布局被修改吧
標(biāo)準(zhǔn)答案：
- 添加或者刪除可見的DOM元素
- 元素位置改變
- 元素尺寸改變
- 元素內(nèi)容改變（例如：一個(gè)文本被另一個(gè)不同尺寸的圖片替代）
- 頁(yè)面渲染初始化（這個(gè)無(wú)法避免）
- 瀏覽器窗口尺寸改變
問5：v-show元素的顯示和隱藏算是重排嗎?
我說算酸役。我的答案應(yīng)該是對(duì)的，但他應(yīng)該是希望我能答出“添加或者刪除可見的dom元素屬于重排”這句話驾胆，v-show是設(shè)置了css的屬性涣澡，是算重排的
接著基本上開始一道道過筆試題，以及在原來題目基礎(chǔ)上擴(kuò)展丧诺。
2. setTimeout的異步執(zhí)行
原題如下
<!--執(zhí)行結(jié)果是什么-->
var a = 2;
setTimeout(function(){
a--;
});
a++
console.log(a);
題目還是比較簡(jiǎn)單入桂，最終輸出的是3.
變態(tài)的來了
問1：如果外面的a++循環(huán)一百萬(wàn)次呢，順序如何驳阎？
答抗愁，還是一樣馁蒂，setTimeout在后面
問2：為什么會(huì)這樣？
（標(biāo)準(zhǔn)答案：同步會(huì)阻塞進(jìn)程驹愚。）
這里稍微有點(diǎn)答非所問了远搪，我受到近期看的一篇文章影響一直在強(qiáng)調(diào)同步異步和阻塞非阻塞的區(qū)別，異步是執(zhí)行完了告訴你逢捺，同步是等待你執(zhí)行完谁鳍；堵塞是瀏覽器一直在請(qǐng)求是否完成澈驼。我也不知道我在說啥堡称，我估計(jì)他也不知道我在說啥 - -）
問3：知道promise嗎愉棱，寫了一個(gè)promise對(duì)象改淑，混合setTimeout方法泼差，要求判斷輸出的先后順序
知道一點(diǎn)留瞳，曾經(jīng)看到過類似的題目奸汇，但是時(shí)間比較久了不太記得坷虑，被我蒙對(duì)了
問4：為什么會(huì)這樣伺绽？
根據(jù)我的理解簡(jiǎn)單講了下事件循環(huán)機(jī)制
更多可以參照這兩篇文章：
這一次养泡，徹底弄懂 JavaScript 執(zhí)行機(jī)制
深入淺出JavaScript事件循環(huán)機(jī)制
問6：給你一個(gè)需求讓你寫吧。有一個(gè)實(shí)時(shí)搜索的搜索框奈应，連續(xù)輸入的時(shí)候不觸發(fā)實(shí)時(shí)搜索澜掩，當(dāng)用戶停下來1s以上時(shí)，再顯示搜索結(jié)果
電腦一擺杖挣，讓我敲肩榕。
十臉懵逼說的就是我
不過其實(shí)這個(gè)需求不應(yīng)該寫不出來，之前做過的導(dǎo)航優(yōu)化用的也是這個(gè)方法惩妇，在規(guī)定時(shí)間內(nèi)未執(zhí)行事件株汉，就使用clearTimeout清空計(jì)時(shí)器。不過當(dāng)時(shí)死腦筋陷入了時(shí)間戳歌殃，沒往這方面想乔妈。
正確寫法
var time = null;
input.addEventListener("input",()=>{
cleartimeout(time);
time = setTimeout(()=>{
seach();
})
})
學(xué)長(zhǎng)說如果這只是開始，如果能答出來還可以接著問抽象挺份，不過我第一步就沒答出來
淚奔~~~~
3. 對(duì)this的理解
原題是讓選擇正確的調(diào)用方法褒翰，也比較簡(jiǎn)單，正確選項(xiàng)長(zhǎng)這樣
var opt = {
name:"Amy",
say:function(){return this.name}
}
擴(kuò)展開始
問1：怎么理解函數(shù)中的this
指向調(diào)用函數(shù)的對(duì)象
問2：箭頭函數(shù)的this呢
額匀泊。不改變this指向优训，函數(shù)外部指向哪里就是哪里
問3：setTimeout函數(shù)里面的呢
指向全局
問4：我把上面的增加一個(gè)name2:this.name輸出什么？
undefined..（更確切地說各聘，根據(jù)執(zhí)行環(huán)境不同揣非，輸出結(jié)果也不同。這里的this指向全局躲因，瀏覽器中的window.name其實(shí)是存在的早敬，一般來說是空字符串）
我把say方法改成這樣會(huì)如何
say:function(){
setTimeout(function(){return this.name})
}
問5：改成這樣呢
say:function(){
setTimeout(()=>{return this.name})
}
只能說一定要自信忌傻，雖然對(duì)于this是理解的，但是問到后面我已經(jīng)沒底氣了搞监，都不太敢說水孩。
最后兩個(gè)問題我都忘了自己當(dāng)時(shí)怎么說的了，正確答案都是undefined琐驴，因?yàn)樵趫?zhí)行say()的時(shí)候函數(shù)上下文為全局了
4.跨域
原題是讓寫幾個(gè)跨域方案
我寫了cors,jsonp,window.name
問1：jsonp是怎么實(shí)現(xiàn)的
我說通過script標(biāo)簽引入
問2：為什么可以這么用俘种，數(shù)據(jù)怎么返回的？
我說script標(biāo)簽是可以跨域訪問CDN的
標(biāo)準(zhǔn)答案：JSONP 由兩部分組成：回調(diào)函數(shù)和數(shù)據(jù)绝淡≈媪酰回調(diào)函數(shù)是當(dāng)響應(yīng)到來時(shí)應(yīng)該在頁(yè)面中調(diào)用的函數(shù)±谓停回調(diào)函數(shù)的名字一般是在請(qǐng)求中指定的悬包。而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的 JSON 數(shù)據(jù)。
問3：window.name的局限
只能在同一窗口馍乙，大小2m
問3：知道localstorge和sessionstorge的區(qū)別嗎
local是關(guān)閉窗口還會(huì)存在布近，數(shù)據(jù)永久保存，除非去清除瀏覽器緩存丝格，session關(guān)閉窗口就清空了了
問4：localstorge和域名有關(guān)嗎吊输，sessionstorge呢
相同瀏覽器的條件下，local在同一域名和端口下是可以共享的铁追，而不同頁(yè)面無(wú)法共享session的數(shù)據(jù)
（注：如果同源，且屬于一個(gè)窗口下的iframe茫船，session也是共享的）
4. 關(guān)于vue
首先問了幾個(gè)關(guān)于vue的基本問題
拓展開始
問1：你覺得vue和JQ相比琅束，有什么優(yōu)勢(shì)
我說了維護(hù)更方便，以及數(shù)據(jù)渲染頁(yè)面的方式使邏輯和頁(yè)面分離算谈，更加高效
他好像不太滿意涩禀，又追問了一遍。
我說有兩個(gè)最大的優(yōu)勢(shì)然眼，一個(gè)是雙向綁定艾船，一個(gè)是組件。他點(diǎn)了點(diǎn)頭高每，然后繼續(xù)問：
問2：vue的雙向綁定的原理是什么
我說在改變輸入框的屬性時(shí)實(shí)際上是在調(diào)用defineProperty的get和set方法(更專業(yè)的說法叫wacher),在方法里面去修改綁定的元素的值屿岂。
問3 ：虛擬dom有了解嗎
知道..不怎么了解
問4：寫的時(shí)候?yàn)槭裁磀ata不直接返回對(duì)象數(shù)據(jù)，而是要用函數(shù)的形式return出結(jié)果鲸匿？
恩....不了解
問56789：啊我已經(jīng)說了不了解了所以之后的問題已經(jīng)不知道他在問什么了...
不過他就開始跟我講虛擬dom的工作原理爷怀，然后還時(shí)不時(shí)問幾個(gè)問題，你覺得他是怎么做到的带欢？如果是你會(huì)怎么實(shí)現(xiàn)运授？
中途扔了一個(gè)問題給我烤惊，虛擬DOM的是這么檢測(cè)到代碼已經(jīng)執(zhí)行完了，然后插入真實(shí)的Dom中的吁朦。允許我查資料柒室，他去洗手間。
短時(shí)間內(nèi)我也并沒有查出什么東西逗宜，然后他回來了跟我解釋雄右。
大概意思是，vue里面有一個(gè)類似于setTimeout的異步機(jī)制锦溪，在所有同步進(jìn)程執(zhí)行完后不脯，執(zhí)行這個(gè)異步操作，作為這段進(jìn)程結(jié)束的標(biāo)識(shí)刻诊。
類似于剛剛問的a++一萬(wàn)次防楷，setTimeout依然在最后執(zhí)行。
恩...不明覺厲
6. 關(guān)于js原生
問1：怎么去實(shí)現(xiàn)查找元素的find方法则涯？
沒見過這種類型的題目复局，所以想了一會(huì)兒，然后弱雞地說遍歷啊...
問2：他說遍歷子節(jié)點(diǎn)只能遍歷一層啊粟判，那子節(jié)點(diǎn)的子節(jié)點(diǎn)呢亿昏？
繼續(xù)弱雞地說，遞歸呀...
問3：還有什么更有效率的方法可以代替遍歷档礁？
不知道哎角钩。。
他引導(dǎo)了我半天呻澜，才說有方法叫querySelector()知道嗎递礼，我說知道的，見過但是沒去了解過羹幸。
他開始跟我說這個(gè)效率是最高的脊髓，我問為啥，他說因?yàn)榈讓泳筒皇怯胘s寫的栅受，我不明覺厲将硝，表示驚嘆。然而心中默默吐槽屏镊，你特么不是要我寫個(gè)方法嗎依疼！不能這么開外掛的！
ps：后來特意去查了下而芥，發(fā)現(xiàn)他說的不對(duì)啊涛贯，這個(gè)方法的性能還是比不上js原生getElementById的，不過和jq相比蔚出，還是快非常多弟翘，特意測(cè)試了下
//測(cè)試代碼
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.關(guān)于css：
1. 行內(nèi)元素怎么設(shè)置垂直居中虫腋，塊級(jí)元素呢，舉三種方法
我說了四種方法：
- 常用的絕對(duì)定位
- flex布局稀余，然而flex布局的屬性名記不清了
- 還有display設(shè)置為table
- 使用transform或者margin往回移動(dòng)50%
2. 清除浮動(dòng)都有哪些方法
說了both-clear和overflow：hidden兩種方法
3. nth-of-child和nth-of-type的區(qū)別
nth-of-child：查找位置優(yōu)先
nth-of-type：查找元素優(yōu)先
4. 怎么實(shí)現(xiàn)在兩個(gè)元素中間有空位時(shí)悦冀，移到另一個(gè)元素依然讓其顯示
我說可以用css3動(dòng)畫實(shí)現(xiàn)。
他問還有沒有其他的方法
沒答上來睛琳，就算是他的解釋也沒法讓我理解盒蟆，怎么做到對(duì)一個(gè)元素hover之后去設(shè)置另一個(gè)元素的display屬性？师骗？不用js能實(shí)現(xiàn)历等？
5. 怎么實(shí)現(xiàn)三角形，為什么會(huì)有這種現(xiàn)象辟癌？
將元素寬高設(shè)為0寒屯，然后邊框只保留一邊，另外三邊設(shè)為透明黍少。畫了個(gè)圖說明原因寡夹。
6. 怎么對(duì)三角形設(shè)置陰影
我說用filter中的drop-shadow屬性，他問為什么厂置，還有什么做法菩掏，我想了一下說可以直接再寫個(gè)三角形放在下面，還可以寫個(gè)矩形然后旋轉(zhuǎn)下
關(guān)于css我覺得答得還可以昵济，包括后來的反饋也是說擅長(zhǎng)css智绸。不過也可能因?yàn)榈阶詈罅嗣嬖嚬賾械迷僬归_了。
8.最后問了平時(shí)是怎么學(xué)習(xí)的
我說看視頻访忿，看書
問：看什么書
我說最近看了dom編程藝術(shù)和js面向?qū)ο?/p>
他馬上問：繼承有哪幾種方式
我講了我理解的兩種传于，我看的那本書中寫了十幾種繼承方式
問：知道class嗎
我說知道一些
問：和構(gòu)造函數(shù)有區(qū)別嗎
有區(qū)別，他的屬性的是不可枚舉的
這部分應(yīng)該是答得不怎么樣了醉顽，沒有使用過，只不過以前粗略地瀏覽過一遍文檔平挑，估計(jì)因?yàn)橐呀?jīng)面試了很長(zhǎng)時(shí)間所以也沒多做展開游添。
面試就告一段落。
總結(jié)
以上為問題記錄通熄，有些問題很簡(jiǎn)單唆涝，篇幅問題就沒一一寫出來了；還有些問題實(shí)在是超出了理解范圍唇辨，都不知道他在問什么廊酣。只能憑借短期記憶復(fù)述他的原話，忘了也很無(wú)力啊
高級(jí)前端的角度就是赏枚，你不僅僅要會(huì)用亡驰，還要知道為什么要這么用晓猛。
最后他問了我還有什么想問他的。我當(dāng)時(shí)傻逼地問了我表現(xiàn)怎么樣凡辱，他說一般戒职，不算好也不算差
其實(shí)我更想問他你是怎么學(xué)習(xí)的，以及對(duì)我的發(fā)展有什么建議透乾。
當(dāng)時(shí)被問的有些絕望洪燥，只想知道自己有沒有戲
技術(shù)總監(jiān)
因?yàn)橐呀?jīng)到了他們的下班時(shí)間了，總監(jiān)就問了2個(gè)問題
1. 為什么你們公司還在用JQ（目前部門就我一個(gè)人全職寫前端實(shí)在是沒有人手去重構(gòu)項(xiàng)目叭槲凇Ｅ踉稀）
2. 你覺得自己在技術(shù)方面的優(yōu)勢(shì)是什么
我只能極力表達(dá)自己的學(xué)習(xí)能力，畢竟工作時(shí)間不長(zhǎng)汉操，而且面試表現(xiàn)也不算太好再来，同時(shí)跟他們的技術(shù)棧不符。
但面試時(shí)百分之90的問題都是我在工作之余的學(xué)習(xí)成果客情，如果局限于公司的業(yè)務(wù)其弊，很多新的概念我是接觸不到的。
最后還是個(gè)等通知的結(jié)果膀斋。只能說這是一個(gè)全憑實(shí)力說話的地方梭伐，不看你工作年限的多少，不看你的性格仰担，也沒人想要去了解你的潛力糊识，很現(xiàn)實(shí)的投入產(chǎn)出比問題，只看你現(xiàn)在能不能為他們產(chǎn)生價(jià)值摔蓝。
不過沒關(guān)系赂苗，收獲很多，繼續(xù)努力吧嘿~
