騰訊CSIG一二三+HR面經(jīng)驗(yàn)+timeline（已OC）

4/29 技術(shù)一面（90min）

為什么選擇前端（答：注重用戶表達(dá)和體驗(yàn)；所見即所得，反饋感強(qiáng)）
實(shí)習(xí)相關(guān)：哪個(gè)部門，什么技術(shù)棧
1. 框架理解（例如nest.js為什么要基于express/fastify等層層封裝 - 答：類似于裝飾器模式，不斷往上面加功能）
2. 除了裝飾器模式還知道哪些設(shè)計(jì)模式？（訂閱-發(fā)布，工廠模式）
個(gè)人項(xiàng)目介紹-最具有挑戰(zhàn)性的項(xiàng)目-why-技術(shù)選型
使用 AI 工具了嗎？如何使用的？
知道閉包嗎？為什么出現(xiàn)閉包？
閉包會(huì)產(chǎn)生什么問題？（內(nèi)存泄露）那怎么解決內(nèi)存泄露？
Promise解決什么問題（回調(diào)地獄），簡述如何把回調(diào)改成Promise
瀏覽器事件循環(huán)
回流和重繪，什么時(shí)候觸發(fā)，如何減少（答：我只知道 React 用 Virtual DOM 來合并多次 DOM 操作一起 commit，只回流一次）
那講講 React 的虛擬 DOM 和 Fiber 吧
useLayoutEffect和useEffect有何區(qū)別？如何模擬生命周期？
HTTP 1/2/3 的主要區(qū)別
“Git 會(huì)嗎？哦，我看你 GitHub 有一堆項(xiàng)目，咱不用問了（面試官好可愛哈哈哈哈）”
手寫題：實(shí)現(xiàn)一個(gè)throttle
手寫題：在二叉搜索樹（BST）里找到第 K 大的值
1. 我先寫了一個(gè)記憶化搜索+貪心，過了用例。面試官提示：知道樹的遍歷嗎？
2. 我（醍醐灌頂版）：“Oh！！中序遍歷?。∥?min寫出來！！”
3. 面試官：“好，知道你會(huì)，不用寫了（開始反問環(huán)節(jié)）”

5/1 技術(shù)二面（80min）

實(shí)習(xí)深深深深深挖（25min）
（接著實(shí)習(xí)的 Node 項(xiàng)目問）中間件知道是做什么的嗎？用過哪些？
對(duì)大模型的理解和應(yīng)用
用 Webpack 還是 Vite？（都用）講講你的理解，它們的區(qū)別
為什么個(gè)人項(xiàng)目用 Vite，實(shí)習(xí)的時(shí)候的腳手架都是 Webpack？
Vite 開發(fā)環(huán)境、生產(chǎn)環(huán)境有何不同？（開發(fā)環(huán)境不會(huì)全部打包）
Webpack 和 Vite 的 Tree shaking
React Fiber（梅開二度……）
React Hooks 是做什么的？常用哪些 hooks？
useMemo, useCallback 和 useRef 都是性能優(yōu)化 / 緩存類 Hook，有什么區(qū)別？
TCP 和 UDP 區(qū)別，TCP 三次握手，SYN 攻擊
跨域，同源策略
前端優(yōu)化，使用過哪些優(yōu)化方式（我說沒怎么接觸過……）
TS 用過嗎？type 和 interface 有何區(qū)別？
手寫題（這次是 share screen 在本地寫）：

對(duì)算術(shù)表達(dá)式求值：給定一個(gè)字符串，輸出對(duì)應(yīng)的計(jì)算結(jié)果，包括加減乘除，小括號(hào)，只考慮正整數(shù)，例如"2+3*2" => 輸出8

例如：1+2*(5-2)+4 => 1+2*3+4 => 1+6+4 => 11

（代碼見下一頁，最優(yōu)解是逆波蘭表達(dá)式，但我不會(huì)，寫了個(gè)同樣是O(n)的多輪迭代

手寫題2: 有一種花，兩種鳥，花定時(shí)開放，鳥看到花開會(huì)叫，鳥的叫聲不一樣，用代碼來實(shí)現(xiàn)這樣一種場(chǎng)景（我：？？？？？不明所以……寫了兩個(gè)類，類似于發(fā)布訂閱）
評(píng)價(jià)：代碼能力挺好的……（秒過，面試官說“如果有三面，要安排到五一回來”）

// 對(duì)算術(shù)表達(dá)式求值：給定一個(gè)字符串，輸出對(duì)應(yīng)的計(jì)算結(jié)果，包括加減乘除，小括號(hào)，只考慮正整數(shù)
// 1+2*(5-2)+4 => 1+2*3+4 => 1+6+4 => 11

function calculate(str: string): number {
  let stack: number[] = [];  // 下標(biāo)
  let result = 0;
  // 處理括號(hào)，如果沒有 () 則不用遞歸
  for (let i = 0; i < str.length; i ++) {
    let c = str[i];
    if (c === '(') {
      stack.push(i);
    } else if (c === ')') {
      let startIdx = stack.pop() as number;  // 最后一個(gè)元素，也就是括號(hào)開始
      if (stack.length === 0) {
        const inner = str.substring(startIdx + 1, i);
        const res = calculate(inner);
        // 替換原來括號(hào)部分的東西
        return calculate(str.substring(0, startIdx) + res + str.substring(i + 1));
      }
    } 
  };

  // 解析
  let components: (number | string)[] = [];
  let currentNumber = 0;
  for (let c of str) {
    if (["+", "-", "*", "/"].includes(c)) {
      components.push(currentNumber);
      currentNumber = 0;
      components.push(c);
    } else {
      currentNumber = currentNumber * 10 + Number(c);
    }
  }
  components.push(currentNumber);

  // Tested
  // 乘除  2*3*3 -> [--, --, 6, *, 3]
  for (let i = 0; i < components.length; i ++) {
    if (components[i] === "*" || components[i] === "/") {
      // 計(jì)算 i-1 和 i+1
      let temp: number;
      if (components[i] === "*") {
        temp = (components[i - 1] as number) * (components[i + 1] as number);
      } else {
        temp = Math.floor((components[i - 1] as number) / (components[i + 1] as number));
      }
      // 替換
      components[i + 1] = temp;
      components[i] = components[i - 1] = "--";  // 無用占位符
    } 
  }
  // 加減 [2, +, 3, -, 5]
  components = components.filter((c) => c !== "--");
  let isAdd = true;
  for (let i = 0; i < components.length; i ++) {
    if (components[i] === "+" || components[i] === "-") {
      isAdd = (components[i] === "+");
    } else {
      result += (isAdd ? components[i] as number : -components[i]);
    }
  }
  // console.log(result)
  return result;
}


console.log(calculate("(1+2*(5-2))*4"));
console.log(calculate("20*11+80/4"))
console.log(calculate("((1+2)*(5-2))*(((4+3)*2)+6)"));

5/7 技術(shù)三面（30min）

聊聊你做過的項(xiàng)目
1. 有沒有上線，有沒有用戶（沒有，只是demo）
2. 看一下部署的 URL（我發(fā)了3個(gè)，簡歷上沒寫的都發(fā)了，但只有一個(gè)是完成度高的）
3. 選擇其中一個(gè)展示。難點(diǎn)是什么？
4. 為什么要封裝很多個(gè) hooks（答：視圖和數(shù)據(jù)分離，方便維護(hù)）
聊聊實(shí)習(xí)
（畫風(fēng)突變）聊聊基礎(chǔ)問題：
1. 平時(shí)使用哪些協(xié)議？（HTTP最多，有寫過 TCP/UDP socket 的 C++ 項(xiàng)目）
2. HTTP 狀態(tài)碼有哪些？
3. 深挖304 Not Modified：緩存在哪里？瀏覽器發(fā)請(qǐng)求了嗎？
JS 原型鏈知道吧（知道）最終指向哪里（null）然后就沒細(xì)問
留學(xué)學(xué)到了什么？研究方向（無，授課型）？有沒有投其他崗位？