前端一個月面試小記，字節(jié)、螞蟻、美團、滴滴

主要投遞了一些可視化與基礎設施建設相關方向的職位，經過一個多月主要的面試結果如下：

• 字節(jié)：基礎工程方向，offer
• 美團：可視化方向，offer
• 百度：小程序方向，業(yè)務面掛
• 滴滴：可視化方向，offer
• 360：奇舞團，offer
• 螞蟻：可視化方向，offer

下面就分別展開面試的一些公司，列出記得的技術與業(yè)務面的一些面試題，這里不列出答案，如果對問題感興趣，自我思考或許收獲更大一些

面試考察內容會主要根據(jù)個人項目經歷情況進行考核，故部分內容僅供參考

面試公司

字節(jié)

一面

• typeof 類型判斷情況
• 代碼執(zhí)行情況

let a = 0, b = 0;
function fn(a) {
  fn = function fn2(b) {
    alert(++a+b);
  }
  alert(a++);
}
fn(1);
fn(2);

• 代碼執(zhí)行情況

async function async1() {
  console.log('async1 start')
  await new Promise(resolve => {
    console.log('promise1')
  })
  console.log('async1 success')
  return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')

• 編程題：實現(xiàn) add 方法

const timeout = (time) => new Promise(resolve => {
  setTimeout(resolve, time)
})

const scheduler = new Scheduler()
const addTask = (time, order) => {
  scheduler.add(() => timeout(time))
    .then(() => console.log(order))
}

// 限制同一時刻只能執(zhí)行2個task
addTask(4000, '1')
addTask(3500, '2')
addTask(4000, '3')
addTask(3000, '4')
.....

//Scheduler ？
//4秒后打印1
//3.5秒打印2
//3進入隊列，到7.5秒打印3 
//...

• require('xxx') 查找包過程
• 算法題：判斷是否有環(huán)

function ListNode(val) {
    this.val = val;
    this.next = null;
}

let a = new ListNode(4);
let b = a.next = new ListNode(1);
let c = b.next = new ListNode(8);
let d = c.next = new ListNode(4);
let e = d.next = b;

//判斷是否有環(huán)
//比如上述是有環(huán)的

• Vue use 實現(xiàn)邏輯
• Vue 中 nextTick 實現(xiàn)原理
• Vue 組件中的 data 為什么是一個方法

二面

• 聊 Flutter、React Native、對比、繪制、原生API、性能考慮、webView、靜態(tài)文件分包加載更新、本地靜態(tài)文件服務器
• 編程手寫設計題：路徑添加刪除的數(shù)據(jù)結構與方法
• 編程手寫設計題：Alert 組件設計，避免多次重復彈出
• AMD、CMD、UMD、Common.js、ESModule 模塊化對比，手寫兼容多種模塊化函數(shù)
• 手寫 Proxy 實現(xiàn)數(shù)據(jù)劫持
• 手寫 deepClone
• 聊項目難點

三面

面試官玉北

• 自我介紹

• 聊成長最多方面

• 聊壓力最大的經歷

• 聊小組帶隊的經歷，組內成員的培養(yǎng)

• 聊線上事故的經歷

• 聊利用 Flutter 做了哪些事情

• 聊自己設計的技術方案

• 聊完整的系統(tǒng)設計經歷

• 聊前端復雜的設計

• 反問

美圖 - A 部門

• 代碼題: 部分翻轉

// 輸入：
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const n = 3
// 輸出：
[10, 7, 8, 9, 4, 5, 6, 1, 2, 3];

function reverse(arr, n) {
  
}

//解法一：雙指針方法

• 代碼題: 數(shù)組去重復，如果考慮復雜類型，考慮引用去重

// 數(shù)組去重
// 1. Set
// 2. filter O(n2)
// 3. Map 
// 4. js 對象 { }

const arr = [1, 1, 2, 3, '1', x, y, z];
const x = { a: 100 }
const y = { a : 100 }
const z = x
const arr2 = [x, y, z]

function uniq(arr) {
  // TODO:
}

• 如何判斷是 new 還是函數(shù)調用

function foo() {
     // new 調用 or 函數(shù)調用
}

new foo();
foo();

// 思路1：new.target
// 思路2：instanceof
// 思路3：constructor

• 以下函數(shù)調用會發(fā)生什么情況

function foo() {
   foo();
}

function foo2() {
   setTimeout(() => {
       foo2();
   }, 0);
}

foo();    //會有問題？棧溢出 
foo2();  // 會有問題？不會棧溢出
// 什么原因？

• requestAnimationFrame 與 requestIdleCallback 含義及區(qū)別

• 聊 chrome 進程模型，新開一個 tab 會有哪些線程

• 聊 Compositing Layers 是什么，獨立 layers 會有什么好處

• 一個透半明背景圖片下面有一個按鈕，如果發(fā)生點擊事件后，怎么讓按鈕觸發(fā)事件響應

• 聊 z-index

美圖 - B 部門

一面

• 聊項目（一小時）
• 代碼題：微任務宏任務代碼執(zhí)行順序
• 聊 Webwork 通信優(yōu)化
• 聊離屏渲染，多線程渲染
• 聊 Option 請求
• 聊 relative、absolute、fixed 區(qū)別？父元素與子元素兩個元素都 absolute 情況相對于誰 ？
• 代碼題：Promise 請求并發(fā)限制
• 聊 HTTPS 加密

function getData(url) {
  return new Promise(...)
}

const urls = [url1, url2, ..., urln]

function getDatas(urls) {

}

const p = getDatas(urls)
p.then(function(results) {
  console.log(results);
})

二面

• 聊項目
• 聊最具代表的項目
• 最近在干什么事情
• 聊職業(yè)發(fā)展目標
• 聊技術與業(yè)務權衡
• 代碼題：匹配替換值

let s = 'adf{ahhh},dsf,{c}'
let o = {ahhh: 1, b:2, c: 3}

• 聊前端工程化、CI/CD
• 聊平時有看什么書、什么技術架構的書
• 聊測試驅動開發(fā)
• 聊代碼規(guī)范參考來源、如何落實開發(fā)代碼規(guī)范
• 聊性能監(jiān)控業(yè)務

三面

• 聊項目
• 聊成長
• 聊團隊

百度

一面

• deepClone
• 知道的設計模式有哪些
• 分別說一下應用場景
• 依賴倒置設計原則、控制反轉思想、依賴注入、JS 的依賴注入
• 常用的 ES6 語法有哪些
• JavaScript 的 var，let 和 const 區(qū)別
• babel 編譯 for 循環(huán)中的 let 做的工作
• 閉包
• 作用域
• 原型鏈
• 聊項目編碼規(guī)范，如何實定位與落實團隊規(guī)范
• 基礎的規(guī)范定制來源
• ESLint 與 Prettier 區(qū)別
• 編輯格式化與 CLI 格式化觸發(fā)結果統(tǒng)一
• 聊瀏覽器輸入 URL 發(fā)生哪些過程
• 瀏覽器有哪些進程和線程，electron 有哪些進程
• DNS 解析過程
• TCP 鏈接過程
• HTTPS 設計到的內容
• 瀏覽器解析渲染有哪些過程
• JS 執(zhí)行的宏任務與微任務

二面

• 聊項目
• 手寫 vue 中 的雙向綁定及 Proxy 實現(xiàn)數(shù)據(jù)劫持
• 項目中做過哪些性能優(yōu)化工作
• 重排與重繪、requestAnimationFrame 與 requestIdleCallback 區(qū)別
• 聊 Web Workers 與 WebAssembly 技術
• 聊瀏覽器的緩存
• Webpack 打包原理、打包拆分怎么做
• Babel 工作原理
• 聊 SSR、CSR+SSR

滴滴

一面

• 聊地圖可視化場景

• 聊三維渲染庫的底層原理

• 聊三維場景點與物體的碰撞檢測算法

• 聊 Leaflet 源碼、底層實現(xiàn)

• 聊 svg 與 Cavans 應用場景區(qū)別

• 筆試題

  /**
  * 把任意一個函數(shù)，修飾生成一個帶重試功能的新函數(shù)。
  * 1、如果執(zhí)行失敗，進行重試；
  * 2、如果執(zhí)行成功，直接返回結果；
  * 3、如果重試了 n 次依然失敗，拋出最后一次的異常。
  * 4、新函數(shù)的表現(xiàn)行為要盡可能與原函數(shù)保持一致
  *
  * @param {Function} fn
  * @param {number} n 最大重試次數(shù)
  * @return {Function} 帶有重試功能的新函數(shù)
  */
  function useRetryable(fn, n) {
    // TODO
  }
  

• 計算費時場景
• 優(yōu)化指令
• 時間分片
• 多線程渲染
• 聊項目
• 聊 CPU 密集型算法、WebAssembly 技術、Golang
• 聊 Flutter，3D 是否支持
• Canvas 大量圖斑渲染性能優(yōu)化
• 聊 WebGL 性能優(yōu)化、 著色器分類、靜態(tài)批量繪制

二面

• 聊 Canvas 性能優(yōu)化

• 分層渲染、Canvas 透明如何處理

• 時間分片

• requestAnimationFrame 與 requestIdleCallback 區(qū)別

• 遍歷像素點優(yōu)化方法

• Webpack 中的 loader 與 plugin 區(qū)別

• Webpack 的事件用到的設計模式？

• 算法題

• 連續(xù)子數(shù)組的最大和
• 數(shù)組中的第 K 個最大元素
• 缺失的第一個正數(shù)

三面

• 組件與腳手架工具設計
• 聊三維渲染庫里面的渲染流程
• 聊三維中加載柵格與矢量數(shù)據(jù)對性能影響
• 瀏覽器的并行請求優(yōu)化
• HTTP 1.1 與 HTTP 2.0
• 代碼題：Promise 并發(fā)

// fn(params): Promise<Params>

function requestInOrder(requests, initialParam) {
 // TODO 
}

const request = (param) => {
  return new Promise((resolve, reject) => {
    setTimeout(resolve(param), param)
  })
}

requestInOrder([request, request, request], 1000).then(res => console.log(res))

• 聊項目中最有挑戰(zhàn)的事情
• Canvas 渲染多圖斑性能優(yōu)化與如何檢測優(yōu)化效果
• 聊 Golang 協(xié)程、協(xié)程與線程的區(qū)別

360

一面

• 自我介紹
• 聊 CPU 密集型代碼，聊利用 GPU 并行運算
• 看了 Github 沒有問大多技術問題，主要介紹聊團隊情況（半小時）

二面

• 聊項目
• 聊 Code review
• 聊意向情況
• 聊團隊規(guī)模
• 聊 Golang 與 Node.js 區(qū)別
• 聊線程與協(xié)程、用戶態(tài)與內核態(tài)線程，Golang 的協(xié)程機制
• 聊 Golang channel 與 Node callback
• 聊團隊參與的產品

螞蟻

筆試題

1. 試題一

<!-- 給定 CSV 文件，轉換成樹結構 -->
interface Person {
  name: string;
  age: number; 
  parent: Person[]; 
  children: Person[];
}

const csv = `
name,age,parent
Bob,30,David
David,60,
Anna,10,Bob
`;

• 考察點：
• 代碼編寫規(guī)范
• 測試技能掌握程度
• 數(shù)據(jù)結構

2. 試題二

• 實現(xiàn)一個前端緩存模塊，模塊支持設置最大容量，超出容量時采用 LRU 機制，主要用于緩存 xhr 返回的結果，避免多余的網(wǎng)絡請求浪費，要求：
• 生命周期為一次頁面打開
• 如果有相同的請求同時并行發(fā)起，要求其中一個能掛起并且等待另外一個請求返回并讀取該緩存
• LRU機制當緩存容量達到上限時，它應該在寫入新數(shù)據(jù)之前刪除最久未使用的數(shù)據(jù)值，從而為新的數(shù)據(jù)值留出空間。
• 考察點：
• 對 xhr 的理解，用代碼解決問題的能力
• 對緩存的處理能力

3. 試題三

在一個 html canvas 畫布上繪制上百個圓，點擊其中的一個圓，將其繪制在最上面（原先的繪制不保留），并設置不同的顏色

要求：

• 能夠點擊選中圓
• 將選中的圓繪制在最上面時，其他的圓的繪制順序不變
• 考慮性能優(yōu)化

筆試題代碼已放到倉庫 ant-fe-interview^[1]

一面

• 聊筆試題
• 聊工作做的主要事情與內容
• 聊工作中技術預研和選型的考慮
• 聊項目
• 聊技術遇到比較棘手的問題
• 聊與同事合作的例子
• 聊前端工程化的思考

二面

• 聊項目從開發(fā)到上線的流程做的事情
• 聊技術預研的一個案例
• 聊 CPU 密集型算法性能優(yōu)化深入，聊 REST 服務并發(fā)思考
• 聊地理可視化可以做哪些事情
• 聊工作之外學的東西及實踐，Flutter、Golang
• 聊目前工作節(jié)奏、換工作的考慮、對新工作有什么期望

三面

• 目前這份工作的選擇
• 聊前端是怎么學習的、聊工作是怎么學習的
• 聊比較深入了解前端開源的庫
• 聊 svg 與 Canvas 區(qū)別
• 聊常用的框架
• 聊地理可視化常見的可視化的庫
• 聊近幾年的業(yè)務的發(fā)展和自己的成長
• 聊近幾年帶給業(yè)務的價值
• 聊接下來想做什么事情
• 聊對可視化的理解
• 聊換工作的主要原因
• 聊工作與生活

寫在后面

以上就是技術面試的主要內容，面試一般面試官會根據(jù)人經歷情況進行考察，故部分內容僅供參考。如果平時候選人的經歷比較有內容，面試官可能就不會問過多的八股文，而是更看重項目內容，如何思考，如何實現(xiàn)，如何解決問題，帶來什么價值等。但也有個別情況，比如投遞的方向與自身項目經歷關聯(lián)性不大，面試官可能會問更多基礎相關的內容。

除此之外，面試過程中謙虛，自信與謙虛得適當?shù)哪媚蠛?，否則面試官可能認為候選人沒有底氣，缺乏對技術的自信。

有時候選擇比努力更重要，投遞方向要明確，探索自己到底想干什么，找到自己的興趣點是最好的。面試過程中可能會有失敗，但可能外界因素也占一部分原因，切莫自亂陣腳，畢竟雙向選擇。

作者：luxiaolu

https://github.com/liuvigongzuoshi/blog