前言

本人現在大三菜雞，想在暑期找一份實習鍛鍊鍛鍊自己，所以也去投了一下簡歷試了試面試emmm感覺自己還是太菜了嗚嗚嗚，真的還得加強一下自己才行，特別是算法方面，太吃虧了嗚嗚嗚。大家最近趕快投！！提前批！掛了也不會計入系統！以後再努力努力！！衝鴨！！

有興趣可以看看俺整理的知識點或許有所幫助呢~祝大家早日實習上岸！！！ juejin.im/post/5e5a75…

順便安利一下小項目~嘻嘻嘻，希望走過路過給個star！

由衷感謝 CVTE 讓我技術面都過了嗚嗚嗚，明天HR面，希望不要讓我掛了嗚嗚嗚，可憐巴巴

“我自己是一名從事了6年web前端開發的老程序員（我的微信：web-xxq），今年年初我花了一個月整理了一份最適合2019年自學的web前端全套培訓教程（視頻+源碼+筆記+項目實戰），從最基礎的HTML+CSS+JS到移動端HTML5以及各種框架和新技術都有整理，打包給每一位前端小夥伴，這裏是前端學習者聚集地，歡迎初學和進階中的小夥伴（所有前端教程關注我的微信公衆號：web前端學習圈，關注後回覆“2020”即可領取）。

總結

提前總結一下吧，這些面試讓我感覺到emmm，他們都比較重視計算機網絡，網絡安全，框架原理方面的知識，HTTP協議，TCP握手，各種網絡方面的東東...... 啊好多好多啊基礎部分，每次都能問到新的不會的東東，爆哭
總之吧emmm還是基礎得打好，框架原理還有node方面也需要重視。然後面試官會審視簡歷，大多會根據簡歷來問。所以不熟的沒把握的千萬不要寫在簡歷上！！！
其次就是如果有自己的小項目就最好啦，面試官基礎部分了解過後就會對項目進行提問啊，問問有什麼亮點，自己遇到的難點，如何解決。他們很重視解決問題的能力。不過如果項目有明顯的的不合理的地方或者不足，他們就會抓出來進行提問，問你將來怎麼解決的之類的。
一般會問你是如何學習前端的，然後最近在看什麼文章，最近在瞭解什麼新的知識熱點等等，平時的積累也是挺重要的，然後也會根據你說的內容來進行提問，所以有能力的話也可以視圖引導面試官來提問你擅長的地方哈哈哈哈（手動狗頭）

問的東西都偏向於基礎，然後慢慢昇華一下，到項目，到思維擴展，實際情景的應用等等。面經內容不全，大概就是這些吧！！哈哈哈湊活着看看！或許有幫助！

CVTE 一面（過）

電面，面試官很和藹hhhh，全程都是以聊天的方式進行下去，問了一下項目也給了一些意見。哈哈哈哈印象最深的就是一直問我覺得自己哪裏牛逼哪裏牛逼hhhh

HTTP1.1 HTTP 2.0
TCP與HTTP有何區別
TCP爲何要三次握手
父元素絕對定位，子元素設置絕對定位，也可以生效嗎
調試工具的performance和network
js阻塞（<script> <link>）
webpack流程
es6
箭頭函數this指向
事件監聽中普通函數與箭頭函數的this指向
cookie
localStorage能替代cookie嗎
網絡攻擊csrf和xss
瀏覽器緩存
etag與last-modify誰優先級高，爲什麼
不定寬高水平垂直居中
閉包
自執行函數
for每隔時間打印數字
cookie一般用來幹什麼
H5特性
url輸入到渲染髮生了什麼
React的事件機制
事件循環
setTImeout一定準時嗎
行內元素與塊級元素

CVTE 二面（過）

視頻面，這一面還是有點緊張的，突然看見一個戴着口罩的小帥哥，但就聊了聊，然後還是主要說的項目，然後針對項目的功能問了幾個問題，也發現幾個不足的地方，提出了挺多的建議的，很感謝這個面試官，看我做不出來算法題也很有耐心給我指導，感動，有一些細節的地方，深入理解的部分，見到我不會也不會爲難我，就大概跟我解釋一下，很棒！

爲什麼學前端
做過什麼項目嗎
React的坑
hooks
爲什麼React不學Vue做雙向綁定
React單向數據流有什麼好的地方
跨域
cors的options（如何緩存）
localStorage如何設置過期時間
你如何判斷登陸態過期
爲什麼不用cookie，用cookie有什麼不好的地方
http-only
如果聊天室發送消息網絡卡頓，導致消息記錄的時間錯亂怎麼辦
你的項目封裝了什麼組件
瞭解node嗎
事件循環有什麼不同
node的優勢
flex改變方向
垂直居中
原型鏈，有什麼用，怎麼判斷
爲什麼nodejs是非阻塞的
如何判斷一個方法是對象自己的還是原型鏈上的（hasOwnProperty）
算法題

// 根據實例輸入輸出矩陣規律完成以下 matrix 函數：
function matrix(n) {

}

matrix(n).forEach((item, i) => {
    console.log(item);
});


// 示例 1
// 輸入: 3 or 4
// 輸出: 
// [ 0, 2, 0 ]
// [ 2, 1, 2 ]
// [ 0, 2, 0 ]

// 示例 2
// 輸入: 5 or 6
// 輸出: 
// [ 0, 0, 3, 0, 0 ]
// [ 0, 3, 2, 3, 0 ]
// [ 3, 2, 1, 2, 3 ]
// [ 0, 3, 2, 3, 0 ]
// [ 0, 0, 3, 0, 0 ]

// 示例 3
// 輸入: 6 or 7
// 輸出: 
// [ 0, 0, 0, 4, 0, 0, 0 ]
// [ 0, 0, 4, 3, 4, 0, 0 ]
// [ 0, 4, 3, 2, 3, 4, 0 ]
// [ 4, 3, 2, 1, 2, 3, 4 ]
// [ 0, 4, 3, 2, 3, 4, 0 ]
// [ 0, 0, 4, 3, 4, 0, 0 ]
// [ 0, 0, 0, 4, 0, 0, 0 ]
複製代碼

還是算法吃虧，這題沒有寫出來，面試官給了點思路，提示只需要搞定四分之一，然後可以進行翻轉，雖然提示了，但還是做不出哈哈哈，面試完之後試了試才做出來（感謝面試官不掛之恩！）

以下是根據面試官給的提示做出來噠，就是先算好四分之一，然後進行翻轉拼接

function matrix(n) {
  // 求長度
  let len = Math.ceil(n / 2)
  let arr = Array.from({ length: len }, _ => Array.from({ length: len }, __ => 0))
  let temp = null
  // 算出四分之一的矩陣
  for (let i = 0; i < len; i++) {
    for (let j = 0; j < len; j++) {
      if (i + j >= len - 1) {
        arr[i][j] = len * 2 - i - j - 1
      }
    }
  }
  // 水平翻轉，搞定上半部分
  for (let row = 0; row < len; row++) {
    temp = [...arr[row]].reverse().splice(1)
    arr[row] = arr[row].concat(temp)
  }
  // 垂直拼接
  temp = [...arr].reverse().splice(1)
  arr = arr.concat(temp)
  return arr
}
複製代碼

字節跳動（等一封感謝信嗚嗚嗚，爲什麼不讓我死心！）

視頻面，還是算法吃了大虧嗷，全程題面，然後解釋各種知識點，提問等，算法給了提示還是做不出來，唉，太蠢了
（爲什麼還不給我感謝信！！！讓我有種錯覺可以被撈！！！）

是在官網投的日常實習生，也不知道是不是因爲不是內推的原因，自己感覺必掛了，但感謝信遲遲不到，爆哭，好歹嗚嗚嗚我也...努力過嘛，哭（啊，算法！洗內！）

大概記得的就這些主要的吧

block元素水平垂直居中

這裏我採用了兩種，一種是translate + absolute，另一種是在修改body樣式用flex，這裏注意一定要把body的height設置爲100vh不然會垂直居中不了

<body>
    <div class="block"></div>
</body>
複製代碼

讀代碼解釋原因，然後說出瀏覽器事件循環與node事件循環等知識點

console.log('begin')
setTimeout(() => {
  console.log('setTimeout 1')
  Promise.resolve().then(() => {
    console.log('promise 1')
    setTimeout(() => {
      console.log('setTimeout2 between promise1&2')
    })
  }).then(() => {
    console.log('promise 2')
  })
}, 0)
console.log('end')

// 答案是
/*
  begin
  end
  setTimeout 1
  promise1
  promise2
  setTimeout2 between promise1&2
*/
複製代碼

實現求和（柯里化）

sum(1)(2)(3).sumOf() // 6
sum(1, 2)(3).sumOf() // 6
sum(1, 2, 3).sumOf() // 6

// 一下爲答案
function curry() {
  let argsList = [...arguments]
  let fn = function () {
    argsList.push(...arguments)
    return fn
  }

  fn.sumOf = () => argsList.reduce((a, b) => a + b)

  return fn
}

let sum1 = curry()
let sum2 = curry()
let sum3 = curry()

console.log(sum1(1, 2, 3).sumOf())
console.log(sum2(1)(2)(3).sumOf())
console.log(sum3(1, 2)(3).sumOf())
複製代碼

讀程序，並解釋爲什麼，然後說一下上下文之類的各種知識

這裏被坑了，沒有注意到函數傳了一個a進去哈哈哈哈，然後說成了9 18 27，尷尬~

var result = []
var a = 3
var total = 0
function foo(a) {
  var i = 0
  for (; i < 3; i++) {
    result[i] = function () {
      total += i * a
      console.log(total)
    }
  }
}

foo(1)
result[0]()
result[1]()
result[2]()

// 答案是 3 6 9
複製代碼

算法，實現全排列

輸入"abc"返回他的全排列組合

以下爲答案
var permute = function (nums) {
  let path = []
  let visited = Array.from({ length: nums.length }, _ => false)
  let res = []
  DFS(nums, 0, nums.length, path, visited, res)
  return res
};

var DFS = function (nums, curSize, len, path, visited, res) {
  if (curSize === len) {
    res.push([...path])
    return
  }

  for (let i = 0; i < len; i++) {
    if (!visited[i]) {
      visited[i] = true
      path.push(nums[i])
      DFS(nums, curSize + 1, len, path, visited, res)
      visited[i] = false
      path.pop()
    }
  }
}
複製代碼

智力題：A,B拋硬幣，正面贏，A先手，A贏得概率是多少

這個完全懵逼嗷，大家覺得是多少呢！

阿里 - 不知名部門（暴斃）

電面，這個十分可惜，還沒開始準備直接暴斃

React原理
cookie的屬性
localStorage和sessionStorage的區別
localStorage能跨域嗎
重繪和迴流
httponly
csrf 和 xss

阿里釘釘 - 主要爲小程序（不合適）

視頻面，主要聊了項目，然後問了比較多網絡，以及安全的問題，團隊主要是做小程序的，問了挺多小程序的東東，直接懵逼，主管還是猛嗷嗚嗚嗚

小程序原生api
https加密原理
好的登錄態的實現
React的優勢
setState之後發生了什麼
React性能優化
hook的原理（如何實現）
小程序運行池
微信瀏覽器有什麼區別
Taro編譯的原理
事件代理（捕獲階段可以嗎）
React的事件委託到哪

阿里CBU（初面）

電面，感覺怪兇的哈哈哈，前面問的好好的，突然問起了Vue瞬間暴斃，原來是看到我簡歷上描述有個項目使用Vue開發所以問，以後一定不能吧這些不熟悉的放在簡歷上了！

事件委託
深淺拷貝的區別
Object.assign
BFC
Fiber
virtual dom
diff算法
hook
webpack流程
webpack打包出來的js的結構，內容是什麼
babel編譯原理
node的優勢
node中，async/await，generator，promise的區別，聯繫
多用戶來訪問聊天服務器，你有1000臺服務器，應該怎麼辦（坑啊）
Vue雙向綁定如何實現
Vue數據流
Vue與React的區別
一堆Vue.... (還說了句，你不會的還往簡歷上寫？以後不敢了！哭)

阿里飛豬（初面）

電面，這個是聊得最久的嗚嗚嗚，手機都燙了！面試官很好人，emmm就真的很棒棒，全程不會刁難你的那種，不會咄咄逼人，就一直引導你思考，然後問道深入的點，不會的話他也會說沒關係~感興趣的話去了解了解就行了，十分nice啊。
最後根據項目聊了很多也，然後給了很多建議，指出有些地方還可以改進改進，然後我也厚着臉皮問了問之前面試官問我的一到開放題。沒想到他竟然給我分享了好多好多種辦法，真的太感動了，真的好強好厲害，很詳細的告訴以後往什麼方向去做，然後如何去思考，如何去實現，最後花了挺長時間來介紹他們的部門，真的很棒！

輸入url到頁面渲染展示
DNS如何解析
輸入域名如何轉換爲ip地址，然後轉到服務器
gzip原理
cookie localStorage sessionStorage
cookie與token的本質區別（session）
閉包及其常見的應用場景
緩存
強緩存如何存
過期時間等參數瀏覽器是如何獲取的
服務器如何設置緩存設置頭
緩存的場景
call apply區別
React的事件機制
virtual dom
hooks的優勢，爲何被喜歡，常用的方式
React數據流
HOC，優勢及其常用方式
setState獲取更新的值
csrf 和 xss
flex佈局，及你常用的方式，兼容性
前端性能優化（你用過的）
node異步的歷史（答了async/await, generator）
webpack流程
webpack-dev-server原理
webpack配置項與常用插件
ES6的語法，及你常用的
Mobx的原理
盒模型與怪異盒模型
HTTP報文結構，請求頭有啥，響應頭有啥
最近看什麼書，看什麼文章，打算考研嗎
棧，隊列
10萬個數字找最大的K個數（描述了快排，及如何實現，時間複雜度，最好，最差的情況下）
DFS與BFS，如何實現
小程序與H5的區別，商業性、技術性（小程序有自己獨立的保護機制，獨立運行在一個地方，不會破壞現有生態）
nginx怎麼配置
阿里雲dns怎麼配置解析（A？TXT？）
箭頭函數和普通函數
按鈕設置監聽用箭頭函數this指向哪
jwttoken
服務器開啓服務（nohup，pm2）
Taro編譯原理
typescript優勢，爲何收到推崇

騰訊（撈錯了...）

啊，暴斃，在官網投的web前端，結果發來的邀請函卻是後臺開發，啊雖然被撈起來很開心，但是嗚嗚嗚不是期望的崗位鴨！哭

小菜雞面試の初體驗，自閉路上漸行漸遠......‍♂️

前言

總結

CVTE 一面（過）

CVTE 二面（過）

字節跳動（等一封感謝信嗚嗚嗚，爲什麼不讓我死心！）

阿里 - 不知名部門（暴斃）

阿里釘釘 - 主要爲小程序（不合適）

阿里CBU（初面）

阿里飛豬（初面）

騰訊（撈錯了...）

關於遊戲付費的一點想法

我通過CKA和CKS啦！

前端生產方式：過去 10 年回顧和未來 10 年展望

React實戰之React+Redux實現一個天氣預報小項目

面試被問項目經驗不用慌，按這個步驟回答絕對驚豔

小菜雞面試の初體驗，自閉路上漸行漸遠......‍♂️

截至 2020 年 2 月最受程序員歡迎的 20 個 CSS 框架，有沒有你的菜？

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

小菜雞面試の初體驗，自閉路上漸行漸遠......‍♂️

前言

總結

CVTE 一面（過）

CVTE 二面（過）

字節跳動 （等一封感謝信嗚嗚嗚，爲什麼不讓我死心！）

阿里 - 不知名部門（暴斃）

阿里釘釘 - 主要爲小程序（不合適）

阿里CBU（初面）

阿里飛豬（初面）

騰訊（撈錯了...）

字節跳動（等一封感謝信嗚嗚嗚，爲什麼不讓我死心！）