2019 面試實戰 - 第一回合

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

Hello 小夥伴們，若是以爲本文還不錯，記得給 jsliang 的文檔庫點個 star ， 大家的 star 是我學習折騰的動力！GitHub 地址

 【2019-08-16】Hello 小夥伴們，因爲 jsliang 對文檔庫進行了重構，這篇文章的一些連接可能失效，而 jsliang 沒有精力維護掘金這邊的舊文章，對此深感抱歉。請須要獲取最新文章的小夥伴，點擊上面的 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

返回目錄

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

3.1 Job Description

返回目錄

薪酬：10K - 15K

崗位職責：
一、獨立完成公司中後臺項目的前端開發
二、與後端開發一塊兒，肯定接口協議
三、獨立完成接口文檔的編寫並組織評審
四、深刻解析代碼, 提高代碼執行效率, 增強代碼兼容性
五、對用戶交互有深入理解，能幫助產品優化交互體驗

任職要求：
一、有2年以上前端開發經驗
二、對各類Web前端技術（JavaScript，CSS，語義化標籤等等）有深入理解；
三、熟悉服務器端Web應用結構，有服務器端腳本語言經驗更佳
四、熟悉WEB應用的MVC，MVVM結構
五、英文4級以上

應具有的知識與技能：
一、精通HTML五、CSS3等網頁製做技術，熟悉頁面架構和Flex佈局；
二、精通JavaScript、Ajax等Web開發技術
三、熟練使用ES6,有Reactjs的使用經驗；
四、熟練使用Git,Webpack等工具；
五、熟悉W3C標準，對錶現與數據分離、Web語義化等有較爲深入的理解；
六、思路清晰，具有良好的溝通能力和團隊協做精神，善於學習、總結，樂於分享。
複製代碼

3.2 一面技術 - 前端架構師

返回目錄

對話內容以下：

---

• 面試官：「你好，我是 ***。」
• 我：「你好。」
• 面試官：（翻簡歷）
• 面試官：「挺不錯的嘛，還有個高 star 的項目？」
• 面試官：（打開手機）
• 面試官：「帳號多少，我能看看麼？」
• 我：「好的，帳號 LiangJunrong，你能夠去瞅瞅，那個項目主要是我用來寫我我的的前端知識體系的。」
• 面試官：「那你是如何讓更多人知道你的？」
• 我：「我在掘金上有發表文章，而後若是以爲掘金上本身寫的某篇文章還過得去的時候，也會在微信、QQ 上發下掘金的連接。」
• 面試官：「能介紹下這裏面，你以爲最有印象的東西嗎？」
• 我：「最有印象麼？」
• 我：（思考）
• 我：「這裏面最有印象的，一個是微信小程序，關於通信錄的作法。是我在 2018 年 10 月份的時候，駐點電信寫微信小程序，其中有個聯繫人模塊，由於微信小程序我是邊看文檔邊查閱資料寫的，因此那個聯繫人模塊是徹底沒有其餘插件，本身寫的。工做上的功能實現是領導滿意的，可是下班之餘，以爲修改和新增能夠更進一步優化①，因而想了下，可使用二分法來實現修改、新增後跳轉到相應的位置。怎麼說呢？就是你已經寫好了列表後，按②……」

①：關於修改、新增的操做，小夥伴能夠打開本身的爪機，試試修改、新增完以後，是否是頁面要滾動到操做以後的位置，而後想一想若是是本身，會如何實現。

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

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

③：須要清楚的是，在 WXSS 中，你寫的是 100rpx，在 IPhone 六、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。

• 人事小姐姐：「而後你還有其餘問題想確認或者瞭解嗎？」
• 我：「加班換調休仍是薪酬仍是其餘……」
• ……省略中間內容……
• 人事小姐姐：「好的，由於咱們這邊進行項目制，因此我叫項目負責人過來跟你聊聊最終項目以及薪酬方面的事。」
• 我：「好的，謝謝！」

---

總結：

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

而後，若是到了人事面，你最好諮詢下：

1. 薪酬：最重要的吧，畢竟你跳槽的第一目的應該就是拿更高的工資……
2. 加班：換調休仍是薪酬，何時開始算加班等……
3. 工做時間：早上幾點到晚上幾點，一週幾天……
4. 社保和五險一金：若是你以前有工做的，記得問清楚這個交接問題，中間需不須要本身續……
5. 調薪機制：一年調幾回，根據什麼判斷（我如今的公司根據 PPT 判斷的！）……
6. 請假：請假工資怎麼算……

最後，態度和藹點，我感受前面兩面，我心態有點差了，可是畢竟還要繼續，因此儘可能展示最好的給每個面試官。

3.5 四面我的 - 項目負責人

返回目錄

通過一段時間的等待，迎來了最終的項目負責人：

---

• 項目負責人：「先介紹下本身吧，我的以及工做經歷。」
• 我：「我的的話，18 年 5 月開始正式實習，到 8 月的時候，感受我的的前端知識體系比較亂，因此開始寫個人文檔庫；而後 9 月到 10 月的時候，駐點電信作微信小程序，由於沒經驗，因此是邊學邊作；而後 11 月的時候，用 ECharts 作了數據報表；而後 12 月的時候，作了 Node 的項目；而後就到了如今。①」

①：我的比較喜歡用 而後 來鏈接話題，可能感受能比較清晰表達個人邏輯吧！

• 項目負責人：「是畢業以後就在這個公司了是吧？」
• 我：「是的。」
• 項目負責人：「你離開平臺是由於過小了？」
• 我：「是的，由於我以爲平臺過小，我的提高有限，就比如如今一些簡歷上的，不少都是我本身折騰的。②」

②：關於離職緣由，錢固然是個緣由，可是你不能這麼說，要否則你面試的公司會以爲你市儈。固然，我這裏說平臺小也是個緣由，由於以前公司，無論是總部，仍是駐點電信，都是一我的開發項目，這樣子你代碼寫起來是隨意了，可是總想和別人合做的，畢竟大的項目，都不是一人搞定的。

• 項目負責人：「那麼，這裏提到的提高，大可能是我的方面的提高，例如更高的技術之類的。可是，在工做中，咱們要儘量的協調業務、支撐業務的，因此你這麼看這個？」
• 我：「由於業務這東西的話，一開始可能這裏作一下，那裏作一下。可是，等你作到很熟練的時候，你會發現有些地方是有共同性的，因此咱們能夠抽取出來，而後在出來新需求的時候，若是有這個，咱們就能夠快速應用。因此說，業務和技術不能徹底分開，由於業務好多東西須要技術支撐，而後技術上你的研究，最終仍是能夠應用到業務上的。③」

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

• 項目負責人：「在你接觸代碼這麼久的時間中，你有沒有感受給你比較深入印象的事情。」
• 我：「我的感受就是有些地方仍是須要提高本身。例如：算法。就比如第一位面試官跟我說的微信小程序的通信錄，就用到二分法。」
• ……繼續扯了些其餘雜七雜八話題……
• 項目負責人：「好的，你稍等下。」（離開）
• 我：「好的！」
• ……一段時間後……
• 項目負責人：「剛纔跟你一面、二面面試官聊了一下，綜合評估了下，你這邊仍是比較 OK 的，你最先何時入職。」
• 我：「4 月 1 日，你也知道，合同都會籤的。」
• 項目負責人：「好的，這段時間我會讓人事持續跟你溝通，offer 的話問題不大，而後薪資……（省略）具體事情我再讓人事跟你溝通。最後你還有什麼問題麼？」
• ……中間繼續扯了一些其餘的……
• 我：「好的，就這些了，沒了。」
• 項目負責人：「」

---

總結：

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

而後，若是能接觸到項目負責人，最好多接觸下，多聊聊，畢竟不出意外，這就是你的直系領導了。換工做的話，雖然平臺也很重要，可是領導也是個很是重要的部分，像 jsliang 公司的領導層就比較亂，因此感受仍是但願有個好領導的。

最後，但願小夥伴們最好都能走到面試最後咯~上午的面試就到此了，當場允諾發 offer 仍是不多見的。

四 下午 16:00

返回目錄

1. 公司規模：20 - 99人
2. 行業：遊戲
3. 面試前：地處科大科技園那邊，提早了一個鐘到，不想提早上去（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 技術一面 - 筆試題考查

返回目錄

1. 描述一下漸進加強和優雅降級。
2. CSS 中可讓文字垂直和水平方向上重疊的兩個屬性是什麼？
3. 如何解決使用 inline-block 引發的空白間隙的問題？
4. 使用 CSS 建立一個三角形（一個箭頭向右的三角圖標）。
5. 使用 CSS 實現三個 div 等比排列在一行，兩列寬度固定中間自適應。
6. 有一個長度爲 100 的數組，請求出該數組的前 10 個元素之和。
7. 寫一個程序打印 1 到 100 這些數字，遇到數字爲 3 的倍數，打印 「A」 替代該數字；遇到 5 的倍數，用 「B」 代替；遇到便是 3 的倍數又是 5 的倍數，打印 「AB」。
8. 跨域通訊有哪些方案，各有什麼不一樣？
9. 哪些常見操做會形成內存泄漏？
10. 主流前端框架如 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，最後到我簡歷的一些點，都能聊到。

而後，小姐姐的話題，我的感受仍是比較貼近她工做的，不少時候牽扯的知識點，在工做上應該都是她印象比較深入的。

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

4.4 總體三面 - 項目負責人

返回目錄

幾分鐘後，項目負責人來了：

---

• 項目負責人：「你好。」
• 我：「你好。」
• 項目負責人：「畢業一年了，而後能聊聊爲何跳槽麼？」
• 我：「由於我以爲平臺過小，我的提高有限，就比如如今一些簡歷上的，不少都是我本身折騰的。」
• 項目負責人：「好的，咱說說薪酬方面……」
• 我：「……噼裏啪啦……」
• ……省略中間部分，聊聊 jsliang 的技術棧，聊聊技術使用，聊聊我的技術提高……
• 項目負責人：「好的，大體清楚了。那今天面試就到這裏了，你回去等通知吧。」
• 我：「好的，謝謝。」

---

總結：

首先，感受中間跟項目負責人聊得有點尷尬，雖然最後聊到了薪酬和工做方面，可是關於薪資和平臺方面的，回來聽錄音感受仍是有衝突。

而後，關於我的提高方面，要堅信你的提高是有本身理由的，不能說被否決的就以爲本身提高沒用。

最後，只能遺憾到如今也沒回復，可能已經涼涼了吧。

五 總結

返回目錄

寫到這裏，jsliang 的第一輪面試就完畢啦，特地抽取了一天來面試，收穫多多，感慨幾許：

首先，面試不必定造火箭，有多是人家項目中真實存在這個狀況，就比如上午二面的圖片，比如下午前端小姐姐的 CSS3 和動畫之類的。

而後，面試能夠給你更多的 idea，從而根據面試過程當中出現的一些點，去擴寬本身知識面。面試第一目的確定是拿到 offer，可是每次面試請嘗試記住面試過程及面試題目，面試後總結出來，針對本身的不足進行知識拓展。

最後，jsliang 在這裏祝小夥伴們面試成功，在金三銀四的季節找到更適合本身的職位！

---

jsliang 廣告推送：
也許小夥伴想了解下雲服務器
或者小夥伴想買一臺雲服務器
或者小夥伴須要續費雲服務器
歡迎點擊 雲服務器推廣 查看！

jsliang 的文檔庫 由 梁峻榮 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議進行許可。
基於github.com/LiangJunron…上的做品創做。
本許可協議受權以外的使用權限能夠從 creativecommons.org/licenses/by… 處得到。