本文由 简悦 SimpRead 转码， 原文地址 mp.weixin.qq.com
笔者三年工作经验，平时工作上也会技术面试一些候选人，听江湖上传闻三年是个坎，目前刚好也有三年没有出来面试了，想出来考验考验自身功底如何？🙃
主要投递了一些可视化与基础设施建设相关方向的职位，经过一个多月主要的面试结果如下：
字节：基础工程方向，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个taskaddTask(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 = xconst 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 = '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协程、协程与线程的区别
360
一面
自我介绍
聊
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,parentBob,30,DavidDavid,60,Anna,10,Bob`;考察点：
代码编写规范
测试技能掌握程度
数据结构
- 试题二
实现一个前端缓存模块，模块支持设置最大容量，超出容量时采用
LRU机制，主要用于缓存xhr返回的结果，避免多余的网络请求浪费，要求：生命周期为一次页面打开
如果有相同的请求同时并行发起，要求其中一个能挂起并且等待另外一个请求返回并读取该缓存
LRU 机制当缓存容量达到上限时，它应该在写入新数据之前删除最久未使用的数据值，从而为新的数据值留出空间。
考察点：
对
xhr的理解，用代码解决问题的能力对缓存的处理能力
- 试题三
在一个 html canvas 画布上绘制上百个圆，点击其中的一个圆，将其绘制在最上面（原先的绘制不保留），并设置不同的颜色
要求：
能够点击选中圆
将选中的圆绘制在最上面时，其他的圆的绘制顺序不变
考虑性能优化
笔试题代码已放到仓库 ant-fe-interview[1]
一面
聊笔试题
聊工作做的主要事情与内容
聊工作中技术预研和选型的考虑
聊项目
聊技术遇到比较棘手的问题
聊与同事合作的例子
聊前端工程化的思考
二面
聊项目从开发到上线的流程做的事情
聊技术预研的一个案例
聊
CPU密集型算法性能优化深入，聊 REST 服务并发思考聊地理可视化可以做哪些事情
聊工作之外学的东西及实践，
Flutter、Golang聊目前工作节奏、换工作的考虑、对新工作有什么期望
三面
目前这份工作的选择
聊前端是怎么学习的、聊工作是怎么学习的
聊比较深入了解前端开源的库
聊
svg与Canvas区别聊常用的框架
聊地理可视化常见的可视化的库
聊近几年的业务的发展和自己的成长
聊近几年带给业务的价值
聊接下来想做什么事情
聊对可视化的理解
聊换工作的主要原因
聊工作与生活
写在后面
以上就是技术面试的主要内容，面试一般面试官会根据人经历情况进行考察，故部分内容仅供参考。如果平时候选人的经历比较有内容，面试官可能就不会问过多的八股文，而是更看重项目内容，如何思考，如何实现，如何解决问题，带来什么价值等。但也有个别情况，比如投递的方向与自身项目经历关联性不大，面试官可能会问更多基础相关的内容。
除此之外，面试过程中谦虚，自信与谦虚得适当的拿捏好，否则面试官可能认为候选人没有底气，缺乏对技术的自信。
有时候选择比努力更重要，投递方向要明确，探索自己到底想干什么，找到自己的兴趣点是最好的。面试过程中可能会有失败，但可能外界因素也占一部分原因，切莫自乱阵脚，毕竟双向选择。
作者：luxiaolu