现在面试都问什么「字节蚂蚁美团滴滴面试小记」

Posted 2022-06-11 小生方勤

写在前面

笔者三年工作经验，平时工作上也会技术面试一些候选人，听江湖上传闻三年是个坎，目前刚好也有三年没有出来面试了，想出来考验考验自身功底如何？🙃

主要投递了一些可视化与基础设施建设相关方向的职位，经过一个多月主要的面试结果如下：

• 字节：基础工程方向，offer

• 美团：可视化方向，offer

• 百度：小程序方向，业务面挂

• 滴滴：可视化方向，offer

• 360：奇舞团，offer

• 蚂蚁：可视化方向，offer

下面就分别展开面试的一些公司，列出记得的技术与业务面的一些面试题，这里不列出答案，如果对问题感兴趣，自我思考或许收获更大一些

面试考察内容会主要根据个人项目经历情况进行考核，故部分内容仅供参考

面试公司

字节

一面

• typeof 类型判断情况

• 代码执行情况

let a = 0, b = 0;
function fn(a) 
  fn = function fn2(b) 
    alert(++a+b);
  
  alert(a++);

fn(1);
fn(2);

• 代码执行情况

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')

• 编程题：实现 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))


// 限制同一时刻只能执行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') 查找包过程

• 算法题：判断是否有环

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;

//判断是否有环
//比如上述是有环的

• Vue use 实现逻辑

• Vue 中 nextTick 实现原理

• Vue 组件中的 data 为什么是一个方法

二面

• 聊 Flutter、React Native、对比、绘制、原生API、性能考虑、webView、静态文件分包加载更新、本地静态文件服务器

• 编程手写设计题：路径添加删除的数据结构与方法

• 编程手写设计题：Alert 组件设计，避免多次重复弹出

• AMD、CMD、UMD、Common.js、ESModule 模块化对比，手写兼容多种模块化函数

• 手写 Proxy 实现数据劫持

• 手写 deepClone

• 聊项目难点

三面

面试官玉北

• 自我介绍

• 聊成长最多方面

• 聊压力最大的经历

• 聊小组带队的经历，组内成员的培养

• 聊线上事故的经历

• 聊利用 Flutter 做了哪些事情

• 聊自己设计的技术方案

• 聊完整的系统设计经历

• 聊前端复杂的设计

• 反问

美图 - 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) 
  


//解法一：双指针方法

• 代码题: 数组去重复，如果考虑复杂类型，考虑引用去重

// 数组去重
// 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 还是函数调用

function foo() 
     // new 调用 or 函数调用


new foo();
foo();

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

• 以下函数调用会发生什么情况

function foo() 
   foo();


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


foo();    //会有问题？栈溢出 
foo2();  // 会有问题？不会栈溢出
// 什么原因？

• requestAnimationFrame 与 requestIdleCallback 含义及区别

• 聊 chrome 进程模型，新开一个 tab 会有哪些线程

• 聊 Compositing Layers 是什么，独立 layers 会有什么好处

• 一个透半明背景图片下面有一个按钮，如果发生点击事件后，怎么让按钮触发事件响应

• 聊 z-index

美图 - B 部门

一面

• 聊项目（一小时）

• 代码题：微任务宏任务代码执行顺序

• 聊 Webwork 通信优化

• 聊离屏渲染，多线程渲染

• 聊 Option 请求

• 聊 relative、absolute、fixed 区别？父元素与子元素两个元素都 absolute 情况相对于谁 ？

• 代码题：Promise 请求并发限制

• 聊 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);
)

二面

• 聊项目

  • 聊最具代表的项目

  • 最近在干什么事情

• 聊职业发展目标

• 聊技术与业务权衡

• 代码题：匹配替换值

let s = 'adfahhh,bdsf,c'
let o = ahhh: 1, b:2, c: 3

• 聊前端工程化、CI/CD

• 聊平时有看什么书、什么技术架构的书

• 聊测试驱动开发

• 聊代码规范参考来源、如何落实开发代码规范

• 聊性能监控业务

三面

• 聊项目

• 聊成长

• 聊团队

百度

一面

• deepClone

• 知道的设计模式有哪些

  • 分别说一下应用场景

  • 依赖倒置设计原则、控制反转思想、依赖注入、JS 的依赖注入

• 常用的 ES6 语法有哪些

• javascript 的 var，let 和 const 区别

  • babel 编译 for 循环中的 let 做的工作

• 闭包

• 作用域

• 原型链

• 聊项目编码规范，如何实定位与落实团队规范

  • 基础的规范定制来源

  • ESLint 与 Prettier 区别

  • 编辑格式化与 CLI 格式化触发结果统一

• 聊浏览器输入 URL 发生哪些过程

  • 浏览器有哪些进程和线程，electron 有哪些进程

  • DNS 解析过程

  • TCP 链接过程

  • HTTPS 设计到的内容

  • 浏览器解析渲染有哪些过程

  • JS 执行的宏任务与微任务

二面

• 聊项目

• 手写 vue 中 的双向绑定及 Proxy 实现数据劫持

• 项目中做过哪些性能优化工作

• 重排与重绘、requestAnimationFrame 与 requestIdleCallback 区别

• 聊 Web Workers 与 WebAssembly 技术

• 聊浏览器的缓存

• Webpack 打包原理、打包拆分怎么做

• Babel 工作原理

• 聊 SSR、CSR+SSR

滴滴

一面

• 聊地图可视化场景

• 聊三维渲染库的底层原理

• 聊三维场景点与物体的碰撞检测算法

• 聊 Leaflet 源码、底层实现

• 聊 svg 与 Cavans 应用场景区别

• 笔试题

  /**
  * 把任意一个函数，修饰生成一个带重试功能的新函数。
  * 1、如果执行失败，进行重试；
  * 2、如果执行成功，直接返回结果；
  * 3、如果重试了 n 次依然失败，抛出最后一次的异常。
  * 4、新函数的表现行为要尽可能与原函数保持一致
  *
  * @param Function fn
  * @param number n 最大重试次数
  * @return Function 带有重试功能的新函数
  */
  function useRetryable(fn, n) 
    // TODO
  

  • 计算费时场景

  • 优化指令

  • 时间分片

  • 多线程渲染

  • 聊项目

  • 聊 CPU 密集型算法、WebAssembly 技术、Golang

  • 聊 Flutter，3D 是否支持

  • Canvas 大量图斑渲染性能优化

  • 聊 WebGL 性能优化、 着色器分类、静态批量绘制

二面

• 聊 Canvas 性能优化

  • 分层渲染、Canvas 透明如何处理

  • 时间分片

  • requestAnimationFrame 与 requestIdleCallback 区别

  • 遍历像素点优化方法

• Webpack 中的 loader 与 plugin 区别

• Webpack 的事件用到的设计模式？

• 算法题

  • 连续子数组的最大和

  • 数组中的第 K 个最大元素

  • 缺失的第一个正数

三面

• 组件与脚手架工具设计

• 聊三维渲染库里面的渲染流程

• 聊三维中加载栅格与矢量数据对性能影响

• 浏览器的并行请求优化

  • HTTP 1.1 与 HTTP 2.0

• 代码题：Promise 并发

// 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))

• 聊项目中最有挑战的事情

• Canvas 渲染多图斑性能优化与如何检测优化效果

• 聊 Golang 协程、协程与线程的区别

360

一面

• 自我介绍

• 聊 CPU 密集型代码，聊利用 GPU 并行运算

• 看了 Github 没有问大多技术问题，主要介绍聊团队情况（半小时）

二面

• 聊项目

• 聊 Code review

• 聊意向情况

• 聊团队规模

• 聊 Golang 与 Node.js 区别

• 聊线程与协程、用户态与内核态线程，Golang 的协程机制

• 聊 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
`;

• 考察点：

  • 代码编写规范

  • 测试技能掌握程度

  • 数据结构

1. 试题二

• 实现一个前端缓存模块，模块支持设置最大容量，超出容量时采用 LRU 机制，主要用于缓存 xhr 返回的结果，避免多余的网络请求浪费，要求：

  • 生命周期为一次页面打开

  • 如果有相同的请求同时并行发起，要求其中一个能挂起并且等待另外一个请求返回并读取该缓存

  • LRU机制当缓存容量达到上限时，它应该在写入新数据之前删除最久未使用的数据值，从而为新的数据值留出空间。

• 考察点：

  • 对 xhr 的理解，用代码解决问题的能力

  • 对缓存的处理能力

1. 试题三

在一个 html canvas 画布上绘制上百个圆，点击其中的一个圆，将其绘制在最上面（原先的绘制不保留），并设置不同的颜色

要求：

• 能够点击选中圆

• 将选中的圆绘制在最上面时，其他的圆的绘制顺序不变

• 考虑性能优化

笔试题代码已放到仓库 ant-fe-interview^[1]

一面

• 聊笔试题

• 聊工作做的主要事情与内容

• 聊工作中技术预研和选型的考虑

• 聊项目

• 聊技术遇到比较棘手的问题

• 聊与同事合作的例子

• 聊前端工程化的思考

二面

• 聊项目从开发到上线的流程做的事情

• 聊技术预研的一个案例

• 聊 CPU 密集型算法性能优化深入，聊 REST 服务并发思考

• 聊地理可视化可以做哪些事情

• 聊工作之外学的东西及实践，Flutter、Golang

• 聊目前工作节奏、换工作的考虑、对新工作有什么期望

三面

• 目前这份工作的选择

• 聊前端是怎么学习的、聊工作是怎么学习的

• 聊比较深入了解前端开源的库

• 聊 svg 与 Canvas 区别

• 聊常用的框架

• 聊地理可视化常见的可视化的库

• 聊近几年的业务的发展和自己的成长

• 聊近几年带给业务的价值

• 聊接下来想做什么事情

• 聊对可视化的理解

• 聊换工作的主要原因

• 聊工作与生活

写在后面

以上就是技术面试的主要内容，面试一般面试官会根据人经历情况进行考察，故部分内容仅供参考。如果平时候选人的经历比较有内容，面试官可能就不会问过多的八股文，而是更看重项目内容，如何思考，如何实现，如何解决问题，带来什么价值等。但也有个别情况，比如投递的方向与自身项目经历关联性不大，面试官可能会问更多基础相关的内容。

除此之外，面试过程中谦虚，自信与谦虚得适当的拿捏好，否则面试官可能认为候选人没有底气，缺乏对技术的自信。

有时候选择比努力更重要，投递方向要明确，探索自己到底想干什么，找到自己的兴趣点是最好的。面试过程中可能会有失败，但可能外界因素也占一部分原因，切莫自乱阵脚，毕竟双向选择。