首页 文章详情

【面试】1512- 前端面试小记:字节、蚂蚁、美团、滴滴

前端自习课 | 42 2022-11-24 19:18 0 0 0
UniSMS (合一短信)

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

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

  • 字节:基础工程方向,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 实现逻辑
  • VuenextTick 实现原理
  • Vue 组件中的 data 为什么是一个方法

二面

  • FlutterReact Native、对比、绘制、原生API、性能考虑、webView、静态文件分包加载更新、本地静态文件服务器
  • 编程手写设计题:路径添加删除的数据结构与方法
  • 编程手写设计题:Alert 组件设计,避免多次重复弹出
  • AMDCMDUMDCommon.jsESModule 模块化对比,手写兼容多种模块化函数
  • 手写 Proxy 实现数据劫持
  • 手写 deepClone
  • 聊项目难点

三面

面试官玉北

  • 自我介绍

  • 聊成长最多方面

  • 聊压力最大的经历

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

  • 聊线上事故的经历

  • 聊利用 Flutter 做了哪些事情

  • 聊自己设计的技术方案

  • 聊完整的系统设计经历

  • 聊前端复杂的设计

  • 反问

美图 - A 部门

  • 代码题: 部分翻转
// 输入:
const arr = [12345678910];
const n = 3
// 输出:
[10789456123];

function reverse(arr, n{
  
}

//解法一:双指针方法
  • 代码题: 数组去重复,如果考虑复杂类型,考虑引用去重
// 数组去重
// 1. Set
// 2. filter O(n2)
// 3. Map 
// 4. js 对象 { }

const arr = [1123'1', x, y, z];
const x = { a100 }
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();  // 会有问题?不会栈溢出
// 什么原因?
  • requestAnimationFramerequestIdleCallback 含义及区别

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

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

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

  • z-index

美图 - B 部门

一面

  • 聊项目(一小时)
  • 代码题:微任务宏任务代码执行顺序
  • Webwork 通信优化
  • 聊离屏渲染,多线程渲染
  • Option 请求
  • relativeabsolutefixed 区别?父元素与子元素两个元素都 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 = {ahhh1b:2c3}
  • 聊前端工程化、CI/CD
  • 聊平时有看什么书、什么技术架构的书
  • 聊测试驱动开发
  • 聊代码规范参考来源、如何落实开发代码规范
  • 聊性能监控业务

三面

  • 聊项目
  • 聊成长
  • 聊团队

百度

一面

  • deepClone
  • 知道的设计模式有哪些
    • 分别说一下应用场景
    • 依赖倒置设计原则、控制反转思想、依赖注入、JS 的依赖注入
  • 常用的 ES6 语法有哪些
  • JavaScriptvarletconst 区别
    • babel 编译 for 循环中的 let 做的工作
  • 闭包
  • 作用域
  • 原型链
  • 聊项目编码规范,如何实定位与落实团队规范
    • 基础的规范定制来源
    • ESLintPrettier 区别
    • 编辑格式化与 CLI 格式化触发结果统一
  • 聊浏览器输入 URL 发生哪些过程
    • 浏览器有哪些进程和线程,electron 有哪些进程
    • DNS 解析过程
    • TCP 链接过程
    • HTTPS 设计到的内容
    • 浏览器解析渲染有哪些过程
    • JS 执行的宏任务与微任务

二面

  • 聊项目
  • 手写 vue 中 的双向绑定及 Proxy 实现数据劫持
  • 项目中做过哪些性能优化工作
  • 重排与重绘、requestAnimationFramerequestIdleCallback 区别
  • Web WorkersWebAssembly 技术
  • 聊浏览器的缓存
  • Webpack 打包原理、打包拆分怎么做
  • Babel 工作原理
  • SSRCSR+SSR

滴滴

一面
  • 聊地图可视化场景

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

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

  • Leaflet 源码、底层实现

  • svgCavans 应用场景区别

  • 笔试题

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

    function useRetryable(fn, n{
      // TODO
    }
    • 计算费时场景
    • 优化指令
    • 时间分片
    • 多线程渲染
    • 聊项目
    • CPU 密集型算法、WebAssembly 技术、Golang
    • Flutter3D 是否支持
    • Canvas 大量图斑渲染性能优化
    • WebGL 性能优化、 着色器分类、静态批量绘制

二面

  • Canvas 性能优化

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

    • 时间分片

    • requestAnimationFramerequestIdleCallback 区别

    • 遍历像素点优化方法

  • Webpack 中的 loaderplugin 区别

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

  • 算法题

    • 连续子数组的最大和
    • 数组中的第 K 个最大元素
    • 缺失的第一个正数

三面

  • 组件与脚手架工具设计
  • 聊三维渲染库里面的渲染流程
  • 聊三维中加载栅格与矢量数据对性能影响
  • 浏览器的并行请求优化
    • HTTP 1.1HTTP 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
  • 聊意向情况
  • 聊团队规模
  • GolangNode.js 区别
  • 聊线程与协程、用户态与内核态线程,Golang 的协程机制
  • Golang channelNode 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 服务并发思考
  • 聊地理可视化可以做哪些事情
  • 聊工作之外学的东西及实践,FlutterGolang
  • 聊目前工作节奏、换工作的考虑、对新工作有什么期望

三面

  • 目前这份工作的选择
  • 聊前端是怎么学习的、聊工作是怎么学习的
  • 聊比较深入了解前端开源的库
  • svgCanvas 区别
  • 聊常用的框架
  • 聊地理可视化常见的可视化的库
  • 聊近几年的业务的发展和自己的成长
  • 聊近几年带给业务的价值
  • 聊接下来想做什么事情
  • 聊对可视化的理解
  • 聊换工作的主要原因
  • 聊工作与生活

写在后面

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

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

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

作者:luxiaolu

https://github.com/liuvigongzuoshi/blog


往期回顾

#

如何使用 TypeScript 开发 React 函数式组件?

#

11 个需要避免的 React 错误用法

#

6 个 Vue3 开发必备的 VSCode 插件

#

3 款非常实用的 Node.js 版本管理工具

#

6 个你必须明白 Vue3 的 ref 和 reactive 问题

#

6 个意想不到的 JavaScript 问题

#

试着换个角度理解低代码平台设计的本质


good-icon 0
favorite-icon 0
收藏
回复数量: 0
    暂无评论~~
    Ctrl+Enter