关于面试:2021金三银四面试记录与真题分享字节美团滴滴蚂蚁等

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

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

字节：根底工程方向，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 做了哪些事件
聊本人设计的技术计划
聊残缺的零碎设计经验
聊前端简单的设计
反诘

代码题: 局部翻转

// 输出：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

聊我的项目（一小时）
代码题：微工作宏工作代码执行程序
聊 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 = 'adf{ahhh},{b}dsf,{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 协程、协程与线程的区别

自我介绍
聊 CPU 密集型代码，聊利用 GPU 并行运算
看了 Github 没有问大多技术问题，次要介绍聊团队状况（半小时）

聊我的项目
聊 Code review
聊动向状况
聊团队规模
聊 Golang 与 Node.js 区别
聊线程与协程、用户态与内核态线程，Golang 的协程机制
聊 Golang channel 与 Node callback
聊团队参加的产品

试题一

<!-- 给定 CSV 文件，转换成树结构 -->
interface Person {
  name: string;
  age: number; 
  parent: Person[]; 
  children: Person[];}

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

考察点：
- 代码编写标准
- 测试技能把握水平
- 数据结构

试题二

实现一个前端缓存模块，模块反对设置最大容量，超出容量时采纳 LRU 机制，次要用于缓存 xhr 返回的后果，防止多余的网络申请节约，要求：
- 生命周期为一次页面关上
- 如果有雷同的申请同时并行发动，要求其中一个能挂起并且期待另外一个申请返回并读取该缓存
- LRU 机制当缓存容量达到下限时，它应该在写入新数据之前删除最久未应用的数据值，从而为新的数据值留出空间。
考察点：
- 对 xhr 的了解，用代码解决问题的能力
- 对缓存的解决能力

试题三

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

要求：

可能点击选中圆
将选中的圆绘制在最下面时，其余的圆的绘制程序不变
思考性能优化

口试题代码已放到仓库 ant-fe-interview

聊口试题
聊工作做的次要事件与内容
聊工作中技术预研和选型的思考
聊我的项目
聊技术遇到比拟辣手的问题
聊与共事单干的例子
聊前端工程化的思考

聊我的项目从开发到上线的流程做的事件
聊技术预研的一个案例
聊 CPU 密集型算法性能优化深刻，聊 REST 服务并发思考
聊天文可视化能够做哪些事件
聊工作之外学的货色及实际，Flutter、Golang
聊目前工作节奏、换工作的思考、对新工作有什么冀望

目前这份工作的抉择
聊前端是怎么学习的、聊工作是怎么学习的
聊比拟深刻理解前端开源的库
聊 svg 与 Canvas 区别
聊罕用的框架
聊天文可视化常见的可视化的库
聊近几年的业务的倒退和本人的成长
聊近几年带给业务的价值
聊接下来想做什么事件
聊对可视化的了解
聊换工作的次要起因
聊工作与生存

以上就是技术面试的次要内容，面试个别面试官会依据人经验状况进行考查，故局部内容仅供参考。如果平时候选人的经验比拟有内容，面试官可能就不会问过多的八股文，而是更看重我的项目内容，如何思考，如何实现，如何解决问题，带来什么价值等。但也有个别情况，比方投递的方向与本身我的项目经验关联性不大，面试官可能会问更多根底相干的内容。

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

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

理解更多博文首发地址看看。

关于面试:2021金三银四面试记录与真题分享字节美团滴滴蚂蚁等

写在后面

面试公司

字节

一面

二面

三面

美图 – A 部门

美图 – B 部门

一面

二面

三面

百度

一面

二面

滴滴

一面

二面

三面

360

一面

二面

蚂蚁

口试题

一面

二面

三面

写在前面