終於到了可以實習的時候，然而這時候大部分實習只面向2017屆的，據說原因是2016屆的校招名額已滿，所以爲了不耽誤你的校招（因爲你可能想通過實習轉正什麼的），還是不招2016屆的學生了。儘管如此，還是得找啊，於是各種投簡歷。前幾天投了一個百度的WEB前端實習生崗位，然後今天下午去面試。記錄一下吧～
一面
一面是技術面，其實二面也是。前端的面試基本就是HTML+Javascript+CSS，然後附帶有一些算法/策略/智力題的吧。
1.簡單自我介紹一下吧
此處省略。。。
2.先說一下你的這些項目吧，你在哪些環節參與了前端開發，大概都是些什麼形式？期間用到了哪些東西？
我在這些項目中與前端相關的工作大都與後臺管理模塊相關，我負責設計和開發這些管理平臺。其中用到一些框架，比如jQuery/Bootstrap/fontAwesome等，還用過一個基於Bootstrap的後臺框架SB Admin，其中集成了一些如百度的echarts等圖標類的插件，用起來比較方便。我以前在做的時候都會自己來搭這樣的框架，但是這些項目裏由於工期比較緊，因此選擇使用已有的框架來開發。
3.那你們一般是怎麼處理服務端，我看你們是一個APP，你做的後臺模塊和與APP交互的服務模塊是一個工程還是兩個？
第一個項目裏，我們是分開的；第二個我們是同一個工程。
4.那你們的接口一般怎麼來定義？
一般是由我來設計，包括請求的URL，以及參數，還有方法調用的返回值，以JSON對象的形式給出。
5.嗯，好，下面我問你幾個問題。CSS裏，如何實現隱藏？
設置visibility爲hidden，display設爲none，還有jQuery的hide方法（實際上還是display設爲none）。
6.這兩者有什麼區別嗎？
visibility設爲hidden的話，元素的空間還留着，有一個空白；display設爲none時，空間也被隱藏了。
7.position有哪些值，都是什麼含義？
absolute，絕對定位，相對於上一個絕對元素（這裏錯了，實際上是生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位，參見CSS position 屬性）。
relative，相對佈局，與在文檔中的順序和其他設定有關。
fixed，相對於窗口來定位。
8.還有其他的沒？
我只瞭解到這些。（實際上還有static和inherit）。
9.我如何在界面上取到一個元素啊？
可以用document.getElementById()/document.getElementsByTagName()等這樣的方法，或者用jQuery裏更加豐富的選擇器，可以用類/僞類以及一些更高級的疊加在一起的選擇器，可以同時選取多個對象。
10.那我用原生的方法和jQuery方法獲取到的對象有什麼不同嗎？
原生方法獲取到的是DOM對象，jQuery方法獲取到的是jQuery對象，兩者上面各自有一些不同的屬性或者方法。
11.如果有一個form表單，你給我寫一下大概都有哪些屬性需要設置，才能正確使用。
這個地方把form裏的 action method enctype等屬性都說了一下，然後各種常見的表單元素，input radio button checkbox select 都說了以下，還有input域的name啊value什麼的全說了一遍，估計面試官就是想看你到底熟不熟悉HTML吧。
12.那如果我想提交這個表單怎麼辦？
可以用submit按鈕來提交，或者我們自己寫一個其他的監聽，比如監聽一個button，我們來ajax提交。
13.我提交的時候數據是怎麼發送的？過程如何？
如果是get的話，它會把所有的域以參數的形式添加在目標url後面。然後服務器會返回一個響應，比如可能是跳轉。
你寫一下大概是什麼形式
url?key1=value1&key2=value2&…
key和value分別是啥？
key是表單裏域的name，value是輸入的值。
14.那如何ajax提交？
我們可以監聽一個時間比如button點擊，然後再使用HTTP請求發送數據即可。
怎麼拿到數據呢？
可以獲取那個表單對象，然後可以直接用form.data把其中的數據作爲ajax方法的參數來發送。
15.跨域訪問該怎麼實現？
跨域是與同源策略相關，我瞭解到的有大概兩類。第一類是不嚴格的同源策略，設定window.domain的值，如果相同就認爲同源；第二個是CORS（Crossing Origin Resourse Sharing）跨域資源共享，它是在服務器端給頭部里加了多個源或者通配符來實現的；第三個是HTML5的新特性，CDM（Cross Document Messaging）跨文檔通信（postMessage+監聽message）；這一類的其實還是同一個源。如果真的要用跨域的話，比如JSONP，用script對象來發送請求，然後對結果還可以執行。
JSONP這種具體是怎麼實現的？原理是什麼？
黨我們給一個script對象設定src時，他會訪問指定的url，然後獲取到一個結果，如果這個結果剛好爲一個方法調用的形式，比如a()，然後我們本地又有一個這樣的方法那就會調用了。
16.ok，那你說一下js裏繼承是如何實現的。
繼承大概有四種方法，對象冒充，apply，call，prototype。
17.你大概都寫一下該怎麼用。
然後我開始寫代碼，我寫的前三種，面試官都沒有表示正確與否，第四種倒是很認可。不過我寫的都是從一本書上看到的，可能並不是很常用？這裏不寫代碼了，參見《Javascript高級程序設計》。
18.假如我現在有一個數組，裏面的數字是1-100，現在我想打亂這些數字的順序，獲得一個新的隨機序列，你寫一下代碼我看看，僞代碼即可。
然後我又開始寫代碼，寫完後給面試官稍微解釋一下，他表示沒有問題。
19.假如我現在有1000個元素，我想給每一個都加一個監聽，該如何實現會比較高效且內存不會太浪費？
嗯，可以用jQuery的事件綁定方法給一個類的所有元素加監聽。
但是這樣還是給每一個元素都加了監聽，我不想這樣。
嗯，我確實沒有做過，不過我有這樣一個猜想，我給他們的父元素加一個監聽，事件發生時，我根據事件發生的位置來判定是哪一個元素，這樣只用加一個監聽就好了。
嗯，對。
20.你對jQuery和Angular.js都有了解？
jQuery瞭解的多一些，但是Angular.js沒有掌握（此處說了一下原因）。
好，那沒事兒，就是大體有個架構瞭解，但是用的不熟，這個沒事兒。
21.如果給你一個psd，你可以把他實現出來嗎，包括切圖什麼的。
可以，因爲以前做東西都是從前到後一個人，可能連畫圖都是自己來的，雖然不是特別好，但是基本操作都沒問題。
以下爲閒聊
你現在可以出來實習呀？
嗯，已經跟導師溝通過了。因爲前兩年都沒出來實習，現在到了找工作了的時候，所以出來實習。你老闆不會拉你在實驗室做苦力嗎？
已經做了兩年苦力了，所以老闆願意放出來。那你老闆還挺好的。
嗯啊，我老闆人很好。那你校招有沒有報深圳或者廣州那邊？
沒有，我家是北方的，就打算在北京發展吧。（不知道爲啥要問這個啊）好，你等我一下。
過了一會兒，一面面試官和二面面試官一起過來了。
二面
握手，然後簡單自我介紹。
1.好那我就直接問你問題了啊，咱先寫一下簡單的CSS樣式吧。
面試官在紙上畫了一個簡單的示例，然後指定了一些效果，比如邊框，上邊框紅色，內邊距等
我就在紙上把css都寫出來了
2.好，那你再把DOM結構也寫一下吧。
然後我又寫了一下<div>什麼的
3.如何隱藏一個元素啊？
設置visibility爲hidden，設定display爲block。
他們的區別？
visibility還留有空間，display不保留空間。
還有別的方式嗎？
此處一連串想了四種比較另類的方式
設定width和height都爲0，設定顏色與背景相同，移出可見區域，使用別的元素遮擋，實在想不出來啦。
面試官，笑~ :D
(貌似還可以使用CSS新屬性設爲透明的？)
4.嗯，行。我看你對Angular.js還有了解。
於是又弱弱的解釋了一下，其實並不會。
5.行，好，那咱們問一下jQuery的。jQuery(document).ready()和window.onload()有什麼區別。
兩者觸發的事件不一樣，jQuery有自己的一些事件。（只有這些了，別的不知道啊）
回來後看了網上的，有以下區別：執行時間，jQuery(document).ready()在DOM加載結束之後即執行，而window.onload需要在渲染結束即頁面內包括圖片frame等的所有元素加載完畢後才能執行；重寫及調用次數，jQuery(document).ready()可以多次調用，追加執行，而window.onload這種寫法總是會覆蓋之前的代碼，因此只能執行一次。
6.嗯，那我這裏如果有一排元素，A,B,C…他們是用ul和li來實現的，我現在想在每個元素上加一個單擊監聽，點擊時可以alert其內容，用jQuery怎麼寫？
感覺面試官還是在考察，你到底是複製粘貼黨還是手巧代碼黨吧
乖乖寫出了jQuery(“ul li”).onclick(function(){…})
7.好這樣就行了，那你原生js怎麼樣？
比jQuery好一些吧嗯，那你看這樣寫有什麼不同？
var x = function() {…} function x() {…}
感覺應該第一種是創建了一個局部變量，作用域只在當前域，第二種是個全局變量吧，默認的。（不知道說的對不對）那你看一下這些 null==undefined , null===undefined…二等和三等的區別知道嗎？
嗯，如果是對象的話，三等是判定是否是同一個對象。另外，對於二等，如果兩個值可以相互轉化，結果爲true，比如null和undefined都可以轉化爲false，所以二等爲true，而三等不行。嗯，二等和三等也知道哈。obj.hasOwnProperty()，這個方法知道嗎？
唔，不是很清楚，猜一下是判斷一個對象是否有某個屬性。（實際上這個方法是檢測某屬性是否是對象的自有屬性，對於繼承的屬性返回false，另外如果對象沒有這個屬性也返回false）。8.寫一個方法吧，我有一個金錢的數字，想轉化成帶逗號的字符串，這個金額可能是負的，可能帶小數。
這個還是比較簡單的，然後就開始手寫代碼，用遞歸做，需要注意的是負號和小數部分，然而我忘了小數部分，面試官說小數部分不用處理，直接加在後面就行，所以應該沒啥問題。
9.假如我有一個數組，裏面都是字符串，但是可能重複，如何去重，比如[“AA”, “BB”, “BB”]
這裏需要說一下，我寫的是使用Array的filter方法，然而面試官表示哪有這樣的方法，我說有，是EMCScript 5里加的，面試官查了一下表示是有的，但是EMCScript 6裏又沒有了。我說那我還是用笨一點的方法吧，遍歷一下，然後添加的時候判斷一下是否已經存在了。
10.在做web時用到的優化都有哪些啊？
一般包括圖片的優化，圖標會做成一張大圖，然後用CSS精靈的方式來寫，一方面減少請求次數，另一方面圖片尺寸也可以小一些；還有就是js和css的壓縮，儘量減少文件的個數。其他方面比如cdn，僅有了解，但是沒有實際使用。
那你說一下你瞭解的cdn
簡單說了一下
大概就是我們在各地會有很多服務器，用戶在請求的時候我們可以由離他最近的服務器來提供服務。
11.嗯，好，Linux上編程沒問題吧？
嗯，基本命令都可以。
閒聊階段
職業生涯怎麼規劃的呀？
我覺得我自己對前端開發還是比較開竅的，所以打算一直做下去挺好的。最近看過的一本前端相關的書是什麼？
Javascript高級程序設計
哦，那本紅色的書啊？
嗯。
有什麼收穫嗎？
還是挺多的，看了以後對事件/同源策略/跨域/繼承等等都有很好的學習。嗯，好，我要問的就這麼多，你等我一下。
然後就沒有然後了。據說三面就是經理面，但是我沒有。但是也可能經理不在？嗯，對自己表現還是比較滿意的，這樣的話如果還是過不了也無所謂啦。
本文僅用於記錄面試經歷，文中提及到的知識點不保證其正確性，各位看官請謹慎參考。
2015/9/8
實習面試結果 : )
收到電話通知，通過啦
2015/9/11
三面 提前批offer
本來事情是已經完結了的，就等着去實習就好了。但是上午接到HR的電話，說“我們覺得你背景挺好的，你願不願意再來面一下三面，如果通過的話直接給你提前批offer”，於是我今天下午又去面了三面。
三面應該是經理或者部門老大吧，面試過程並沒有問太多技術細節，下面簡單列一下問題吧：
1.說一說你做的這些項目，項目過程裏的收穫。
2.說一說你的實習經歷，做了些什麼，爲什麼離職了。
3.問了一下相關技術的掌握情況。
4.你在github上都在幹些什麼，順帶介紹以下自己做的一些小項目（非實驗室項目）。
5.說一說你平時如何學習的？（期間提到了網上和書上的資料也經常會有錯誤，會自己去驗證，問了一下都遇過哪些書上的錯誤。）
6.問了一下學校裏的學習成績和獎學金什麼的。
7.家裏的情況。
8.以後的打算，是否會去深【teng】圳【xun】、上海什麼的地方。
9.你有沒有什麼想問我的
我：我以後的工作內容，是否會涉及到除了前端開發之外的部分？
對這個問題進行了詳細的回答和溝通，最後達成了一致。
總結
三面整體過程感覺是在考察學習能力/學習習慣/價值觀等，與一二面的着重點不同。
面試回來後一小會兒，HR打來電話，表示面試沒有問題，於是就這樣拿到了提前批offer，意外得來的驚喜，還是很開心噠～～～
2015/9/15