2019 面試實戰 - 第一回合

jsliang發表於2019-03-03

面試

Create by jsliang on 2019-2-27 18:51:26
Recently revised in 2019-3-3 14:42:54

Hello 小夥伴們，如果覺得本文還不錯，記得給 jsliang 的文件庫點個 star ，你們的 star 是我學習折騰的動力！GitHub 地址

並不是只有特定的季節才能跑路，只因為人跑得多了，這條路就定下來了。

金三銀四跑路季，jsliang 也去嘗試了一波，然後寫下這篇文章。

接下來還會有第二回合以及最後的面試題總結，小夥伴們可以關注我掘金和 GitHub 哈~

一目錄

不折騰的前端，和鹹魚有什麼區別

目錄
一目錄
二前言
三早上 10:00
3.1 Job Description
3.2 一面技術 - 前端架構師
3.3 二面技術 - 技術負責人
3.4 三面個人 - 人事小姐姐
3.5 四面個人 - 專案負責人
四下午 16:00
4.1 Job Description
4.2 技術一面 - 筆試題考查
4.3 技術二面 - 前端小姐姐
4.4 整體三面 - 專案負責人
五總結

二前言

返回目錄

請時刻準備好自己的簡歷，不管是網際網路經濟不佳面臨裁員，還是因為公司內部鬥爭嚴重想換份工作，還是因為厭倦了目前的一切……只有隨時更新自己，把自己的簡歷準備好，你才知道哪一刻跑路是最佳選擇。

時間：2019-2-27
地點：廣州
年限：一年工作經驗
薪酬要求：9K - 15K
場次：上午一場，下午一場
感想：非常疲憊，但是感覺很有動力，“沒有一家解決不了的，如果有，那就再跑一家！”

三早上 10:00

返回目錄

公司規模：員工 5000 +
行業：電商
面試前：怕廣州 3 號線塞車，又覺得這份工作應該不錯，於是 7 點就出門，8 點到了這個公司附近，溜達了一圈，感覺附近飯館比較多，並且離地鐵站 5 分鐘左右，還是挺不錯的。溜達到 9:20，上樓跟前臺小姐姐打招呼後，拿到了兩份表：一份個人資訊表，一個性格測試表（可能大點的公司都考慮你的性格，畢竟團隊開發），印象深刻的是性格測試表還有錯別字：“堅定” 寫成了 “鑑定”。~~可能我精神比較集中，一下子就看到了，但是 offer 沒下來，就沒敢跟人事小姐姐吐槽了，免得給人壞印象。~~
準備完畢：交表，等待面試。

3.1 Job Description

返回目錄

薪酬：10K - 15K

崗位職責：
1、獨立完成公司中後臺專案的前端開發
2、與後端開發一起，確定介面協議
3、獨立完成介面文件的編寫並組織評審
4、深入解析程式碼, 提升程式碼執行效率, 加強程式碼相容性
5、對使用者互動有深刻理解，能幫助產品優化互動體驗

任職要求：
1、有2年以上前端開發經驗
2、對各種Web前端技術（JavaScript，CSS，語義化標籤等等）有深刻理解；
3、熟悉伺服器端Web應用結構，有伺服器端指令碼語言經驗更佳
4、熟悉WEB應用的MVC，MVVM結構
5、英文4級以上

應具備的知識與技能：
1、精通HTML5、CSS3等網頁製作技術，熟悉頁面架構和Flex佈局；
2、精通JavaScript、Ajax等Web開發技術
3、熟練使用ES6,有Reactjs的使用經驗；
4、熟練使用Git,Webpack等工具；
5、熟悉W3C標準，對錶現與資料分離、Web語義化等有較為深刻的理解；
6、思路清晰，具備良好的溝通能力和團隊協作精神，善於學習、總結，樂於分享。
複製程式碼

3.2 一面技術 - 前端架構師

返回目錄

對話內容如下：

面試官：“你好，我是 ***。”
我：“你好。”
面試官：（翻簡歷）
面試官：“挺不錯的嘛，還有個高 star 的專案？”
面試官：（開啟手機）
面試官：“賬號多少，我能看看麼？”
我：“好的，賬號 LiangJunrong，你可以去瞅瞅，那個專案主要是我用來寫我個人的前端知識體系的。”
面試官：“那你是如何讓更多人知道你的？”
我：“我在掘金上有發表文章，然後如果覺得掘金上自己寫的某篇文章還過得去的時候，也會在微信、QQ 上發下掘金的連結。”
面試官：“能介紹下這裡面，你覺得最有印象的東西嗎？”
我：“最有印象麼？”
我：（思考）
我：“這裡面最有印象的，一個是微信小程式，關於通訊錄的做法。是我在 2018 年 10 月份的時候，駐點電信寫微信小程式，其中有個聯絡人模組，因為微信小程式我是邊看文件邊查閱資料寫的，所以那個聯絡人模組是完全沒有其他外掛，自己寫的。工作上的功能實現是領導滿意的，但是下班之餘，覺得修改和新增可以更進一步優化①，於是想了下，可以使用二分法來實現修改、新增後跳轉到相應的位置。怎麼說呢？就是你已經寫好了列表後，按②……”

①：關於修改、新增的操作，小夥伴可以開啟自己的爪機，試試修改、新增完之後，是不是頁面要滾動到操作之後的位置，然後想想如果是自己，會如何實現。

②：關於微信通訊錄的做法，可參考文章【微信小程式之奇技淫巧】，裡面全程分析了簡單做法和優化觀點。

……該部分中 jsliang 和麵試官還有一些探討，太長了這裡忽略不提……
面試官：“能介紹下這個側邊欄實現嗎？”
我：“假設我需要跳轉到 D 桶（前面面試官講了下分桶），那麼，我首先需要知道 A 桶、B 桶、C 桶各有多少條，然後將條數 * 每條高度，以及字母 A、B、C 的高度，最後想加起來獲得需要滾動到的位置。並且我做了相容，在 IPhone 6、IPhone X 上都能確卻滾動到具體位置。③”

③：需要清楚的是，在 WXSS 中，你寫的是 100rpx，在 IPhone 6、IPhone X 上表現的高度是不一致的，需要根據獲取的裝置比，從而獲取到實際每條的高度。

面試官：“你是小程式做的比較多麼？”
我：“小程式的話，我做了 2 個月。然後 Vue 的話，我是畢業設計的時候，用了 Vue + Node + MongoDB。然後在 11 月份的時候，用了 Vue + ECharts 做了報表，展示電信的運營資料。”
面試官：“你能介紹下關於 React 的經驗麼？”
我：（慌）（強行鎮定）React 是那時候在公司總部，需要開發新專案，前端大哥說可以考慮換成 React 開發。但是做到一半的時候，我就被調到電信駐點去了，所以 React 和 Angular 都是看了一點，想實現的時候，中斷了。”
面試官：“那你是說單單使用過微信小程式和 Vue 麼？”
我：“（慌）額(⊙o⊙)…我使用過 Vue、微信小程式、jQuery。④”

④：這個公司 JD 要求需要 React，並且日常開發也是使用 React 的。

面試官：“那你就是沒實際工作用過 React。”
我：“對，是的。”
面試官：“那你介紹下對 Vue 的瞭解，並使用 Vue 做的事情吧。”
我：“個人感覺的話，在目前前端上，模組化、元件化比較多，有一些東西，例如：頭部元件。當我們使用比較多的時候，我們就要抽離出來，元件化它。然後在需要使用的時候，去使用它。然後在 Vue 的使用上，感覺就是拼積木，把你需要的東西拼接起來。然後在 Vue 中，主要三大塊：Vue、VueCli、VueRouter、Vuex 資料狀態管理。噢，四大塊了。”
面試官：“那你能介紹下 Vuex 嗎？”
我：“不好意思，Vuex 介紹不了，畢竟現在最多就是寫小程式，雖然之前有使用過，但是程式碼這些東西，您也知道，太久不使用都會忘了。”
面試官：“嗯，那好，你說使用微信小程式比較多，那你能講講熱更新部分麼？”
我：“不好意思，沒了解過。”
面試官：“就是說，我小程式上出了非常嚴重的 bug，但是你知道，提交給微信稽核，需要時間，那麼我能不能在不提交稽核的情況下進行更新。”
我：（思考）“enm...”
面試官：“那麼假如就是這種情況了，你有什麼想法嗎？或者說依你對小程式的理解，嘗試解決下這個 bug？”
我：（思考）（自言自語）不好意思真不知道。
面試官：（換話題）“對 ECharts 有什麼介紹麼？”
我：（微笑）“ECharts 這個的話，感覺就是非常好玩。當然，在資料操作的時候，你要注意一下。”
面試官：“比如？”
我：“比如說有一次在調取介面，做資料迴圈輸出的時候，因為沒注意，直接導致整個瀏覽器崩潰。”
面試官：“因為渲染次數太多了。”
我：“是的。”
面試官：（翻簡歷）（開啟手機）
面試官：“能介紹你這個刮刮獎麼？我覺得挺有意思的。⑤”

⑤：【幸運刮刮樂】 —— jsliang 遮蔽敏感部分，發來玩玩的手機頁面。

我：“刮刮獎的話，是一次活動製作，然後我找了一個 Canvas 畫圖的外掛做的。”
面試官：“那現在有個問題：我是如何知道它什麼時候展開。”
我：“這個是通過面積計算它來展開的。”
面試官：“你是覺得如何實現的呢？”
我：“enm...不太情況。”
面試官：“當初使用的時候，沒有看它原始碼麼？”
我：“沒有。”
面試官：“你覺得它是如何計算它刮開的面積？”
我：（尷尬）“計算刮開的面積……”
面試官：“你看，這樣這樣計算……”（提示）（教導）
……中間省略吧，太醜了……
面試官：“當初你應該看下它原始碼實現，因為這是個很經典的話題。”
我：“是的，當初我應該自己用原生 JS 去試試，而不是直接拿來用。或者拿來用的時候，去瞅瞅它的實現。”
面試官：（翻簡歷）
面試官：“我覺得你還是挺好的，簡歷上貼了這麼多頁面。”
我：“是，因為我個人比較喜歡折騰，然後將自己折騰的東西，通過部署伺服器讓大家也能看看。還有就是做些統計，比如這些頁面裡面都嵌入了百度統計程式碼，然後可以檢視下都有哪些使用者會點選。”
面試官：“那你平時是怎麼使用這些資料呢？”
我：“enm...沒想過。”
面試官：“就好比說，你通過檢視這些資料，發現有些資料是 A 平臺過去的，有些資料是 B 平臺上去的，然後發現大部分是 A 平臺的……”
我：“噢噢，是的，如果大部分是 A 平臺的，我可以在 A 平臺編寫更多文章，然後看下是哪個話題比較多，從而知道該哪個部分投放精力。”
我：“這個還真沒有想法，不過經你一說，發覺這個還是不錯的，運營方面還真沒想到。”
面試官：“是的，你知道怎麼獲取資料，那麼這些資料的使用技巧你也可以去折騰下。畢竟像某個渠道的轉化率比較高，你就可以投放該渠道……”
我：“是的是的，這個不錯。”
面試官：“嗯，其實你這個也像運營了，畢竟你通過多個渠道去推廣自己。”
面試官：“好的，我大致瞭解了。然後你知道我們這邊主要做啥麼？”
我：“不太清楚。”
面試官：“是這樣的，我們主要使用 React 做後臺管理系統。”
我：“enm...我覺得當你業務寫到一定程度的時候，你會發現技術有很多是雷同的，在這些技術上可以做到靈活切換。如果是使用 React，我是可以接受的。”
面試官：“好的好的，那你先在這等會，我去跟上面溝通下。”
我：“好的，謝謝~”

總結：

首先，這麼詳細的對話，當然不是我記憶力好，隔了四天還能記得，而是我當初錄了音，今兒整理出來的。（不知道這個錄音屬不屬於禁忌，但是個人覺得，每一次面試就是擴充套件你的知識面，畢竟面試官能給你帶來你不知道的新鮮觀點和知識層面）

然後，聽到其中一些點，現在也感覺到尷尬，同時感覺那時候應該可以做到更好發揮。

最後，就是這個面試官給人的感覺還是挺好的，至少當某些問題 jsliang 不會的時候，他還會給你講講他的觀點，而不是直接跳過，讓你感到心堵，從而給你更多的壓力。

3.3 二面技術 - 技術負責人

返回目錄

經過一段時間的等待，迎來第二面面試官：

面試官：“我好，我叫 **”
我：“你好。”
面試官：（翻簡歷）
面試官：嗯，挺能折騰的嘛小夥子，喜歡寫文章是吧？不過你的定位還是小了。來，我們都是程式設計師，日常接觸最多的就是電腦，那麼，你知道系統 32 位和 64 位的區別嗎？”
我：“（觸不及防）“enm...不好意思不記得了。①”

①：講真我不是電腦發燒友，當初購買自己手提的時候，也是看到哪個引數不懂就去查哪個，大學時代為了把妹精通各種系統重灌啥的……別逗了！怎麼可能在我身上發生！所以我真不知道，我就是這麼菜。

面試官：“你看，是吧~為什麼 64 位系統會跑得比 32 位系統快呢？首先我們應該知道計算機系統是由 0101 組成的，然後……②”

②：扯不下去了，跟這位面試官的對話我並沒有錄音，現在就依稀記得一下關鍵點，所以記錄的是關鍵部分。如果小夥伴覺得自己知道這些知識點最好，如果小夥伴覺得自己不懂，記得先 mark 到手機記事本啥的，可以去了解了解。

我：“嗯嗯，好的，學到了，我文章又來了個可以折騰的點。”
面試官：“好，既然說到這個儲存，那麼關於圖片，你瞭解哪些形式，你覺得哪種場合用哪種？它們優劣如何？然後這些圖片的應用場景能說說不？”
我：“jpg、png、gif，嗯，大致這三種。然後 gif 支援動畫、png 擁有透明背景、jpg 應用比較廣泛。通常情況下大小來說，gif 最大，再來是 png，最後是 jpg。”
面試官：“那你知道為什麼這三者會存在這種差別麼？”
我：（懵逼）“不清楚……”
面試官：“因為計算機對它們的壓縮演算法不同，還有，你有沒考慮過向量圖。”
我：“噢噢，不好意思，剛才忘記說到這個，圖片還可以按向量圖和點陣圖來劃分，向量圖的話，例如 svg，它不會因為你圖片在不同場景的放大縮小而變得模糊。”
面試官：“嗯，你看，圖片使用是不是我們工作中要面對的一個話題，這樣你是不是應該可以根據這話題寫一篇文章了（笑）。”
我：（感興趣）“是的，我回頭就去寫一篇關於圖片的文章。③”

③：這個真的不是要忽悠面試官，文章我已經開好坑了：【2019 面試準備 - 圖片】，寫完這篇文章，下一篇就寫完這個。

面試官：“很好，我們繼續下一個話題，在電商中，商品排放總是有一定道理的。現在我有兩種關於商品的排序方式，分別存放在 A 頁面與 B 頁面中。然後，在只有前端的情況下，如何讓 50% 的使用者訪問到 A 頁面，50% 的使用者訪問到 B 頁面。”
我：“enm...不能使用後端，或者 Nginx 負載均衡輪詢？”
面試官：“不行。”
我：（深思）（自言自語）“enm...不清楚。”
面試官：“其實你剛才也提到過使用隨機數的設想（自言自語中提到了），那麼，我們如何讓頁面訪問的概率為 1/2 呢？我們可不可以將這個數儘可能放大，然後再劃分？”
我：（恍然）“嗯，可以將它們 %2，這樣，我們就只有兩種情況，一個是 0，一個是 1。因為隨機範圍足夠大了，所以使用者訪問的概率也分為一半一半了。”
面試官：“很好，既然你知道 50% 和 50% 是這樣子搞了，那麼，你能不能做到 25% 與 75% 的劃分？”
我：（笨地捉急）
面試官：“不要急，你想想，當我們 %2 的時候，會獲取到兩種情況，那麼，一個數 %3，會有幾種情況？是的，三種，0 1 2，還是通過取餘，所以，我們只需要將一個儘可能大的範圍的數，將它 %4，這樣就有 0 1 2 3 四種情況，我們是不是就可以劃分 25% 和 75%了。”
我：（再度恍然）
面試官：“那你知道取餘在工作中的用法吧？”
我：“不清楚……”
面試官：“你可以瞭解下視訊快取，我們能不能不能因為視訊有多大，我們就開多大位置給它？不能是吧，那麼，我們就要在一個位置，將它存下來……④”

④：由於沒有錄音佐證我的記憶是否真實，所以這裡進行對話省略，免得看文章的小夥伴對面試官有誤解，覺得面試官其實也不懂。按照我面試之後的想法，其實就是開闢一段記憶體，然後瀏覽器接受伺服器傳過來的資料，在記憶體中，進行 %n 的形式來儲存資料（n 為開闢的記憶體大小），接著當我們需要讀取視訊資料的時候，我們只需要通過先進先出的形式，將最新存進記憶體的資料讀取出來，這樣就做到了視訊的還原。

我：“是的，學到了！”
……記憶回放到這裡，其他都是不太深刻的問題了……
面試官：“總體來說還是不錯的，行，你等會，我叫人事過來跟你談談。”
我：“好的，謝謝！”

總結：

首先，一開始我以為面試官開頭，也是“面試造火箭，工作擰螺絲”，但是後面說到圖片以及圖片排序方式，我覺得這個也是挺正常的，畢竟是電商企業。

然後，關於個人知識體系，當時跟面試官說了句：“現在程式設計師，一流通數學，二流通演算法。我是比較想多點學習演算法的。”（其實這話是剛好那天票圈在說程式設計師等級制，我當然是不入流啦！）當時面試官還給了下肯定。

最後，覺得還是心態放好來，畢竟如果好多問題你都不會，你應該想想能不能扯開到你熟悉的領域，因為你表現不好，心態又不好，面試官肯定印象極差。

3.4 三面個人 - 人事小姐姐

返回目錄

經過一段時間的等待，迎來了一開始的人事小姐姐：

人事小姐姐；（笑）“剛才聊得怎麼樣？”
我：“第一面還不錯，第二面有點小緊張。”
人事小姐姐：“有點小緊張？”
我：“對！”
人事小姐姐：“然後對我們這邊的專案及一些情況，有些瞭解沒？”
我：“不太清楚。①”

①：看過前面的小夥伴應該知道，一面面試官最後提到了，是的，我那 7 秒鐘魚的記憶！

人事小姐姐：“我們公司是個跨境電商，然後人數的話……（介紹公司一些情況，這裡不多累述）”
人事小姐姐：“介紹就到這裡，然後你還有什麼問題想要跟我諮詢下的？”
我：（瞎扯些話題）
人事小姐姐：“嗯，你這裡寫最遲要 4月1日入職是吧？”
我：“是的，因為你也知道，一般合同都會籤個離職一個月進行交接的，籤合同的時候，標明正常離職需要 30 天，你也清楚，規矩還是不能說壞就壞的……②”

②：關於入職時間，是個很令人煩惱的問題。如果你跟公司關係很好，可以申請快速辦理離職手續，那就非常好；如果你跟公司關係不好，又有點錢，那麼可以看看合同上寫了什麼，我這邊合同上寫的就是賠付一個月工資，不過這麼做感覺不妥當；所以還是老老實實報個最穩當的時間吧，畢竟如果招聘你的公司真心想要你，肯定會為你考慮下，要不然那些希望你快速入職的，還真不好說。

人事小姐姐：“關於薪酬這塊……③”

③：薪酬這個省略不能說了，畢竟收到了 offer。

人事小姐姐：“然後你還有其他問題想確認或者瞭解嗎？”
我：“加班換調休還是薪酬還是其他……”
……省略中間內容……
人事小姐姐：“好的，因為我們這邊進行專案制，所以我叫專案負責人過來跟你聊聊最終專案以及薪酬方面的事。”
我：“好的，謝謝！”

總結：

首先，應該提提我的大忌，就是主動給自己降了薪資，因為人事小姐姐還沒提到這個，但是我因為經過前兩面，感覺自己表現有點糟，所以給自己給自己降了薪資，只表示我想進來。（還能安慰自己的是，這家公司真的比原先的大好多，平臺大了薪資沒要到一開始提的，尚能接受）

然後，如果到了人事面，你最好諮詢下：

薪酬：最重要的吧，畢竟你跳槽的第一目的應該就是拿更高的工資……
加班：換調休還是薪酬，什麼時候開始算加班等……
工作時間：早上幾點到晚上幾點，一週幾天……
社保和五險一金：如果你之前有工作的，記得問清楚這個交接問題，中間需不需要自己續……
調薪機制：一年調幾次，根據什麼判斷（我現在的公司根據 PPT 判斷的！）……
請假：請假工資怎麼算……

最後，態度和善點，我感覺前面兩面，我心態有點差了，但是畢竟還要繼續，所以儘量展現最好的給每一個面試官。

3.5 四面個人 - 專案負責人

返回目錄

經過一段時間的等待，迎來了最終的專案負責人：

專案負責人：“先介紹下自己吧，個人以及工作經歷。”
我：“個人的話，18 年 5 月開始正式實習，到 8 月的時候，感覺個人的前端知識體系比較亂，所以開始寫我的文件庫；然後 9 月到 10 月的時候，駐點電信做微信小程式，因為沒經驗，所以是邊學邊做；然後 11 月的時候，用 ECharts 做了資料包表；然後 12 月的時候，做了 Node 的專案；然後就到了現在。①”

①：個人比較喜歡用然後來連線話題，可能感覺能比較清晰表達我的邏輯吧！

專案負責人：“是畢業之後就在這個公司了是吧？”
我：“是的。”
專案負責人：“你離開平臺是因為太小了？”
我：“是的，因為我覺得平臺太小，個人提升有限，就好比現在一些簡歷上的，很多都是我自己折騰的。②”

②：關於離職原因，錢當然是個原因，但是你不能這麼說，要不然你面試的公司會覺得你市儈。當然，我這裡說平臺小也是個原因，因為之前公司，不管是總部，還是駐點電信，都是一個人開發專案，這樣子你程式碼寫起來是隨意了，但是總想和別人合作的，畢竟大的專案，都不是一人搞定的。

專案負責人：“那麼，這裡提到的提升，大多是個人方面的提升，例如更高的技術之類的。但是，在工作中，我們要儘可能的協調業務、支撐業務的，所以你這麼看這個？”
我：“因為業務這東西的話，一開始可能這裡做一下，那裡做一下。但是，等你做到很熟練的時候，你會發現有些地方是有共同性的，所以我們可以抽取出來，然後在出來新需求的時候，如果有這個，我們就可以快速應用。所以說，業務和技術不能完全分開，因為業務好多東西需要技術支撐，然後技術上你的研究，最終還是可以應用到業務上的。③”

③：這個問題的回答，需要感謝下 @邵威儒 大佬，因為他平時寫公司業務的時候，就是非常勤快，然後一些常用的，他會封裝成元件，來了新的需求就複製貼上拼接下就 OK 了，給我非常大的震撼。例如：n 個設計稿，公司排期一個月，他一週就解決了。

專案負責人：“在你接觸程式碼這麼久的時間中，你有沒有感覺給你比較深刻印象的事情。”
我：“個人感覺就是有些地方還是需要提升自己。例如：演算法。就好比第一位面試官跟我說的微信小程式的通訊錄，就用到二分法。”
……繼續扯了些其他雜七雜八話題……
專案負責人：“好的，你稍等下。”（離開）
我：“好的！”
……一段時間後……
專案負責人：“剛才跟你一面、二面面試官聊了一下，綜合評估了下，你這邊還是比較 OK 的，你最早什麼時候入職。”
我：“4 月 1 日，你也知道，合同都會籤的。”
專案負責人：“好的，這段時間我會讓人事持續跟你溝通，offer 的話問題不大，然後薪資……（省略）具體事情我再讓人事跟你溝通。最後你還有什麼問題麼？”
……中間繼續扯了一些其他的……
我：“好的，就這些了，沒了。”
專案負責人：“”

總結：

首先，到這裡感覺整個人都很放鬆了，畢竟在人事面的時候知道這是最後一面了，也很累，畢竟坐了好久。

然後，如果能接觸到專案負責人，最好多接觸下，多聊聊，畢竟不出意外，這就是你的直系領導了。換工作的話，雖然平臺也很重要，但是領導也是個非常重要的部分，像 jsliang 公司的領導層就比較亂，所以感覺還是希望有個好領導的。

最後，希望小夥伴們最好都能走到面試最後咯~上午的面試就到此了，當場允諾發 offer 還是很少見的。

四下午 16:00

返回目錄

公司規模：20 - 99人
行業：遊戲
面試前：地處科大科技園那邊，提前了一個鐘到，不想提前上去（jsliang 覺得有時候提前上去，萬一前面面試的還沒搞完，會尷尬，一般都是提前半個鍾到），無聊，就坐馬路前看看車水馬龍。

4.1 Job Description

返回目錄

薪酬：10K - 20K

崗位職責：
1. 負責web前端開發框架的搭建；
2. 負責web前端研發（包括PC和Mobile）；

能力要求：
1. 紮實的html,js,css知識；
2. 熟悉vue等前端開發框架；
3. 熟悉bootstrap或elementui等前端UI庫；
4. 熟悉響應式網頁開發；
5. 能編寫可維護性高的前端程式碼；
7. 2年以上專業崗位工作經驗，有相關作品可展示優先。
複製程式碼

4.2 技術一面 - 筆試題考查

返回目錄

描述一下漸進增強和優雅降級。
CSS 中可以讓文字垂直和水平方向上重疊的兩個屬性是什麼？
如何解決使用 inline-block 引起的空白間隙的問題？
使用 CSS 建立一個三角形（一個箭頭向右的三角圖示）。
使用 CSS 實現三個 div 等比排列在一行，兩列寬度固定中間自適應。
有一個長度為 100 的陣列，請求出該陣列的前 10 個元素之和。
寫一個程式列印 1 到 100 這些數字，遇到數字為 3 的倍數，列印 “A” 替代該數字；遇到 5 的倍數，用 “B” 代替；遇到即是 3 的倍數又是 5 的倍數，列印 “AB”。
跨域通訊有哪些方案，各有什麼不同？
哪些常見操作會造成記憶體洩漏？
主流前端框架如 Angular/React/Vue 等之間有哪些差異及特點，選取一個描述其元件生命週期。

這裡 jsliang 還是冒著被寄刀片的危險，不給答案了！畢竟給了答案，小夥伴可能不會更深層次地瞭解這個問題。

4.3 技術二面 - 前端小姐姐

返回目錄

提交完筆試題答案後，來了位前端小姐姐，開始面試：

前端小姐姐：“你好，你先來個自我介紹吧~”
我：“你好，我叫樑峻榮，前端網名 jsliang，日常活躍於 GitHub 和掘金。然後個人比較喜歡折騰，在去年 8 月的時候開始寫自己文件庫，在 9 月和 10 月做過小程式，11 月的時候做了 ECharts 報表，12 月的時候做了個原生 Node 仿企業網站，然後就到了現在。”
前端小姐姐：“你挑一個你的工作專案來講講。”
我：“那我講講微信小程式吧①，當時大概 20 來張 PSD，就說了下小程式是做什麼的，然後我就邊看官方文件邊寫小程式了。大概一個半月後，期間修修改改，就把小程式搞出來了。其中最有挑戰的就是聯絡人模組，就像我們手機的聯絡人，在新增和修改的時候，用到了二分法。”

①：是不是感覺跟上一家公司的面試過程好像，是的就是這麼難受，畢竟經歷的真不多！

前端小姐姐：“你工作主要用到的技術棧有哪些？”
我：“首先，剛才說了有微信小程式；然後，因為日常駐點於電信，所以 jQuery、H5 還是要懂的；最後，就是用 Vue 寫的報表，以及最近要寫的管理平臺。”
前端小姐姐：“ECharts 報表的話，你是直接使用 API 的嗎？有進行更改嗎？”
我：“沒有。”
前端小姐姐：“能講講視覺化拖拽頁面嗎？”
我：“就是使用 jQueryUI 的 API，進行拖拽生成新的 div 塊，然後運營可以配置這個 div 塊的資料，最後將這些資料，生成到一個新的 HTML 頁面上。”
前端小姐姐：“這個也是使用 jQueryUI 的 API，沒有根據實際開發，對它 API 進行一些修改嗎？”
我：（尷尬）“沒有。”
前端小姐姐：“那你有自己開發的東西嗎？”
我：“8 月份的時候，有自己折騰過 Webpack，然後自己搞了一份 Webpack 多頁面配置，結合 VS Code 的 Live Share 和本地區域網進行小組開發。”
前端小姐姐：“講下 CSS 選擇器的優先順序吧。”
我：“首先，就是 !important 這個；然後就是行內樣式；再到 #id，再到 .class，再到標籤，再到萬用字元 *，最後還有一些，不記得了。
前端小姐姐：“嗯，好的，能講講 postion 定位嗎？”
我：“首先，position 定位的話，預設是 static。然後，如果 position: fixed 的時候，就是相對於根元素進行定位。然後，如果是 position: absolute 的時候，根據前面那個進行了 position: relative 的標記，進行相對定位。然後，positon: relative，我常用的就是將它作為 positon: relative 的定位作用。”
前端小姐姐：“這四種脫離文件流的有哪些，不脫離的有哪些？”
我：“absolute 和 fixed 脫離了文件流，而 static 和 relative 沒有脫離文件流。”
前端小姐姐：“H5 和 CSS3 用得多麼？”
我：“H5 用來寫活動頁，CSS3 的話，不是很多。”
前端小姐姐：“那你講講 CSS3 屬性你用哪些比較多？”
我：“rgba、圓角、漸變等……”
前端小姐姐：“漸變的話，假如有一個長方體，上面一種顏色，下面一種顏色，你會怎麼做？”
我：“不好意思，因為一般都是做右邊和下邊的漸變，寫得也是比較少，所以不清楚。②”

②：不是不清楚，是真不清楚，如果按鈕有漸變，我肯定直接裁剪，用背景圖來實現這個按鈕！

前端小姐姐：“好的，動畫有使用過麼？”
我：“抱歉，沒用過，畢竟業務邏輯比較簡單，不過之前大三的時候，學過一段時間 CSS3，但是因為不常用，忘了。”
前端小姐姐：“那 H5 的呢？”
我：“H5 的話，比如 <audio>、<video>、<canvas>，<canvas> 的話也是簡單瞭解，比如刮獎遊戲，用到了蒙層，就是用 <canvas> 寫的。”
前端小姐姐：“知道 H5 有個可拖拽屬性嗎？”
我：（胡言亂語）
前端小姐姐：“就是將一個東西，從一個位置拖拽到另一個位置。”
我：“沒有。”
前端小姐姐：“好的，瞭解過快取這些嗎？”
我：“cookies、session、LocalStorage、SessionStorage。”
前端小姐姐：“什麼場景使用那些技術？”
我：“cookies 的話，在跟後端互動，例如登入啥的，比較常用③。然後 SessionStorage，它會在瀏覽器關閉的時候清空掉。最後 LocalStorage，它會在瀏覽器進行長期儲存。“

③：cookies 我還真忘了，畢竟日常都用了 storage，所以想知道的小夥伴可以百度/Google/必應一下，別聽我瞎扯。

前端小姐姐：“那 LocalStorage 會根據時間清空嗎？還是會一直存在瀏覽器上？”
我：“LocalStorage 是不會主動刪除的，但是我們可以設定它的過期時間。”
前端小姐姐：“然後，enm...能講下什麼是閉包嗎？”
我：“簡單來說，假如有兩個函式 A 和 B，然後 B 函式在 A 函式內，同時 B 能使用函式 A 的變數，那麼我們稱函式 B 為閉包。④舉個簡單的，網上常用的例子：for 迴圈中定義了定時器 setTimeout，裡面就涉及閉包了。”

④：關於對話中的一些知識點，最終將會整理成一篇文章，最近還沒完成，但是大致有了 1400 多行的文章了：【jsliang 的 2019 面試準備】，剛興趣的小夥伴可以關注我 GitHub 或者掘金賬號，會持續更新哈~

前端小姐姐：“那為什麼使用閉包呢？”
我：“其實，工作中我個人不太喜歡閉包，也不推薦閉包，因為它能把人整懵逼了。同時，現在 ES6 的塊級定義也有利於減少閉包產生。所以，能不寫閉包，就不寫閉包。”
前端小姐姐：“那你不使用閉包的原因是什麼？”
我：“1. 程式碼不好維護，不管是你自己，還是你的接手人。2. 閉包會產生內部變數，瀏覽器不會銷燬，從而卡記憶體。”
前端小姐姐：“你使用 ES6 語法比較多嗎？”
我：“學過，但是使用不多，例如箭頭函式，例如 let 變數。”
前端小姐姐：“那你使用過 Promise 嗎？”
我：“肯定得用，像微信小程式中，比如一個頁面，要呼叫好幾個介面，然後呼叫要有順序，這時候就要寫 Promise 了。”
前端小姐姐：“可以講下 Promise 你的用法嘛？”
我：“可能我使用的比較簡單，都是用那些簡單的。”
前端小姐姐：“還有其他 ES6 語法你用過嗎？比如 let、var 以及 const”
我：“let 的話就是區域性使用，例如使用 for 之類的，因為它不會汙染全域性變數；var 的話就是全域性變數，可以在一個大的局域內進行呼叫；最後 const 一般都是在呼叫介面的時候，用 const 來防止介面返回的資料被修改。”
前端小姐姐：“那你知道哪個被定義宣告變數後，再定義宣告變數的話，會報錯？”
我：“let 吧！"
前端小姐姐：“好的，框架上的話，Vue、React、Angular 哪個用的比較多？”
我：“Vue 用得比較多，好比我的畢設，好比 ECharts 報表，以及最近的管理平臺。”
前端小姐姐：“好的，路由方面能說說麼？”
我：“噼裡啪啦扯話題……”
……聽了下錄音，我扯到模組化去了，這裡就不爆醜了……
前端小姐姐：“能講下 v-if 與 v-show 的區別嗎？”
我：“v-if 的話，是往 DOM 樹上新增或者刪除元素；v-show 的話，使用 display: none 這些來控制顯示元素。”
前端小姐姐：“v-for 你使用過程中，有遇到什麼問題或者關注點嗎？”
我：“避免將 v-if 和 v-for 放在同一個元素上，因為 v-for 優先順序比 v-if 更高。然後使用 v-for 的話，注意下 v-bind:key，因為關係到一些程式碼優化了。”
前端小姐姐：“v-bind:class 有使用過嗎？有什麼要注意的嗎？”
我：“就是那個動態渲染 class 是嗎？使用過，然後需要注意的話，儘量別寫太複雜的判斷在上面了，畢竟維護起來麻煩，然後接手的看起來也懵逼。”
前端小姐姐：“然後 ElementUI 裡面的柵格化，加入說一行分成三列，中間列隱藏的時候，第三列往前擠，但是我希望佈局不能動，有啥辦法？”
我：“中間列使用兩個塊，一個有內容的，一個大的空塊，然後根據判斷來顯示隱藏哪一塊。”
前端小姐姐：“關於響應式，還有其他了解嗎？”
我：“？？？”
前端小姐姐：“例如 rem？”
我：“噢噢，在做 H5 活動頁的時候，使用 rem，但是這個有問題，就是不管在多少螢幕下看起來都一樣，手機看起來好的，但是到了 PC 端，就不太好看了。”
前端小姐姐：“你有遇到什麼相容問題嗎？”
我：“瀏覽器相容的話，IE 10 以下不考慮，其他就是微信和 IPhone 的相容，讓人難受了。”
前端小姐姐：“然後，我看你簡歷有說到正則小遊戲⑤，能聊聊這個麼？”

⑤：jsliang 寫的正則小遊戲。

我：“一般來說，登入註冊這些使用正則比較多，如果你讓我寫一個，我肯定要回去看看，畢竟很少用就忘了；但是如果你讓我看看某個正則啥意思，還是能看出來的。”
前端小姐姐：“token 失效問題遇到過麼？”
我：“沒有。”
前端小姐姐：“能講下原型鏈麼？”
我：“原型鏈涉及到物件導向，如果在一些比較趕的專案中，可能不會使用，因為一般直接用程式導向的方法來寫，一般原型鏈都是涉及到繼承方面的東東。⑥”

⑥：這是個大塊，前端必考題，具體的可以檢視我的文章【jsliang 的 2019 面試準備】，當然現在還沒寫完，jsliang 介紹起來也結巴，所以感覺那時候回答的也不是非常好。

前端小姐姐：“好的。能聊聊 Ajax 的原理，以及你的使用方法嗎？”
我：“不好意思，不太清楚，一般都是用 jQuery 封裝好的，或者 Axios。”
前端小姐姐：“那你能講下 get 和 post 請求嗎？”
我：“get 的話會在瀏覽器的 url 上看到，post 的話相對於 get 安全點。當然，這個安全也是有限的，畢竟前端沒有說特別安全的地方。然後就是 get 請求能傳的比較少，post 請求能傳的資料比較多。”
前端小姐姐：“好的，大致我就清楚了，請稍等回，我跟負責人說下。”
我：“好的，謝謝。”

總結：

首先，小姐姐考點，還是比較全的，從 HTML 到 CSS 再到 JS，最後到我簡歷的一些點，都能聊到。

然後，小姐姐的話題，個人感覺還是比較貼近她工作的，很多時候牽扯的知識點，在工作上應該都是她印象比較深刻的。

最後，感慨下：哇塞好厲害的小姐姐！