騰訊一面（2019前端實習崗）| 掘金技術徵文

前言

以前投遞了騰訊的實習生前端崗，一直沒有電話，查了下狀態說不合適，覺得涼涼了，今天卻收到了電話，出乎意料... 而後就開始了一面，一開始面試官說時間不會過久，大概30分鐘吧，結果整個過程也就持續了30分鐘吧。

下面是面試的過程：

---

自我介紹

• 簡單介紹了本身所在的學校和專業，以及學習的過程。

能不能來深圳工做(簡歷意向寫的廣州)

JavaScript做用域瞭解嗎？有多少種

• 全局做用域
• 函數做用域

問：JavaScript有塊級做用域嗎

答：ES5以前沒有塊級做用域，ES6提出了這個概念

let和var的區別

• var能重複聲明，let不能
• let的變量做用範圍不一樣，不存在變量提高

問：還有其餘嗎

答：...

ES6瞭解多少，用過哪些特性

• 簡單說了下本身用過的一些特性
  • 箭頭函數
  • 模板字符串
  • Class
  • module
  • 對象解構
  • Promise
  • ......

Promise瞭解嗎？有多少種狀態

• 三個狀態：
  • pending
  • fulfilled
  • reject
• 兩個過程：
  • pending -> fulfilled
  • pending -> rejectd

問：promise何時會進入catch 答：當pending爲rejectd時

講一下你簡歷上的react項目

• 簡歷上的項目，簡單的闡述了一下

react的生命週期有哪些

• 初始化
  • constructor
  • getInitialProps
  • getDefaultState
  • componentWillMount
  • render
  • componentDidMount
• 更新過程
  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate
• 卸載過程（這個沒答出來）
  • componentWillUnmount

何時會用到componentwillreceiveprops

• 用的很少，沒答上來
• 網上解釋

使用過構建工具嗎？webpack的loader是幹什麼的？

• 項目中使用了webpack
• loader是用來編譯和處理資源的

問：用過其餘構建工具嗎？

答：沒有...（gg）

vue和react使用起來有什麼區別

• 開放性題目，自由發揮

vue數據雙向綁定的原理

• 主要講了實現是基於Object.defineProperty
• 另外也大概闡述了下發布-訂閱者模式，主要是Observer，Dep，Watcher等

項目中用到的ajax是原生的，仍是用到了什麼庫？

• 都是用到了封裝的庫，主要用的是axios

http的狀態碼瞭解嗎？

• 簡單說了下2xx，3xx，4xx，5xx分別是幹嗎的
• 在這裏說到了304，因而有了下面的http緩存

什麼狀況下會返回304狀態碼？

• 這個問題比較複雜吧，這裏回答了一個Etag
  • ETag是HTTP1.1產物，服務器經過某種算法，給資源計算出一個惟一的標誌符，多是一個資源的MD5值，在把資源響應給客戶端的時候，會在實體首部加上"ETag: 值"，一塊兒返回給客戶端
  • 客戶端會保留這個字段，並在下次請求的時候一併帶過去給服務端，服務端接受客戶端傳來的ETag的值，而後進行比較先後的ETag的值是否一致，就能判斷資源相對客戶端是否被修改了
  • 若是匹配上了，服務端會返回304狀態碼，並告訴客戶端直接使用本地緩存便可，反之，則以正常的GET200形式返回資源
  • 對應的首部字段
    • If-None-Match：ETag-value
    • If-Match：ETag-value
  • 還有一種就是下面問的Last-Modified

http緩存，cache-control和etag有什麼區別

• 這裏雖然答上了，但感受也答的不是很好
  • Cache-Control的首部字段較多
  • 假若Cache-Control設置的緩存沒過時，那直接從本地讀取緩存便可，返回200（from cache），不須要向服務端發起請求
  • 使用ETag會向服務端發起請求，校驗後服務端再決定是否返回資源
  • ...

除了etag，last-modified知道嗎？

• 這個沒答上來，忘記了
  • 服務器將資源傳遞給客戶端時，會將資源最後更改的時間以"Last-Modified: GMT"的形式加在實體首部上一塊兒返回給客戶端
  • 客戶端爲該資源標記上信息，下次請求時，會將該信息帶在請求報文中一塊兒返回給服務端，服務端去作檢查，若服務器上該資源最終修改時間是一致的，則資源沒有被修改過，直接返回304狀態碼，不返回內容
  • 對應的首部字段
    • If-Modified-Since: Last-Modified-value
    • If-Unmodified-Since: Last-Modified-value

跨域有什麼處理方法？

• JSONP
• CORS
• 服務端代理
• and more then...

JSONP的原理是什麼？

• 利用script標籤支持跨域的屬性，用script標籤拿到包裹了數據的方法（至關因而返回了一段js代碼），在請求中包含callback，服務端注入參數後返回這個回調函數，而後script標籤拿到返回的js代碼跨域直接運行回調，須要先後端的配合。

JSONP能夠用post請求嗎？爲何？

• 不支持
• 由於script標籤只支持get請求...

cookie和localstorage有什麼區別？

• cookie數據大小不能超過4k
• cookie在服務端和客戶端之間來回傳遞
• cookie能夠設置不少屬性，max-age，path，expires等
• localStorage存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據
• localStorage存儲的數據容量更大

問：還有其餘嗎

答：.....(gg)

描述一下css的盒模型

• 講了下標準盒模型和怪異模式

實現垂直水平居中有哪些方法

• flexbox
• 絕對定位+margin負值（已知寬高）
• 絕對定位+transfrom負值（未知寬高）
• 絕對定位top left right bottom 0 + margin auto

問：絕對定位top left right bottom 0 + margin auto是在已知寬高的狀況下使用嗎？

答：我....忘記了

總結

大概30分鐘後，面試官就說暫時到這裏，有消息會盡快通知你，而後就結束了。以上問題問的仍是很基礎，有一些沒答上來，仍是得繼續加油。

4.20更新

後續juejin.im/post/5ad952…

掘金技術徵文：juejin.im/post/5aaf2a…