双非菜鸡的我是如何一举斩获阿里、字节、腾讯、百度等大厂offer?（详情面经，建议收藏）

前言

博主是22届双非软工学生，刚开始面试的时候很紧张，但经历了非常密集的面试，也先后面了各种大厂，慢慢的也就没那么紧张了，下面我会把我的面经分享出来，大多部分都是面试问到的真题

面试经历

腾讯csig云【三面凉】

腾讯会议【已offer】

百度搜索产研【已offer】

字节教育业务【已offer】

阿里本地生活【已offer】

CVTE【放弃hr面】

京东【放弃二面】

面经汇总

有一些项目相关的细节内容和hr面内容没有记录下来哦

腾讯csig腾讯云一面        

• 做下自我介绍
• 可以实习多久

• 讲一下队列和栈，以及应用场景
• 说一下闭包，除了回调外，闭包应用场景，闭包可以干嘛，优缺点，闭包在async-await中的表现
• Promise解决了什么问题，有什么问题；async-await解决了什么问题
• Nodejs如何实现高并发的
• Nodejs的eventloop
• 了解ES6哪些东西
• 了解哪些跨域方法，jsonp的script何时执行，cors设置什么头
• 了解哪些设计模式
• 知道react的hook吗
• React兄弟间传参的方式
• 场景题：有一个下拉框，点击某一个选项，框中进行展示：在react中，props和state分别怎么设计
• http和https的区别
• Vue的MVVM设计，底层原理（讲了双向数据绑定的实现），compile的实现
• Class中static的属性和普通属性的区别，从继承的角度来说呢？
• nginx的配置（反向代理，负载均衡）
• 项目中觉得做得好的地方是什么
• 手写代码：
• 1.有一个扁平的数组描述了一系列的地理信息，类似于： var locationList = [ { id: 0, name: “中国” }, { id: 1, pid: 0, name: “广东省” }, { id: 2, pid: 1, name: “深圳市” }, { id: 3, pid: 1, name: “广州市” }, … ]其中每个节点的 pid 指向了它所属上级地区。现在要求你把这个数组转换成树状结构： var locationTree = buildLocationTree(locationList); console.log(locationTree); 其中 locationTree 的结构应该如下： interface LocationTree { root: LocationNode; }interface LocationNode { id: number; pid?: number; // 问号表示可选属性 name: string; subLocations?: LocationNode[]; }请实现 buildLocationTree()，输出的父节点里面包含子节点的数组
• 2.有10000条消息，每个消息timestamp字段，请排序(不可以使用sort函数) [{“eventId”:2498858,“timestamp”:1463569008327,“user”:"auto},…]

腾讯csig腾讯云二面

• 你是多久开始学习前端的
• 讲一下从用户输入url到页面渲染出来的过程
• 讲一下Tcp三次握手，为什么不能两次握手
• 了解HTTP2.0吗，和之前的版本有什么区别
• 你知道哪些常见的header中的字段
• 前端容易遭受到哪些网络攻击
• 场景题：有一个下拉框，点击某一个选项，框中进行展示，使用vue怎么设计
• 首页加载的太慢了，怎么办
• 你觉得你流程最久，花费精力最多的项目是哪个，讲一讲
• 这个项目中你觉得最困难的是什么，怎么解决的

腾讯csig腾讯云三面

• 多久开始实习，可以实习多久
• 讲一下你的项目
• 讲一下项目难点
• 页面加载慢，怎么做，讲一下
• 反问：业务场景、工作内容、转正机会、后续流程

腾讯会议一面

• 自我介绍
• 有考研打算吗
• 为什么选择前端
• 你觉得做前端工程师需要什么能力
• 你对前端未来的发展趋势的看法
• websocket，用法，如何保证仍然连接，如何确保消息发送到了，从计网的角度来讲一讲如何保证websocket传输可靠
• Tcp如何保证可靠传输
• tcp与udp的区别
• Udp如何实现可靠传输
• 你用过哪些查找的算法
• 平时常用的数据结构
• 如何来衡量算法的复杂度
• JavaScript的运行机制
• Js执行会阻塞dom渲染吗，如何避免呢（webworker）
• requestAnimationFrame是宏任务还是微任务
• 对内存泄漏的理解，如何避免
• 前端方面的安全问题？
• 前端如何做转义？（答需要专业三方转义库，问了解html实体字符吗）
• 手撕代码：
• 1.把原始 list 转换成树形结构，要求尽可能降低时间复杂度

复制代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

// 原始 list 如下 let list =[ {id:1,name:‘部门A’,parentId:0}, {id:2,name:‘部门B’,parentId:0}, {id:3,name:‘部门C’,parentId:1}, {id:4,name:‘部门D’,parentId:1}, {id:5,name:‘部门E’,parentId:2}, {id:6,name:‘部门F’,parentId:3}, {id:7,name:‘部门G’,parentId:2}, {id:8,name:‘部门H’,parentId:4} ]; const result = convert(list, …); // 转换后的结果如下 let result = [ { id: 1, name: ‘部门A’, parentId: 0, children: [ { id: 3, name: ‘部门C’, parentId: 1, children: [ { id: 6, name: ‘部门F’, parentId: 3 }, { id: 16, name: ‘部门L’, parentId: 3 }] }, { id: 4, name: ‘部门D’, parentId: 1, children: [ { id: 8, name: ‘部门H’, parentId: 4 }] }] }, ··· ];

• 2.实现深拷贝函数（补充深拷贝map,set，补充避免循环引用）

腾讯会议二面

• 自我介绍
• 介绍一个你的项目
• 对于权限控制，虽然后端接口保证了安全，但如果权限信息被修改，前端会展示出原本不应该被看到的页面，该怎么办（面试官提示想一下苹果如何鉴别软件的来源的安全性，最后结合https加密回答）
• 结合计网的知识讲一下，浏览器下载一个文件时快时慢的原因
• 场景题：现在有一百万个单词，不考虑空间复杂度，如何在较短时间查询某个单词是否在这一百万个中（答了树、hash表）
• Hash如何做到O(1)查找复杂度的
• Hash映射的是字符串还是数字，为什么
• 数组如何保证O(1)查找复杂度的
• 数组在实际物理地址的存储是连续的吗，为什么
• 虚拟存储和页表的了解
• ES6转ES5是使用什么，大概的原理是怎么样的
• Java或者c这样的语言，当定义的数组大小不够了，如何扩容（答新定义更大的数组，并依次把之前的重新装进去）
• 每次进行数组扩容很浪费时间，如何设计一个新数组：使得每次扩容时都能继续使用之前的数组内存空间（反过来理解页表）

百度一面

• Echarts的折线图自己写该怎么做（canvas）（requireAnimationFrame）
• 用canvas绘制二维码图片（把黑色改成红色）
• 小程序如何获取用户的信息
• 语义化标签了解多少，好处是什么
• 场景题：点击按钮显示图片，怎么做
• display:none; visibility:hidden; opacity:0;的区别
• 排序：对对象进行排序，以对象中age的值来排（快排、重写sort）；如果现在不知道对象的属性叫什么了，但确定对象只有一个属性，该怎么排序（Object.keys）
• 给一个数组，返回一个没有3的数组（filter）
• 字符串去重怎么做
• 正则表达式：将横杠连接改为驼峰命名
• vue-router的history模式和hash模式；history模式history.pushState() , history.replaceState()；history模式下，如果点击浏览器的回退按钮，是如何保证浏览器不刷新的
• vue里面的修饰符
• Vue里面数组为什么直接修改不能触发数据更新，vue重写了哪些数组方法
• 字符串’0’和’000’和true比较的结果
• Git如果commit了内容想要回退该怎么做

百度二面

• 学过哪些课程
• 介绍项目，难点是什么，有安全性问题吗
• F12中的东西知道多少
• 了解的请求头，307是什么
• http1.x和http2的区别
• 如果请求的css资源中又请求了一张图片资源，那图片资源中的referer是css的域还是当前域
• Url的protocol区域你知道有哪些
• http和https的区别，https传输过程是对称加密还是非对称加密
• Tcp三次握手
• 面试官给了一个具体的网站场景，在具体场景下：

1.分析请求头和响应头
2.为什么根元素设置了font-size
3.meta标签分析，你了解的编码方法，视口声明，视口声明可以设置哪些值
4.script是否阻塞了dom渲染，defer和async的作用，普通、defer、async三种script的执行顺序

• 如何获取当前屏幕的宽度
• 响应式布局的实现方式
• 算法：链表去重

百度三面

• 了解个人的各种情况
• 了解过往的各类经历

阿里一面

• 面试官自我介绍，部门业务介绍
• 聊项目，面试官建议后面有机会将项目实际运行
• 怎么学习的，看过哪些书
• Js继承的方法
• 隐藏元素的三种方式的区别
• 问src和href的区别，script标签中async和defer的区别
• 数组遍历的方法，最短的代码进行数组遍历
• 给学习的建议，推荐书籍

阿里二面

• 有自己写过组件吗
• 变量和函数声明提升，let是怎样的
• var，let，const的区别
• const什么情况下修改不报错，为什么
• 讲eventloop
• 数组去重ES中你可以用哪些方法（时间复杂度）
• 讲请求的各种方法，区别，options请求的作用，为什么请求时做两次请求
• 讲了解的状态码
• https是如何保证安全性的
• 树的遍历方法，实现
• 口述算法：

给定一个字符串，按规则输出其所有符合规则的子序列（规则：序列包含""，且每个序列中前面的字符的index小于后面）
eg：
input：“abc”
output："",“a”,“b”,“c”,“ab”,“ac”,“bc”,“abc”

阿里三面

• 讲ES6中的this
• 对于浏览器的兼容你了解哪些，具体做过哪些兼容方面的工作
• 为什么要跨域，跨域的各种方法
• 讲下typescript和javascript的区别，ts有哪些特性
• 当时没记录，其他的忘了😥

阿里四面

• 聊为什么选择前端
• 介绍项目，讲项目中的具体问题

字节一面

• 讲一下项目
• 项目中扩展：封装了axios，axios怎么封装的，登录态怎么维护的，如果axios的功能使用原生ajax来做，那应该怎么去实现
• 介绍盒子模型
• Tcp和udp的区别，udp的作用场景
• Js是弱类型语言，但很多时候需要进行类型的确认，一般可以怎么做（instanceof、typeof、Object.prototype.toString.call()……）
• 手写下promise.all
• 当时没记录，其他的忘了😥

字节二面

• 介绍自己的前端学习经历
• position的各个值讲一下
• 一些css属性，问div可能有多宽（考察盒子模型）
• 如何画出一个边长为父元素50%的正方形
• 怎么获取一个元素的宽度（style上没有的属性，element.style可以访问到吗？clientWidth和offsetWidth的区别）
• 讲一下箭头函数，箭头函数的特点
• generator用过吗
• vue中watch和compute的区别，watch有缓存吗
• 有实习经历吗
• 算法：整数m去掉n位后剩下最大值

字节三面

• 讲一下项目
• rbac权限如何实现的
• 你觉得你在最近的项目中相比之前做项目自己有什么新的提升和收获
• 你的axios如何封装，了解原生fetch吗
• 做题：

1.设计一个简单的任务队列, 要求分别在 1,3,4 秒后打印出 “1”, “2”, “3”

复制代码

1 2 3 4 5 6 7 8 9 10 11 12

const q = new Queue(); q.task(1000, () => { console.log(1) }) .task(2000, () => { console.log(2) }) .task(1000, () => { console.log(3) }) .start() q.stop(); // 可以随时终止任务

2.判断是否存在循环引用

复制代码

1 2 3 4 5 6 7

let a = { b:null, c:null }; a.b = a; // a.c = a.c;

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，有需要的程序猿（媛）三连之后点击这里免费领取