騰訊校招前端開發筆試初試總結| 掘金技術徵文

作者：Chacha

今天來總結下9月5號做的前端筆試題和9月16號的騰訊初試，這段時間真的沒怎麼準備面試和筆試，可想而知，騰訊的面試肯定是掛了。 首先是9月5號的騰訊校招筆試題，在做筆試之前，我都沒怎麼去刷題，做的時候，完全是憑藉自己的記憶來做的，總的來說，做的不是很好。在做的過程中，截圖了一些比較好的筆試題，今天是時候看看了。

看到選擇題，是不是覺得有點坑爹，30道選擇題，居然只給30分鐘，而且還有75分的分值。第一題做的時候，我選的是第一個，不知道同學們會選什麼，這題肯定不止一個答案，但是我沒敢學其他的，因為這個屬性我根本就不是很熟悉。 tableLayout 屬性用來顯示錶格單元格、行、列的演算法規則。固定表格佈局(fixed)與自動錶格佈局(auto)相比，允許瀏覽器更快地對錶格進行佈局。在固定表格佈局中，水平佈局僅取決於表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。在自動錶格佈局中，列的寬度是由列單元格中沒有折行的最寬的內容設定的。在自動錶格佈局中，列的寬度是由列單元格中沒有折行的最寬的內容設定的。此演算法有時會較慢，這是由於它需要在確定最終的佈局之前訪問表格中所有的內容。所以第一個是正確的。對於第二個選項，只能是用示例來證實了，可以參考下面的截圖：

從圖中紅色部分可以看到，當我設定col元素的width 為100px時，那一列的單元格的寬度恰好就是col元素的寬度，所以第二個選項也是對的。第三個選項，我們任然可以從實際例子中得出答案，看下面截圖：

當我們給第一個單元格設定了width為200px時，那列的單元格寬度恰好是第一個單元格的寬度，所以第三個選項也是對的。最後一個選項經過實際測試，是個錯誤的選項，表格的寬度並不會與父元素等寬。所以這個題目的正確答案時1，2，3。在做這題的時候，我根本不知道這些，我唯一肯定的答案就是第一個選項。

這一題，又是一道很有深度的題目，我選的是1和3。不過在看完這篇文章(https://user-gold-cdn.xitu.io/2018/4/9/162a8b74f5bc848b)之後，發現這一題似乎沒有正確答案，不知道騰訊出筆試題的人知不知道。上面那篇文章列舉了幾中常見的圖片的http請求情況： 1、對於隱藏圖片和隱藏元素的背景，Opera不會產生請求。
2、對於隱藏元素的背景，Firefox也不會產生請求。
3、對於尚未插入DOM樹的img元素，Opera不會產生請求。
4、基於webkit引擎的Safari和Chrome，支援多背景圖。
5、其它情景，所有主流瀏覽器保持一致。

對於第二個選項，經過實際的測試，並不能觸發http請求，因為我在 textarea標籤中加入其它的標籤根本就沒用，只能以文字的形式顯示在textarea標籤中。其他的情況我在這裡就不細說了，各位可以看看我連結的那篇文章，還是非常有參考價值的。

看了這題，不知道大家有沒有什麼頭緒，我是一點都不知道的，因為我連什麼是界標角色都不知道，所以這題只能靠猜了。我做的時候，理解的界標元素就是邊界的標誌。百度了一下，與我理解的差不多，這題其實沒多少意思，就是根據英文單詞的意思來判斷是不是一個界標屬性，這題選擇1，2，4，5，6。

看完這題的題目，我又醉了，css的特殊性我根本沒聽說過啊，怎麼破，沒辦法，只能瞎猜了！這題肯定錯了。今天百度了一下，還是很漲姿勢的。 在CSS中，會根據選擇器的特殊性來決定所定義的樣式規則的次序，具有更特殊選擇器的規則優先於具有一般選擇器的規則，如果兩個規則的特殊性相同，那麼後定義的規則優先。計算規則可以看下面一張圖：

我們把特殊性分為4個等級，每個等級代表一類選擇器，每個等級的值為其所代表的選擇器的個數乘以這一等級的權值，最後把所有等級的值相加得出選擇器的特殊值。
第一等：代表內聯樣式，如: style=””，權值為1000。
第二等：代表ID選擇器，如：#content，權值為100。
第三等：代表類，偽類和屬性選擇器，如.content，權值為10。
第四等：代表型別選擇器和偽元素選擇器，如div  p，權值為1。
注意：通用選擇器（*），子選擇器（>）和相鄰同胞選擇器（+）並不在這四個等級中，所以他們的權值都為0。
知道了這些，就知道這道題的答案了。這道題正確選項應該是2，3，4。關於css特殊性的問題，可以看看這篇文章的介紹（http://www.iinterest.net/2010/05/08/css-specificity/）。

這一題相對比較簡單，值得一提的是，Media Queries到底能不能用高度來過濾裝置呢？我看了看CSS3的規範，發現高度也是可以過濾裝置的，只不過我們習慣用寬度來過濾裝置，所以這題應該選1，2，3，4。我又錯了，?！

這一題又一個坑，基本沒怎麼接觸reflow這個東西，筆試前又沒怎麼去刷題，所以這題只能憑感覺了。百度了一下reflow，有一篇文章寫的不錯（http://blog.sina.com.cn/s/blog_877284510101jo8l.html）。這篇還介紹了repaint這個東西，對這些不熟悉的可以看看。什麼叫reflow呢？瀏覽器為了重新渲染部分或整個頁面，重新計算頁面元素位置和幾何結構（geometries）的程式叫做 reflow。在哪些情況下會發生reflow呢？在以下情況會發生reflow：
1.改變窗囗大小
2.改變文字大小
3.新增/刪除樣式表
4.內容的改變，如使用者在輸入框中敲字(這樣也會-_-||)
5.啟用偽類，如:hover (IE裡是一個兄弟結點的偽類被啟用)
6.操作class屬性
7.指令碼操作DOM
8.計算offsetWidth和offsetHeight
9.設定style屬性
根據reflow的定義，這下就知道這題選什麼了，這題的正確答案是1，2，3，5，6。

這題考的是絕對定位，絕對定位在css中是個比較重要的知識，裡面包含很多細節。設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種型別的框。絕對定位使元素的位置與文件流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。所以這題應該選1，4，第二個選項明顯是錯誤的，包含塊並不是viewport（視窗）。總算是對了一題了。

這一題又是一個坑，對於http程式碼所表示的含義，不常用的還真不記得了。只能百度了。這題正確選項是4。貼出http程式碼所表示含義大全，請戳（http://tool.oschina.net/commons?type=5），這麼多真心記不來。

終於碰到一道比較熟悉的題了，這題毫不猶豫的就選了3。這題考的是閉包，再熟悉不過了，這裡不詳解。不清楚的可以看看這篇有關閉包的文章（http://www.mamicode.com/info-detail-500673.html）。

後面終於碰到算是比較正常的題了，這題果斷選了第3個。substring函式接受兩個引數，即substring(start,end)，從零開始索引。這個要與substr()這個函式區分，substr()函式的第二個引數是length，表示取多長的字串。所以這題就不多說了。

最後是三道大題，感覺騰訊筆試給的時間不是一般的坑，30道選擇題，而且大部分都是多選 ，但是隻給你30分鐘，而後面三道大題，居然給你90分鐘去完成。後面的大題雖然做的不太好，但是我花了半個小時就交卷了。選擇題做的不是很好，所以就不指望大題能做多好了，幾個大題只是象徵性的給了個思路。各位感興趣的可以自己做著試試看，這幾道大題難度不大，就是有很多細節需要注意的。

騰訊校招筆試就這麼完了，做的很一般，筆試也沒怎麼去準備，就這樣結束了。

9月11號，突然收到騰訊校招發來的郵件，郵件是調查面試地點意向的。我投的是UI開發這個崗位，在深圳沒有設定該崗位，只有廣州有，於是直接填了可以去廣州面試。
接下來的幾天，我根本就沒心思去關心騰訊校招這事兒。時逢接到了一個網站前端外包和網頁設計的私活，我就專心的做這個去了。

9月15號下午，我正做一個網頁設計，突然，收到騰訊校招發來一封郵件。看了郵件，居然是騰訊校招的面試邀請，地點是廣州天河區的一家酒店。收到面試邀請的通知，我既有種說不出的高興，又感到有些緊張。高興是因為筆試做的不怎麼樣，居然收到了面試邀請，緊張是因為我壓根兒就沒準備面試，怎麼面啊！搞得我做私活兒時都按捺不住自己的心情。不管了，去廣州吧！當時直接就下定決心去廣州面試，試試水，畢竟是鵝廠發來的面試邀請。

當晚做網頁設計，跟客戶發生了糾紛，對方的設計要求沒達到。為了不影響去面試，只能跟客戶說我會解決的。晚上就拼命的做。第二天發給客戶看設計稿，結果客戶依然覺得沒達到要求，要求退款。坑爹啊，當時心情是一萬個草泥馬！不管了，鵝廠的面試比較重要，最後直接跟客戶說，隨便你！跟客戶說了幾句，就奔向去廣州的路上了。從深圳坐高鐵到廣州，很快就到了，接著坐地鐵，到了騰訊發的郵件說的那個路口。剛從地鐵站出戰，就看到一個大巴車——騰訊接送面試者用的車。跟著我就上車了。

終於到了騰訊說的那家酒店。在酒店門口，站了很多人，都是來面試的。進去酒店裡面，感覺人更多，酒店大堂都是面試的。大堂中間放著一個牌子，寫著“罷免處”，看著我都激動了，還有這麼來霸面的！在大堂轉悠了一會兒，就上了二樓，來到二樓的一個大堂裡面。裡面人更多，大部分都是面試產品經理和市場營銷的，這些人都是群面。看到這麼多人，心中又有些不安分了，還沒到面試，心情就緊張起來。

環顧四周，看到有個簽到的地方，就跑去簽到了。簽到處的人給了張卡片，上面寫的是面試地點和麵試時間，看到是兩點鐘面試，時間還早，我就找了個座位坐下了！才12點多，坐我後排的人已經面試完了，於是就轉過頭跟他們瞭解情況。一詢問，才知道他們都是面試後臺開發的，一同的還有個女孩子，也是做後臺開發技術的。真是難得啊，算是碰上女程式猿了。向他們瞭解了一下面試官問的問題，他們都說問的很基本，感覺面試官很水，很快就結束了面試！聽他們這麼一說，心情瞬間舒暢了許多，感覺沒什麼好擔心的。

離我面試時間還有一個多小時，我就到處轉悠了下，看了看現場的其它情況！其實說白了，心中還是有點虛，對接下來的面試情況還是沒底！在接下來的一個多小時裡，我不停的喝水，肚子也有些餓，就吃了點騰訊提供的餅乾，坐在那聽人家聊面試情況！

在焦急的等待中，我也不時的招人搭訕，瞭解一下其他人都是面試什麼崗位的，同時也緩解一下我那緊張的心情。問了好幾個身邊的人，發現沒一個是面試我那個崗位的，搞得我又沒底了！

離面試時間越來越近了，我也越來越緊張，不停的喝水，不停的上廁所！最後，終於唸到我的名字，終於要上戰場了，終於要去面試了！我趕緊收拾好東西，走向電梯口，進了電梯！

面試地點在22樓，真是高處不勝寒！到了22樓，平靜了一下心情，拿出包裡的簡歷，就朝著面試房間去了！

面試房間的門開著，裡面的面試官正坐在那兒等待著，我敲了幾下門，就進去了！面試官請我坐下，我坐下之後，拿出自己的簡歷給他了！只見他喵了一眼簡歷，就把簡歷放到一邊，接著就問：“簡歷上沒看到你最近做的作品，你最近有做什麼作品嗎？”“有。”我緊張的答道。於是手指著簡歷上的第一條，說：“這個是暑假在公司實習做的一個專案，由我負責前端頁面的設計與開發”。突然，房間來個電話，打斷了我的話，還好沒嚇到我，不然心情只會越發緊張。面試官接完電話，就接著面試我，說：“你有帶作品嗎？我想看看作品。”幸好我帶的有優盤，毫不有的就回答說：“有。”於是我就從包裡拿出我的優盤給他。開啟優盤，我指著一個圖片給他看，自豪的說：“這是暑假做的專案設計稿。”說到這裡，其實是有點裝逼的，只是想讓他看到我還會做設計！結果他什麼都沒說，只是嗯了一下。接著，我就開啟了暑假做的那個webapp專案給他看。開啟之後，他就開始看這些頁面，而我就不停的在旁邊向他介紹這個專案用到的技術，為了顯得我很6！接著，他開啟了瀏覽器的開發者工具，看裡面的原始碼。接著就問了一連串的問題，問我這裡為什麼要這麼寫，問我那裡為什麼要加這段程式碼。前面的問題還好，都知道，到了後面，問到一個我不是很熟的問題，這個佈局還能用什麼方式實現。這時，我就說了一個我記得不是很清楚的屬性，說的不明不白的。接著又說到了flexbox佈局，到了這裡，我說話已經沒什麼邏輯了，因為我對flexbox佈局不太熟，接觸flexbox佈局已經是半年多以前的事兒了。沒辦法，只能說我對flexbox佈局不是很熟。

到後面，又問到一個很久之前接觸的問題，你用的字型圖示，能說說字型圖示有哪些格式嗎？問的我有些不知所措，我只說出來兩個，還有兩個格式實在接觸的不多，用字型圖示的時候也沒怎麼去記它的格式。這時他又問，你在用字型圖示的時候有沒有遇到過什麼問題？我直接就回答沒有，因為是webapp開發，所以用字型圖示的時候真的沒有遇到什麼問題。結果他補充到，那你是怎麼解決相容性問題的？我突然意識到，這跟前面的問題其實是一個問題，就是字型圖示格式問題，不同的瀏覽器相容不同的格式。可想而知，這題又答不好了，我只回答說，不同的瀏覽器加對應的字首。 就這樣，面試官的問題問完了，到了最後一個問題，老套路，問我還有沒有什麼問題要問他的！我就發問了，UI開發這個崗位平時都做些什麼工作？面試官就解釋道，UI開發是，吧啦吧啦吧啦。最後才知道，UI開發原來就是介面架構師。我已經醉了，我理解的UI開發就是又能開發又能設計，恰好我這兩個都學了，以為會很有優勢，然並卵！

面試結束了，我坐著電梯就下樓了！在電梯中，碰到一個剛面試好的妹子，就問她面試什麼崗位的，她說是面試前端開發的。居然碰到同行了，接著就多聊了幾句，問她面試怎麼樣，面試官問了什麼，學前端學了多久了之類問題。聊完之後才發現，我應該投前端開發的，因為我並沒有打算做介面重構。

就這樣結束了鵝廠校招的初試，回到深圳的時候已經晚上六點多了，什麼都沒想，等面試結果。第二天起來，在騰訊校招微信公眾號上查詢了一下面試結果。

很遺憾，沒能過初試。面試雖然沒過，但是覺得也沒什麼。因為我投簡歷的時候，沒想到還能去初試，我也沒怎麼花時間準備面試，面試也算是正常發揮。不過這給我明年的實習應聘又增加了一些經驗，已經很不錯了！

今天的總結就到這裡了，希望在接下來的半年裡，繼續深入學習，爭取明年能找一家合適的公司。

https://juejin.im/post/5aaf2a95f265da239b413aa1