正文

三年前端寒冬入大厂，收获蚂蚁p6+字节2-1offer面经分享(代码片段)

程序员依扬  程序员依扬  2022-12-04  347

关键词：

最近因为一些原因想要换份工作，通过猎头帮我投递了几家公司，收到了蚂蚁、字节和拼多多的面试邀约，先来说下面试的结果

蚂蚁：收到 offer，定级 P6+
字节：收到 offer，定级 2-1
拼多多：1 面之后未继续流程

拼多多

先来说说拼多多，本来投的是 C 端，结果鬼使神差简历去到了 A 端（管理后台），一面简单了解之后并不愿意去做 A 端，之后也就没有继续后续的流程了。

一面

合并两个数组

concat、for 循环、扩展运算法、push.apply 这些方法都可以

合并两个对象

Object.assign、扩展运算法、手写深浅拷贝都可以

interface 和 type 的区别

常规题，网上资料很多了，还是看官网的说明比较好

An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.
An interface can have multiple merged declarations, but a type alias for an object type literal cannot.

flex: 0 1 auto 表示什么意思

flex: 0 1 auto 其实就是弹性盒子的默认值，表示 flex-grow, flex-shrink 和 flex-basis 的简写，分别表示放大比例、缩小比例、分配多余空间之前占据的主轴空间。

详细的可以看下第 154 题：弹性盒子中 flex: 0 1 auto 表示什么意思

求字符串数组的最长公共前缀

比如输入: [“flower”,“flow”,“flight”]，输出: “fl”

解题思路是先获取数组中的最大值及最小值字符串，最小字符串与最大字符串的最长公共前缀也为其他字符串的公共前缀，即为字符串数组的最长公共前缀

var longestCommonPrefix = function(strs) 
    if (strs === null || strs.length === 0) return "";
    if(strs.length === 1) return strs[0]
    let min = 0, max = 0
    for(let i = 1; i < strs.length; i++) 
        if(strs[min] > strs[i]) min = i
        if(strs[max] < strs[i]) max = i
    
    for(let j = 0; j < strs[min].length; j++) 
        if(strs[min].charAt(j) !== strs[max].charAt(j)) 
            return strs[min].substring(0, j)
        
    
    return strs[min]
;

当然还有其他解法，可以看下这篇，图解拼多多&leetcode14：最长公共前缀

手写 Koa 的 compose 方法

这里实现一个简化版，如果问你异步如何处理的话，dispatch 函数里面 return promise 就好了

function compose(middleware) 
  return function() 
    return dispatch(0)
    function dispatch(i) 
      let fn = middleware[i]
      if (!fn) return
      return fn(function next() 
        return dispatch(i + 1)
      )

获取精度更高的时间

浏览器使用 performance.now() 可以获取到 performance.timing.navigationStart 到当前时间之间的微秒数
Node.js 使用 process.hrtime 返回一个数组，其中第一个元素的时间以秒为单位，第二个元素为剩余的纳秒

获取首屏时间

H5 如果页面首屏有图片

首屏时间 = 首屏图片全部加载完毕的时刻 - performance.timing.navigationStart

如果页面首屏没有图片

首屏时间 = performance.timing.domContentLoadedEventStart - performance.timing.navigationStart

小程序通过拦截 setData 调用方式计算

git rebase 和 merge 的区别

常规题了，主要的区别在于是否保留分支的 commit 提交节点，rebase 会给你一个简洁的线性历史树

蚂蚁

蚂蚁一共是 4 轮技术面 + 1 轮 HR 面，耗时 10 天，流程相对来说还算快了。4 轮技术面都是电话面，最后的终面（HR 面）是视频面。蚂蚁的面试主要还是根据简历提问，所以简历上写的点都需要好好准备下。

其中比较难的是第 4 面和 HR 面，因为这两面才是最终决定是否录用你以及确定录用之后的职级，4 面的面试官一般是 P8 或者 P9，Level 比较高，会从聊天的过程中考察你，另外 HR 面拥有一票否决权，如果被 HR 否决，前面面的再好也没用，这两面都需要好好准备下。

一面

一面又叫简历评估面，主要对简历上的东西进行提问，一面结束之后会通过邮件发几道编程题，难度比字节大，但是不限定时间，最好当天做完发过去

有没有做过 node 端

介绍了下我的「高级前端面试」小程序和写过的几个 node 脚本，聊了下整体的架构、数据库（mysql + redis）、部署、监控这些方面

大型复杂项目开发协作经验、遇到的问题和解决方案

主要介绍下 git 协作流程

如果让你负责一个新项目，如何选择技术栈，如何避免多端合作可能遇到的问题

脚手架开发、约定团队开发规范、Lint 等；根据团队的技术栈、成员能力等去选择

TSLint、ESLint 的区别

TS 已经建议使用 ESLint 了

对 TS 的认识，项目中是否使用

那必须使用了

介绍一些开源框架的原理

Koa、Axios、Vue、React、Taro 等

对开源框架的一些贡献

先吹下我的前端 100 问，再虚心的表示下后续对开源框架做些贡献

介绍我开发的性能监控 SDK、行为埋点 SDK 的工作、背景、遇到的问题等

我的业务问题，介绍了下整体的架构、遇到的一些难点、解决方案等

性能监控的一些实现原理，包括异常、网络请求、加载时间等

业务问题，吹就完事了

介绍下灰度功能

聊了下业务场景，实现原理，迭代优化的过程

对于后端的数据收集落库、web 搭建等的认识

不是主要开发，但是还是有些参与和了解

其他的项目难点

聊了下 SDK 的缓存优化

介绍下写博客和公众号的初衷、运营、推广等

主要还是提升自己，聊了下运营模式

二面

和一面一样都是聊项目，但是换了一个方向切入，主要还是根据简历上的点去深入提问

小程序的技术架构和方案、小程序的出现主要解决什么问题？

包含小程序容器、渲染引擎和 JavaScript 引擎。UI 层运行在 WebView 中，而逻辑层运行在独立的 JS 引擎中。

降低获客成本、打通跨端

view 层、js 层分别在哪里、怎么通信 ?

业务逻辑的 JS 在独立的 JavaScript 引擎（ServiceWorker）中，每个页面的 view 和 css 运行在各自独立的 webview 里面，页面之间是通过函数 navigateTo 进行页面的切换；

JS 层和 view 层通过消息服务 MessageChannel 进行通信

Taro 和其他小程序框架的横向对比，如何选型

Taro、uni-app、kbone、WePY、mpvue

Taro 的一些好用的点和不好用的点，聊下想法

一些特性不支持，不过随着 Taro 的升级也在解决

Taro 本身的限制

对 React 的语法支持有限，比如不能使用 Array#map 之外的方法操作 JSX 数组

React 代码转成小程序代码的原理

编译器修改和运行时修改，同时配合 babel 做编译、转译

Babel 的转换过程，比如把 JSX 的 map 转成 wxml

根据 AST 中的 JSXElement 生成对应的数据结构，比如

oddNumbers.map(number => <Text onClick=this.handleClick>number</Text>)

生成的数据结构是


  type: 'element',
  tagName: 'text',
  attributes: [
     bindtap: 'handleClick' ,
     'wx:for': 'oddNumbers' ,
     'wx:for-item': 'number' 
  ],
  children: [
     type: 'text', content: 'number' 
  ]

再根据这个结构转成 wxml 就好了，可以参考 himalaya 的代码

真实数据和缓存的竞争如何处理，第一次如何处理，第二次有更新如何处理

优先使用缓存、真实数据替换缓存等

npm 版本号 ^ ~ 的区别

脱字符(^)来限定所安装模块的主版本号
- ^1.2.1 代表的更新版本范围为 >=1.2.1 && < 2.0.0，即 1.x
- ^0.2.1 代表的更新版本范围为 >=0.2.1 && < 0.3.0，即 0.2.x
- ^0.0.2 代表的更新版本范围为 0.0.2（相当于锁定为了0.0.2版本），即 0.0.2
波浪号(~)是限定模块的次要版本
- ~1.5.1允许安装版本号大于1.5.1但小于1.6.0版本的模块，即 1.5.x
- ~0.5.1允许安装版本号为0.6.0，即0.5.x

怎么发 beta 版本

npm publish --tag beta

埋点数据上报的方案

Ajax 请求、img、script

图片方案的原理和优势

img 天然支持跨域；跨域友好、不占用 Ajax 请求、执行无阻塞

埋点上报数据的设计

介绍了下抽象数据模板，如何对不同业务场景进行拆分

介绍下曝光埋点

埋点数据服务端相关的逻辑

异常数据的排查

是否做过 SQL 表查询

写过的最复杂 SQL 查询

介绍下技术运营

最近在看的书

三面、四面

这两轮面试聊得比较轻松，主要聊些项目、规划、思考这些方面

有亮点的项目

写的 SDK 对比同类产品的优势

遇到的问题以及有哪些反思

技术规划

技术的优势和不足

个性、协作方面的优点和缺点

工作地点选择

工作节奏

抗压能力怎么样

HR 面

HR 面还是需要准备下，不能在最后一步功亏一篑了

介绍最近几年的工作经验

换工作的原因

目前在看的工作机会

如何考虑未来发展

每家公司离职的原因

之前跳槽拿到哪些 offer

考虑工作机会的优先级（公司、团队、技术、薪资等排序）

成长特别快的公司和经历

生活、工作遇到的一些有挑战的地方

面对压力一般是怎么应对的

之前工作的绩效

团队中的定位、排名如何

字节

字节的话比蚂蚁少一轮技术面，一共是 3 轮技术面 + 1 轮 HR 面，全程是视频面试，其中比较难的是第 1、2 面，因为前 2 轮会有 3 道左右的笔试题，3 面就是聊聊项目比较简单，HR 面就完全和技术无关了，纯粹问些你的期望、离职原因等基本信息，没有一票否决权。

所以如果你打算面试字节的话，一定一定一定提前准备下笔试题，包括但不限于算法题、编程题、手写实现题等。

编程题可以看我的前端 100 问：Daily-Interview-Question
算法题可以看瓶子君的算法营：JavaScript-Algorithms

一面

这里介绍下遇到的手写题，其他的问题和项目关联，就不再重复了

下面这几道题目已经更新到了我的题库中，可以去那里查看解析，Daily-Interview-Question / 字节

弹性盒子中 flex: 0 1 auto 表示什么意思

求最终 left、right 的宽度

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

<style>
  * 
    padding: 0;
    margin: 0;
  
  .container 
    width: 600px;
    height: 300px;
    display: flex;
  
  .left 
    flex: 1 2 500px;
    background: red;
  
  .right 
    flex: 2 1 400px;
    background: blue;
  
</style>

输出以下代码运行结果，为什么

如果希望每隔 1s 输出一个结果，应该如何改造？注意不可改动 square 方法

const list = [1, 2, 3]
const square = num => 
  return new Promise((resolve, reject) => 
    setTimeout(() => 
      resolve(num * num)
    , 1000)
  )


function test() 
  list.forEach(async x=> 
    const res = await square(x)
    console.log(res)
  )

test()

实现一个批量请求函数 multiRequest(urls, maxNum)

要求：

要求最大并发数 maxNum
每当有一个请求返回，就留下一个空位，可以增加新的请求
所有请求完成后，结果按照 urls 里面的顺序依次打出

二面

这一面主要对我之前写过的文章进行提问，找了一些文章中可以再深入的点进行提问

介绍原型鸡生蛋、蛋生鸡问题

可以看我之前的文章，深入探究 Function & Object 鸡蛋问题

输出以下代码的结果

Object instanceof Function
Function instanceof Object

Object instanceof Object
Function instanceof Function

结果都是 true

手写深拷贝

可以看我之前的文章，面试题之如何实现一个深拷贝

如何实现正则的深拷贝

可以看我之前的文章，Lodash是如何实现深拷贝的

模拟实现 Array.prototype.splice

可以看我的题库，已经收录这道题了，第 158 题：如何模拟实现 Array.prototype.splice

三面

前面两面通过之后，三面就比较简单了，主要就是聊项目，聊我之前做过的项目，亮点，之后的规划，以及加入团队之后所要做的项目

HR 面

比较简单，聊之前的经验，还有期望薪资之类的，没有蚂蚁 HR 的一票否决，整个过程还是比较轻松愉快

面试感想

先来说下大环境，感觉非常不好，就一二线互联网来说招人的没几家公司，裁员的、内部调整的、锁 HC 的确是一大堆，所以大家在换工作的时候一定不要裸辞，风险太大。

今年面试和往年感受有些不同，对于项目的重难点、亮点、个人在团队中做的贡献、对项目的 Owner 意识等比较关注，还有就是编程能力的考察会更多一些。

对于社招小伙伴来说，除了常规的 CSS / JS / 网络 / 浏览器 / 异步 / 框架 / 工程化等方面，还需要在以上说的这两方面多加准备准备，准备越充分，拿到的面试评价越高，能拿到的薪资也将越多，加油！！！

面试小程序

最后的最后，推广一波我写的面试小程序，现在用户快突破 3 万了。小程序的功能比较多，包括了编程题、算法营、选择题、简答题、计划每周还会弄一次抽奖活动等。功能写了好几个月，现在在扩充题库的过程中。欢迎大家使用，欢迎提 Bug，会持续更新维护。

支持

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

点个「赞」，让更多的人也能看到这篇内容
关注我的官网 https://muyiy.cn，让我们成为长期关系

三年前端经验，创业半年无果，最终还是决定进大厂（已拿字节阿里美团offer）

前言博主普通本科毕业，软件工程专业，至今为止已经有三年多的经验了，工作三年半，第一家创业公司，半年。第二家前端技术不错的公司，两年半。第三家，个人创业半年。可以看出，我是个... 查看详情

三年前端经验，创业半年无果，最终还是决定进大厂（已拿字节阿里美团offer）

2021年前端大厂（腾讯字节跳动阿里......）校招面试真题解析，让你面试轻松无压力！

前言校招很重要，应届生的身份很珍贵！在校招的时候与我们竞争的大部分都是没有工作经验的学生，而且校招企业对学生的包容度高，一般对企业来说，社招更看重实际工作经验，而校招更愿意“培养人... 查看详情

4年前端开发，刚刚面试大厂上岸，给所有前端提个醒～

今年的状态真是一言难尽🥹疫情反复、企业裁员、毕业生达1076万！前两天有位工作4年朋友说：面试数月要求一降再降，一度想去送外卖……好在最后没放弃，过程坎坷却也拿到心仪offer，过几天就要入职... 查看详情

4年前端开发，刚刚面试大厂上岸，给所有前端提个醒～

成功收获了蚂蚁拼多多字节跳动offer，万分膜拜！

算法⼏道常⻅的字符串算法题总结最⻓公共前缀回⽂串两数相加翻转链表链表中倒数第k个节点删除链表的倒数第N个节点合并两个排序的链表剑指offer部分编程题跳台阶问题变态跳台阶问题⼆维数组查找替换空格题⽬描述：数... 查看详情

大厂p6职级提升攻略

P5核心能力要求：在他人指导下完成任务。若能从P5晋升P6，说明你已完成从学生到打工人，成长为一名合格员工。P6对应工作2～5年1核心能力要求独立负责端到端任务1.1独立P6做的跟P5差不多事，但无需别人带... 查看详情

11月最新入职阿里android小哥真实面经分享（p6）(代码片段)

...给大家，全程肝货建议下载收藏（文末附送一份大厂Android面试题PDF）。面试过程：10月初通过阿里工作的同学进行内推，当天收到面试邀约，一个多月完成三轮技术面试、一轮hr面试，收到了offer，... 查看详情

资料分享23届上岸字节快手等大厂

2023年前前后后共参加面试100+个，最终收获字节跳动、快手、蔚来、科大讯飞、地平线、贝壳、用友等后端开发岗位10+个offer。准备面试过程中，整理了包含java基础、java集合、java并发、java虚拟机、Spring全家桶、MySQ... 查看详情

资料分享23届上岸字节快手等大厂

埋头苦干60天啃透这份字节内部流出的《android大厂面试宝典》，终于入职字节跳动，定级2-2(代码片段)

八月初，入职了新公司字节跳动，Android岗位。故事开始于六月，在上一家公司呆了三年多，作为一名互联网从业者三年多的时间确实挺长的，也学到了很多东西，但是感觉自己再待下去没有意义了，因... 查看详情

2021年前端大厂面试秘籍，为你保驾护航金九银十，直通大厂(代码片段)

前言一眨眼金三银四就过去了，面对马上要到来的金九银十，你做好准备了吗？本文主要是整理了前端大厂需要会的（或者说面试被频繁问到的内容），分为四个部分，前端基础核心部分，计算机... 查看详情

中国互联网寒冬的根本原因是什么？

...一些其它传闻也正在路上。所以到底是什么导致了互联网寒冬？是什么导致了互联网股价的持续下跌。这个行业似乎一夜之间进入死亡倒计时。1.C端见顶2.清朗行动、个保法、双清单等3.商业化收入降低4.反垄断个人认为重要... 查看详情

中国互联网寒冬的根本原因是什么？

卷到哭！现在跳槽太难了，挂了八家公司，终于收获字节offer

...还是二面，都非常考验技术功底。尤其是一线互联网大厂，对程序员的要求越来越高，不少想跳槽加薪的朋友都连连碰壁，甚至开始“自我怀疑”。坦白讲，像阿里、腾讯、美团、字节跳动等一线大厂，查看详情

卷到哭！现在跳槽太难了，挂了八家公司，终于收获字节offer

拿了几十个offer，还有不少大厂的（京东字节蚂蚁等），我依然很emo

这是一份教你如何更高效地准备面试的小册，涵盖常见八股文（系统设计、常见框架、分布式、高并发......）、优质面经等内容。这是一篇读者的投稿，这篇文章分享了他的校招历程。去年差不多这个时候，... 查看详情

成功从小公司跳槽进蚂蚁定级p6，最全java知识总结

第一个分布式：限流1.1ZooKeeper+Nginx面试常备题（附答案）ZooKeeper是一个分布式的，开放源码的分布式应用程序协调服务，是Google的Chubby一个开源的实现，是Hadoop和Hbase的重要组件。它是一个为分布式应用... 查看详情