如何拿到各家大厂的前端校招offer
本文由 杨珏成 原创发布于 SegmentFault，未经许可请勿转载
原文连接： https://segmentfault.com/a/11...
0x00 做者是谁
我就读于北京理工大学软件工程专业，是一名大四学生。从大一开始投入之前端为主的全栈开发，独立开发过多个中型和小型项目，是 佬铁|宿舍市集 小程序的社区创始人及独立项目负责人。php
在学校里读书的时候，我就是一个闲不住的人。最近由于一个偶然的契机，接触到了校招季，最后定下了本科毕业就工做的规划目标。css
因而我在一个月的时间里参加了9家国内大厂校招，收获了以下结果（截至2019年9月5日）：html
- 腾讯（WXG）：等待二面
- 阿里巴巴（淘宝FED）：三面等结果
- 字节跳动：收到offer
- 美团点评（LBS）：收到offer
- B站（电商平台）：等待offer结果
- 小米（金融平台）：等待offer结果
- 网易（严选）：hr面要去杭州现场，放弃
- 携程：放弃笔试
- 滴滴：放弃笔试
0x01 为何要写这篇文章
从一开始手指冒汗被怼的说不出话，到最后和面试官侃侃而谈游刃有余，我发现：一样的能力水平，在不一样的面试表现下，反馈到面试官眼中的结果能够有着天壤之别。前端
所以，若是你但愿把本身的真实水平展现给面试官，那么掌握一些合适的方法是很是有必要的。vue
正文脉络
正文的内容聚焦于应聘大厂校招所需具有的能力，以及分析各个大厂具体的校招策略。分为两个部分：node
- 如何进入面试
- 如何经过面试
但愿能为第一次走上职场的同窗们提供参考，也是对本身过去数周奔波忙碌的一个总结。python
0x02 大厂前端校招：如何进入面试？
2.1 经过简历初筛
想要拿到offer，第一步天然是经过大厂的校招初筛。在初筛，尤为是大厂的初筛环节中，面试官面对的将是成千上万份看起来没什么区别的简历文件。想要脱颖而出，你必须以对待工程项目的态度精心设计你的简历。mysql
2.1.1 简历布局与层次
就像web开发的layout，写简历时也应该考虑本身的简历layout。怎样划分简历内容板块，我的信息是居中仍是居左，头像应该和我的信息一块居中仍是和我的信息对称放置。react
这里比较玄学，个人建议是参考身边学长或者hr发的简历模板。jquery
2.1.2 简历内容的取舍和顺序
这点是简历构建中最重要的，写简历切忌一股脑把本身的骄傲倔强都写上去，这样只会让面试官不知道这我的想要表达什么。
建议先把本身的骄傲倔强所有整理成一个文本库，再根据应聘的不一样职位精心挑选出最对口的内容。
这里推荐一个技术简历的最佳实践：
我在附录3里附上了本身的求职简历，供感兴趣的同窗查看
2.1.3 玄学的亮点
亮点也是一个玄学，由于亮点是由面试官决定的，也许你的面试官恰巧和你同样喜欢摄影 / 爬山 / ……，有可能他正好从你的一段项目经历中看到了你的我的魅力，而另外一个面试官却对此毫无感触。
可是就像美国大片总能打动绝大部分观众的心里，简历的亮点也是能够设计的，这里依然是建议多参考一些优秀的简历进行学习。
2.1.4 邮件格式的小细节
有的时候会发简历到HR或者内推人的邮箱，很容易忽视邮件的格式细节。
简单归纳，一封简历邮件须要有明确的邮件标题以及表现本身诚意的正文，不要小看这一句话，看看滴滴在打车时的推荐问候语就知道一句问候的价值了。
千万不要留空，印象分会减不少。
这里推荐一个我本身的最佳实践：
2.2 经过笔试
这点能够说的不少也不多。可能是由于笔试题型太多了，一道道讲不完。少是由于笔试不一样于面试，笔试是全部人统一题目，所以目的和简历初筛是同样的，都是为面试官快速筛选提供帮助。
有的公司还会在笔试以后再开始初筛。甚至有些状况下（好比内推）是能够免除笔试的，所以这里不作赘述。
笔试没有什么窍门，惟一的办法就是刷题库，推荐 Leetcode。要是能刷100道基本上面试题就不用愁，要是刷到200道就不用害怕校招笔试了。
我在附录2中记录了本身遇到的一些笔试题，仅供参考。
0x03 大厂前端校招：如何经过面试？
3.1 克服紧张
任何人在第一次面对面试官的时候都会紧张，即便我经历这么多场面试，依然会在有的时候感受控制不住本身的状态。若是你能克服这种紧张，你就已经比多数面试者成功了一小半。记住，面试官永远都喜欢你临危不乱，面对难题依然可以掌握大局的样子。在之后任何场合都是如此。
如何克服紧张，我这里提供两点建议
- 尽量多的参加你所能参加的一切 优质 面试，注意，是优质面试，好的面试能够帮助你进一步巩固本身的知识系统，最重要的是培养你的临场反应能力。
- 尽量少的在心里期待面试官对你的评价，把重心放在解决问题上，不要把本身的实力依赖于面试官的承认，更要学会自我评估。
3.2 完备的逻辑思惟
面试的时候，面试官老是喜欢出一些看起来很刁难的问题：实现一个Vue双向绑定，写一个公平的洗牌算法，写一个css走马灯样式，获取某个字符串的全排列，写一个class的polyfill等等。
或者是深挖你的项目经历一步步追问技术细节，让你现场考虑如何实现更好的效果。
这种时候，你要意识到面试官是在考验你的逻辑思惟，面试官的目的不是要你给出一个绝对完美的解决方案，而是想看到你如何运用一套好的逻辑思惟来调用本身的知识库，最终给出你本身的思考路径，最重要的是这个过程当中间的思考，必定要阐述给面试官。
3.3 扎实的技术储备与工程能力
重点来了！如下是整个面试中90%时间在干的事情，也就是对你的技术储备与工程能力的考核。
通常来讲，大厂的前端校招会比其余中小企业更看重对面试者的全方位考核，若是你是科班出身，校招的技术考核会包括且不限于：
- 计算机专业基础（数据结构，算法，计算机网络，操做系统，数据库）
- 职位相关基础（JS/ES知识体系，浏览器渲染与缓存，先后端通讯，Web安全）
- 工程实践经验（性能优化，依赖管理，依赖打包，模块化，组件化，用户鉴权，版本管理，包管理，服务器基础）
- 主流框架理解（Vue，React二选一）
- 部分要求极高的大厂还会考核你的理科基础（线性代数，高等数学）
另外，不一样的大厂也有不一样的侧重点。
技术实力最顶尖的阿里淘系FED会对你的基础知识体系以及你简历上写到的技能展开一场惨绝人寰的刨根问底，而字节跳动则更看重你的实际工程经验以及对于软件系统架构的理解。
经过每家大厂的面试策略，你也能够侧面观察出这家企业的团队技术实力和业务发展前景。
为了更清晰的描述大厂校招知识体系，我将考核中涉及到的全部面试题整理成了一张思惟导图。建议一条一条仔细查阅，对于任何没有百分百把握的知识点，我都建议你把它整理到一个列表里，逐条梳理。
PS.标星的是非必须知识，能够略过：
3.4 职业规划
若是你经过了以上全部考核的话，恭喜你，你离得到offer基本只剩一步之遥了。
通常到这个时候，面试官会问你对本身的职业规划，千万不要小看这个问题。
这个问题其实也是须要本身问题本身的，最好在投递简历的时候就想清楚：
- 我为何要去这家企业，我看中它哪方面的优点
- 我为何要应聘这个岗位，我对本身将来的发展方向有什么样的期许
仍是那句话 —— 不想当架构师的前端不是好程序员（雾）。
3.5 每次结束后必定要复盘总结
这点就不用多说了，现场面试最好一出场就开始回忆面试流程&写备忘录，若是是电话面试能够录音下来重听一边，捋一捋面试官的问题和本身的回答，看看本身答得如何（答成了什么b样），有没有可能答得更好。没有这点，你参加再多的面试也和没有参加同样。
我在附录1中记录了每次参加校招时的复盘。
0x04 各家大厂的面试体验
这里原本想仔细量化评测一下各家大厂面试流程中的面试体验，遗憾的是有些面试已通过去一段时间了，印象不是那么清晰，我担忧个人评价会有失偏颇。因此就简单说一下在各家面试过程当中让我印象深入的一些事情吧。
- 字节会给参加面试的每一个人发一个包含抖音帽子在内的小礼包，还有一袋早餐，中午还有免费的自助午饭供应，很是贴心了
- B站的老哥在问我为何选择B站的时候，补充了一句“除了二次元情怀以外”
- 阿里淘系FED的每一轮面试都是突袭电话面试，分别在我睡觉、飞翔、吃饭的时候打了进来，每一轮平均时间90分钟，并且会提早告诉你面试的目录……（具体能够看附录1里的
# 6.8 阿里校招二面） - 我骑着摩拜单车去美团摩拜总部的大楼参加了摩拜单车小程序开发的面试
- 在字节认识了一个很逗的学弟和一个很可爱的负责飞聊的小姐姐
- 腾讯的内推仍是挺重要的，否则面试官可能看不到你
- 上面这条对于多数大厂都适用
- 上面这条不适用于字节
- 很是但愿腾讯和阿里的小哥哥看到这里不会挂掉我
0x05 写在最后：如何成为一个优秀的前端工程师
最近看到一篇文章《前端深水区》感触颇深，技术岗的最终出路必定是创建技术壁垒和影响业务决策。
在面试B站的时候，也遇到了一个让我陷入了思考的问题，面试官当时问我：“我对你的职业规划印象很好，你打算怎样去实现它呢？我给你一分钟的时间仔细思考这个问题。”
最后我回答了他三句话：
- 保持进取
- 保持客观
- 天天坚持探索最佳实践
与你们共勉。
附录1：大厂面试题整理
6.1 符号约定
| 符号 | 含义 |
|---|---|
| √ | 现场回答正确 |
| × | 现场回答错误 |
| ? | 现场没法判断是否答对 |
| 追问 | 对于父问题的追问 |
| () | 我在面试现场的回答思路 |
| ()右边 | 最合适的回答（或对现场回答的补充） |
| 补充 | 面试官亲自对现场回答的补充 |
| 问 | 我向面试官提出的问题 |
PS. 并非全部试题都包含以上符号，由于都是现场回忆记录，因此有不少不全的地方。
6.2 阿里实习一面
- 用js描述一棵树 √
- 非递归遍历树 ×
- 详述js new操做 √
-
方法调用模式this指向 ×
- 追问：函数调用模式this指向 √
- 什么是js闭包 √
- 如何跨域访问 √
- vue的父子组件之间如何通讯 ×
- 用css写无限循环动画 ×
- 如何响应式布局 √
- 如何清除float √
- 手写jsonp √
- 为何禁止跨域 ×
- osi七层 × 漏说了
- tcp三次握手 √ 四次挥手 ×
- setTimeout为什么能在单线程的js里异步执行 ×
- 进程和线程的区别 ？
- 写一个数字转中文的程序 √
- js函数中如何绑定this到新对象上 √
- bind和call有什么区别 ×
- 手写快排 ×
- 讲一下http状态码 √，其中303 304表明什么 ×
- 死锁的原理和四要素 √
- cookie和session的区别 √
- 同源的定义 √
6.3 Bilibili校招一面
- 详述es5 es6中的做用域和闭包 √（es5全局+函数级，函数化闭包，es6块级）
- 详述输入url到页面渲染完成 √（域名解析-TCP分包-IP寻路-握手-滑动窗口传输-持久化链接-挥手-解析-构建dom树与cssom-构建渲染树-回流-重绘-渲染）
- 详述js异步机制Event Loop，MacroTask和MicroTask √（1个主线程+n个任务队列，浏览器异步处理后推入队列，循环处理，一个macroTask后跟所有microtask）
- Promise.all的用法 √（在全部all中的promise结束后再执行）
- 如何让Promise.all在抛出异常后依然有效 ×（正确答案：主动reject）
-
什么是VueX √（状态量跨组件管理）
- VueX中action和mutation的区别 ×（正确答案：同步和异步）
- 详述Vue的双向数据绑定原理 √（语法糖，dom监听+模型监听）
- Vue的优点 √（virtual dom，数据绑定，视图与模型分离，隐去冗杂的dom操做）
- 如何实现SEO优化 ？（只答了服务器端伪静态）
- 详述回流和重绘优化 √（回流是对物理尺寸的变动，回流必定会重绘，重绘不必定回流，所以尽可能减小回流次数，将元素移出dom树再变动）
- 详述防抖和节流优化 √（状态锁/同步锁）
- 简述ES6新特性 √（块级做用域,变量不提高,let, const,箭头函数,模板字符串,promise,async）
- 简述箭头函数特性 ×
- webpack打包如何优化 ×
6.4 阿里校招一面
- 列举几个css中可继承和不可继承的元素 √
- 用css选中列表第二项 √
- 伪类和伪元素的区别 √
- h5字体如何自适应屏幕 √
-
rpx是什么 √
- 追问：rem是什么 ？
- 追问：vw是什么 √
- 追问：vw和rem区别 ×（vw根据屏幕宽度，rem根据根元素肯定font-size换算比例）
- 什么状况下css会使用gpu加速 √
- css filter是什么 ×（元素的可视效果例如：模糊与饱和度）
- 网页如何去适配不一样宽度 √
- 详述meta标签的做用 √
- position默认值和全部可能值 √
- 什么是sass和less √
- css动画最小间隔 √
- shadow dom是什么 ×
- svg和canvas的概念和区别 √
- canvas图层怎么用 ×
- dom渲染的性能损耗在哪里 √
- 如何高效地从1000个div中删除10个div √
- 如何监听img加载完成 √
- 浏览器里除了js还能运行什么 × (webAssembly和actionscript)
- promise有几种状态 × (fufilled, rejected, pending)
- 如何捕获promise错误 √
- promise能够串联吗 ？答的不清晰
- 详述vue都能解决什么问题 √
- virtual dom如何进行diff操做 ×
- vue中data为何是函数不是对象 √
- 为何须要深拷贝 √
- 简述指针是什么 √
- node.js了解吗 × 不了解
- 进程和线程的区别 √
- 你本身开发的平台有多少用户和访问量 √
- 如何监控未处理的异常 ?（只说了监听console error）
- 5G是什么，为何要用5G（开放题目）
- 想象一下5G的应用场景（开放题目）
- http和https的区别 √
- 为何https不会被截获 √
- 量子计算机可否破解非对称加密 √（附加）
- 量子计算机的原理 √（附加）
- 浏览器如何缓存 ？(答的很差，设置http头部）
- 详述http 1.0, 1.1, 2.0的区别 √
- 详述TCP如何保证传输完整性 √
- UDP和TCP有什么区别 √
- 为何使用UDP × 答的很差
- WebSocket是基于什么协议链接 √
- 冒泡算法和快排时间复杂度 √
- 分布式系统用什么算法排序 ？半对
- 广搜和深搜的应用 √
- 广搜的数据结构 √
- 链式求导是什么 ×
- 矩阵的秩是什么 ？半对
- 梯度和导数，偏导 √
- 信息熵 √
- 编译原理 ？半对
- sql如何获取当前时间 √
- char和varchar区别 √
- drop, delete, truncate ？（半对，truncate能够持久化）
- python用过吗 ？作过爬虫
6.5 小米实习电话面试
- 做为全栈为何报前端 √
- js用的哪一个版本 √
- es6新特性 √
- promise有几种状态 √
- promise如何知足多个异步进程的同步顺序 √
- promise.race和promise.all的区别 ×
- 怎么设计页面布局（开放题目）
- 如何用flex让8个图标排成两行 ×（flex-wrap）
- 垂直居中和水平居中 ×（说反了）
- 你的页面是用一套界面响应不一样宽度吗 √
- 本身如何调先后端api √
- vue中的fetch和axios是什么×
- 跨域问题怎么解决 √
- 跨域怎么作post ×（用iframe）
- 详述git操做 √
- vue.js 加载完成前隐藏花括号 ×（v-clock）
- 开发主要用react，有兴趣转技术栈吗（有）
- 能够实习多久
6.6 Bilibili校招二面
- 纯js如何获取scrolltop值 √
- 详述js闭包原理和意义 √
- 深拷贝 浅拷贝是什么 √
- arguments如何转数组 √
- 移动端和pc端click事件为何差了300毫秒 ×（由于iphone能够双击缩放）
- flex布局用法 √
- 如何实现移动端响应式布局 √
- ES6的做用域 √
- async await是什么 √
- 块级做用域有哪些 √
- 详述promise异步机制 √
- 如何实现跨域访问 √
- http通讯如何设置缓存 √
- 详述http状态码 √
- 如何实现vue组件通讯 √
- 简述VueX的做用 √
- 如何实现一个swiper √
- hybrid是什么 √
- hybrid js如何调用native接口 ×
- 为何要作前端
- 对于本身的发展规划
- 上海怎么样
6.7 网易校招一面
- 块状元素 行内元素 √
- 标签语义化是什么 √
- css清除浮动 √
- 什么是盒模型 √
- css优先级 √
- position属性 √
- 移动端适配？（媒体查询，flex，rem）还有viewport
- px em rem √
- ==和===的区别 √
- 原型和原型链是什么 √
- 什么是深拷贝 √
- 什么是同步 什么是异步 √
- 如何顺序执行10个异步任务 ？（答的不全）
- es6 proxy是什么 ？（不了解，说了下代理模式的概念）
- 题目：遍历一个任意长度的list中的元素并依次建立异步任务，如何获取全部任务的执行结果 ？（用promise.all，感受面试官不是很满意，应该是用proxy代理）
- 对一个对象数组排序 ？（增长原型方法）
- 乱序一维数组排序
- 数组去重 ？（map.set，键值对象）
- 如何进行git的分支管理 ？（答的不全）
- 浏览器有哪些缓存 √
- 什么是跨域 √
- 如何解决跨域 √（jsonp，代理，白名单）
-
不考虑还有别的办法 √
- 补充 本地存储，window.name，form.message
- 页面性能的优化 √（重绘，回流，防抖，节流
- 还有吗 √（懒加载，预加载）还有base64，压缩，骨架屏
- 浏览器安全处理 √（xss，数据库注入）还有csrf，文件上传漏洞
- 有没有真机浏览器debug经验（开放题）
6.8 阿里校招二面
- 一分钟介绍一下你的项目经历 √
- 是否了解淘系FED这个部门 √
一.基础部分
-
html
-
如何在移动端处理兼容性 ？（css前缀）
- 追问 工程中遇到过相似的问题（svg）
- 追问 还有补充吗（没了…）还有meta viewport http-equiv
- vw em rem的区别和使用场景 √
- 不一样定位模式之间的区别 √
- fix的显示问题？（宽度塌陷）没答全，还有z-index覆盖
-
canvas如何使用图层 √
- 追问 如何避免图层覆盖 ？（答的封装）
-
-
css
- 全部绝对居中的实现 ？( flex, text, padding: auto）没答全，还有translate
- sass和less有什么区别 √
-
实现响应式布局的方法 √ (flex 媒体查询 rem)
- 追问 还有吗 √ (grid)
- 了解过BFC吗 ×（不了解）
-
js
- 用三句话归纳全部值传递类型，全部引用传递类型，以及如何用引用的方式传递值类型 ？
-
js全部基础类型 ？（布尔值，数字，字符串）还有null和undefined，symbol
- 追问 null和undefined的区别 √（未定义和赋空值）
- 追问 怎么比较 ×
- 指针和引用的区别 √（地址和别名）
-
js当中对于不一样环境的变量何时释放 √（标记清除和引用计数）
- 追问 在非闭包的状况下变量何时会被回收？（不肯定）
- js的做用域你怎么理解 √
-
js里的多重继承怎么实现 √（call，es6 extend)
- 追问 还有吗？（不知道）
2、工程部分
- React 和 Vue 生命周期有什么区别？（答了vue，react不了解）
- Vue如何监听数据的变化 √ (defineProperty，订阅者模式)
- Vue里如何实现父子组件之间的通讯 √
- 了解太高阶组件吗（不了解）
- 看过Vue的源码吗（目前主要在理解原理阶段）
- 有没有使用工具构建过工程项目（vue cli+webpack）
- webpack编译和构建原理（分析依赖，chunk）没有说loader
- 平时使用什么工具转换es6（babel）
- babel转码流程（配置.babelrc，解析语法数，改变块级变量名等等）
3、算法部分
- js哈希存储结构的构成方式 √（哈希值，哈希表，哈希冲突）
- js当中如何实现某一个数的阶乘 ？（只答了for循环）
- 设计一个算法找到乱序数组中相加等于指定值的全部数对 √（快排+两端查询 / 两层for）
6.9 阿里校招三面
- 介绍一下你的项目（中大型小程序系统，企业控制台，Vue CLI单页面web应用等）
-
你的小程序是怎样一个软件（校内交易社区）
- 追问 为何不经过闲鱼去卖呢（解决楼内交易）
-
你的小程序用openid去登录，能够讲一下OAuth流程吗（可信平台对前端发放token，后端处理敏感信息）
- 追问 OAuth有什么优点（避免前端直接接触敏感信息）
-
你的小程序Websocket通讯系统是作什么的（各类类型消息的实时通讯）
- 追问 你的实时语音通讯是怎么作的（接口鉴权->手势状态机->本地持久化->上传服务器->缓存管理）
- 追问 微信的录音返回数据是传回base64吗（不是 是返回tmp协议路径）
- 追问 你的录音本地持久化的目的是什么（减轻服务器负载，减小冗余的资源重传）
- 追问 你的本地持久化是怎么作的（用local storage）
- 追问 你的一条语音大概有多大（几十k到几百k）
- 追问 小程序的localstorage有多大（10-20M）
- 追问 你的websocket为何要作心跳（避免网络环境变化带来的通讯中断）
- 追问 你的心跳机制是怎么作的（计时器控制 超时重连 网络状态监听）
- 你是本身买的服务器吗（阿里云）
- 你的CDN服务是怎么作的（阿里云）
- 你的SSL是怎么作的（配置ssl证书链，非对称加密）
-
你的搜索为何用Elastic Search（中文分词，倒排索引，高效）
- 追问 你的中文分词搜索是怎么作的（IK分词器）
-
你的数据库用的是什么引擎（INNODB）
- 追问 为何用INNODB引擎（外键，索引类型，utf8mb4）
- 追问 INNODB的锁是什么粒度级别（答的表级，不太肯定）
- 追问 对于事务的原子性有了解吗（不了解）
- 你的单页面web应用是怎么作的（Vue CLI+Webpack自动构建，Vue Router路由）
-
你的用户密码是怎么存在数据库里的（PASSWORD函数）
- 追问 用户密码在前端传输的时候有作加密吗（有了ssl不须要）
-
你有没有作登录态持久化，怎么作的（设置cookie过时时间）
- 追问 你的服务器端怎么管理session登录态（php自动分发）
- 追问 怎么在多台服务器同步session数据（数据库或者分布式系统）
- 追问 分布式怎么作（hbase或者es）
- 追问 存储完之后怎么用php获取呢（不知道）
-
在中航通用实习的主要成果（独立开发web系统，数据控制台，后端服务器）
- 追问 你的控制台管理什么数据（产品，新闻，职位，简历）
- 追问 你的WYSIWYG编辑器是本身作的吗（基于summernote二次开发）
- 追问 你的异步交互和事物存储是什么（AJAX+PDO）
- 你对于本身将来发展的规划是什么样（读框架源码-写本身的框架-掌握先后端深层知识-掌握整个软件架构）
- XSS，CSRF，数据库注入怎么防范（控制前端渲染，控制后端处理，预编译）
- 解释一下深拷贝和浅拷贝（引用传递和值传递blablabla）
- 平时本身是怎么关注前端领域的知识的（工具书，技术博客，官方文档，交流群）
6.10 美团校招一面
- 介绍一下你的项目经历
- 影响页面加载性能的主要因素 √
-
你是怎么统计页面数据的 √
- 补充 其实这些数据能够用小程序控制台查看
- 你的微信OAuth登录怎么作的 √
- 你的微信模板消息怎么作的 √
- 小程序的分包原理是什么×（用户点击时加载对应包）
- 如何自动构建前端项目并自动部署？（webpack+第三方插件自动化）
-
视差屏原理 √
- 追问 用absolute和translate作视差哪一个好 √
- 追问 你的vue项目里为何用了jquery，用在哪 √
- 数组有哪些方法 √
- 函数bind方法会接收什么，返回什么 √
- 哪些静态资源会阻塞页面渲染，怎么解决，有什区别 √
- 如何跨域访问 √
- JSONP原理 √
- 事件代理原理 √
- 你如今的实习主要作什么
- 能接受加班吗 以及能接受的加班时间
- 为何选择美团
6.11 字节跳动校招一面
- 你的项目经历
- js有哪些基础类型√
- 闭包是什么√
- 如何循环间隔1秒输出数组元素√
-
如何实现事件监听√ (callback，addEventListener)
- 追问 二者有什么区别√ (后者会被覆盖)
- Vue生命周期√
- BFC了解吗× 块级格式化上下文
-
画一个盒模型√
- 追问 box-sizing√
- 实现一个三栏布局√
- websocket原理√
- 登录的cookie怎么存的√
- 把
www.toutiao.com转为com.toutiao.www√
6.12 字节跳动校招二面
- 介绍一下你的项目经历
- 你的php包管理用什么√ composer
- composer的autoloader怎么实现的？
- php fast-cgi是什么？并发管理
- php set_cookie是否会改变$_COOKIE数组√不会
- 你的MYSQL Procedure是干什么的√函数交互
- 跨域请求怎么设置header字段√
- Vue Router原理√
- VueX具体应用在哪些场景内√
- 用过哪些Ajax组件√ Axios
- Axios怎么实现拦截√
- js二维数组反向合并√
输入：[1, 2, [3, 4], 5, 6, [7, 8], 9] 输出: [[3, 4, 1, 2, 5, 6][7, 8 ,9]]
- js驼峰转换√
输入：contentType 输出：content_type
6.13 字节跳动校招三面
- 介绍一下你的项目经历
-
给我看看你上线的小程序√
- 追问 这里瀑布流不平衡怎么回事√（用10px显示偏差换取预加载带来的性能提高）
- 追问 服务器用的什么√（阿里云腾讯云都用）
- 追问 服务器运维了解吗√
- 追问 服务器宕机之后怎么解锁mysql×（工程中没有遇到，不肯定）
- 追问 cpu使用率异常升高怎么解决√
- 描述一下你的小程序开发流程√
-
你的websocket是干什么的√
- 追问 你的websocket是怎么通讯的√
- 离线怎么获取消息√
- Vue Router原理√
- 你的发展规划（前端工程-前端架构-系统架构）
- 你的意向部门（C端）
- 问 有可能去哪一个部门（不肯定，双向选择）
6.14 网易校招二面
坑点：没有准备耳机，视频面试官声音比较小，一开场乱了节奏
-
性能上面作过优化效果最好的×××（懒加载，预加载）
- 追问 在什么状况下判断预加载（点击时利用150ms延迟进行预加载）
- 追问 还有其余状况会用预加载吗（没有用过）
这两个是你认为最明显的吗×××（严重失误，忘记说重绘和回流以及防抖和节流，浏览器缓存，代码压缩，异步加载等等）
- 其余方面好比构建 组件化的拆分作过吗 （）
6.15 Bilibili校招三面
6.16 腾讯校招一面
6.17 小米校招一面
6.18 小米校招二面
附录2：大厂笔试题整理
7.1 腾讯校招笔试
1. 字符串解码
小明和小红用字符串压缩通讯。
字符串压缩规则是：若是有连续重复的字符串好比ABCABCABC就缩写成[3|ABC]。
现有压缩后的字符串，设计一个解压程序还原字符串。
样例：
输入： HG[3|B[2|CA]]F 输出： HGBCACABCACABCACAF
坑点：
须要优化内存，我之因此87.5就是由于内存溢出MLE了，正在考虑用栈结构重写一次。
思路（87.5/100分）：
string decode(string s) {
string res = "", ans = "";
int len, start , end;
int time, counting;
time = 0, counting = 1;
len = s.size();
for (int i = 0; i < len; i++)
{
if (s[i] == '[')
{
start = i;
for (i = len; s[i] != ']'; i--);
end = i;
res += decode(s.substr(start + 1, end - start - 1));
i++;
}
if (counting && s[i] >= '0' && s[i] <= '9')
{
time = time * 10 + (s[i] - '0');
}
else if (s[i] == '|')
{
counting = 0;
}
else
{
res += s[i];
}
}
char tmp = res[res.size() - 1];
if (tmp == '\0')
{
res = res.substr(0, res.size() - 1);
}
if (time > 0)
{
for (int i = 0; i < time; i++)
{
ans.append(res);
}
}
else
{
ans = res;
}
return ans;
}
int main()
{
string s;
cin >> s;
cout << decode(s) << endl;
return 0;
}
2.识别IP
判断一个ip地址是否是私有的
已知私有IP范围是：
10.0.0.0 - 10.255.255.255 172.16.0.0-172.16.255.255 192.168.0.0-192.168.255.255 127.0.0.0/8 # 注意！这里是一个巨坑，0/8的意思表明子网掩码255.255.255.0，也就是最后8位能够有动态范围，这是一种简写方法，可是腾讯并无说明其含义，可能也是一处考察。
样例：
输入： 0.0.0.0 输出： false
思路（100/100分）：
function isPrivate(ip){
// TODO
let ipVal = ip.split('.');
ipVal[0] = Number(ipVal[0]);
ipVal[1] = Number(ipVal[1]);
ipVal[2] = Number(ipVal[2]);
ipVal[3] = Number(ipVal[3]);
if (ipVal[0] == 10) {
if (ipVal[1] >= 0 && ipVal[1] <= 255) {
if (ipVal[2] >= 0 && ipVal[2] <= 255) {
if (ipVal[3] >= 0 && ipVal[3] <= 255) {
return true;
}
}
}
}
if (ipVal[0] == 172) {
if (ipVal[1] >= 16 && ipVal[1] <= 31) {
if (ipVal[2] >= 0 && ipVal[2] <= 255) {
if (ipVal[3] >= 0 && ipVal[3] <= 255) {
return true;
}
}
}
}
if (ipVal[0] == 192) {
if (ipVal[1] == 168) {
if (ipVal[2] >= 0 && ipVal[2] <= 255) {
if (ipVal[3] >= 0 && ipVal[3] <= 255) {
return true;
}
}
}
}
if (ipVal[0] == 127) {
if (ipVal[1] == 0) {
if (ipVal[2] == 0) {
if (ipVal[3] >= 0 && ipVal[3] <= 8) {
return true;
}
}
}
}
return false;
}
3. 驼峰转换
把一个由 - 或 _ 或 @ 链接的变量词组转换成驼峰写法
样例：
输入： content-type 输出： contentType
思路（100/100分）：
function camel(str) {
// TODO
let ans = "";
let upper = false;
for (let index = 0; index < str.length; index++) {
const element = str[index];
if (element == '_' || element == '-' || element == '@') {
upper = true;
} else {
if (upper) {
ans += element.toUpperCase();
} else {
ans += element;
}
upper = false;
}
}
return ans;
};
4.星球开会
企鹅星球上一天有N(<200000)个小时（时间不包含0点），对应N个时区，当第1时区一点的时候第2时区已经两点了，以此类推
每一个时区有Ai我的，每一个时区上的人只有在[u,v)时间内有空，如今想要让尽量多的人开会，给出开会时第一时区的时刻
样例：
输入： 3 2 5 6 1 3 输出： 3
坑点：
时区的对应有一点绕，我一开始理解成后一个时区比前一个时区落后，其实是超前的，每后一个时区比前一个时区快1个小时，解决掉这个问题就没有大问题了。
另外要考虑一下时间复杂度的问题，个人优化比较差，最坏复杂度是O(n2/2)
思路（80/100分）：
int main() {
int n, u, v, len, pos;
long long ans, tmp;
cin >> n;
vector<int> a(n, 0);
for (int i = 0; i < n; i++)
{
cin >> a[i];
}
cin >> u >> v;
u--;
v--;
len = v - u;
pos = 0;
if (len < n / 2)
{
ans = 0;
for (int i = 0; i < n; i++)
{
tmp = 0;
for (int j = 0; j < len; j++)
{
tmp += a[(i + j) % n];
}
if (tmp > ans || (tmp == ans && ((n + u - pos) % n < (n + u - pos) % n)))
{
ans = tmp;
pos = i;
}
}
}
else
{
ans = INF;
for (int i = 0; i < n; i++)
{
tmp = 0;
for (int j = 0; j < n - len; j++)
{
tmp += a[(i + j) % n];
}
if (tmp < ans || (tmp == ans && ((n + u - pos) % n < (n + u - pos) % n)))
{
ans = tmp;
pos = i;
}
}
}
cout << (n + u - pos) % n + 1 << endl;
return 0;
}
7.2 网易校招笔试
1.超大数和一个长整型的最大公约数。
第一题的思路比较简单，就是展转相除法，用字符串存储大数，而后分段展转相除
展转相除法：假若有两个正整数p1,p2，其中p1>p2，那么必然存在两个天然数k，b，使得p1=k*p2。
若是p1,p2的最大公约数是p3，那么p2,b的最大公约数也是p3。
例如gcb(55,30)=gcb(25,30)=gcb(25,5)
2.一个数组中长度从1到n的子序列中最大值的最小值。
题目：在一个最大长度200000的数组中，分别求出长度从1到n的子序列中最大值的最小值
样例：
输入： 6 1 8 7 5 4 2 输出： 1 4 5 7 8 8
简单来讲，就是把一个数组进行连续子序列的划分，从长度为1的子序列开始划分，每次划分子序列后，求出每一个子序列的最大值，再求出全部这些最大值中最小的那个，一直到长度为n的子序列（序列自己）。
这题一开始把我看绕了，其实就是一道标准的DP题，然而我最后作的这题，考完才写出来。。。此次笔试基本是按照最差的答题顺序来的，估计跪了。
状态转移方程能够这样想出来：
设dp[j][i]是从数组第j个数字开始的长度为i的子序列的最大值，当长度i=0（实际长度应该为1，从0开始方便些）时，dp[j][0]等于数字自己num[j]，从i=1开始，dpj的长度等于MAX(dp[j][i-1], dp[j+1][i-1])也就是先后相邻的两个长度为i-1的子序列最大值中的最大值。
这题要求的是同一划分长度下全部最大值的最小值，因此在计算dp数组的同时还要计算这个值是否为当前划分长度的最小值，因而定义一个min数组，长度100000，先初始化成最大数值,每次计算dp[j][i]的时候与min[i]比较哪一个值更小，一趟下来就能获得最小值了。
思路：
#include <stdio.h>
#include <stdlib.h>
#include <math.h>
#include <string.h>
#include <algorithm>
#define MAX(x,y) ((x) > (y) ? (x) : (y))
#define INF 0x7FFFFFFF
using namespace std;
int num[100000] = { 0 };
int (*dp)[100000];
int main()
{
int n;
int min[100000] = { 0 };
scanf("%d", &n);
dp = (int (*)[100000])malloc(n * 100000 * sizeof(int));
for (int i = 0; i < n; i++)
{
scanf("%d", &num[i]);
min[i] = INF;
}
for (int i = 0; i < n; i++) {
for (int j = 0; j < n - i; j++)
{
if (i == 0)
{
dp[j][0] = num[j];
}
else
{
dp[j][i] = MAX(dp[j][i - 1], dp[j + 1][i - 1]);
}
if (dp[j][i] < min[i])
{
min[i] = dp[j][i];
}
i = i;
}
}
for (int i = 0; i < n; i++)
{
if (i>0)
{
printf(" ");
}
printf("%d", min[i]);
}
printf("\n");
return 0;
}
3.奇偶互换
一个数组中，奇偶数可互换，求任意次互换后字典序最小的数组序列。
我的思路：没有特别好的想法
4.数组减一
给定一个长度M（<=100000）的数组，而后输入N(<=100000)个整数，每次将数组中全部大于等于该整数的元素减一，并输出改变了多少个元素，要求时间性能小于1s。
我的思路：
用二分查找结果70%结果都TLE了，通过分析认为主要是遍历数组进行减一的操做太费时间（O(n^2)的复杂度)后来考虑用一个数组储存更新过的下标分界位置来绕过遍历减一的环节，然而没写完。
7.3 大疆校招笔试
1. 玩游戏
给定暑假时间X天(<=1000)，游戏数量N个(<=11)，接下来N行给定每种游戏须要花费的天数（Ai），以及通关该游戏带来的成就点数（Bi），求：在暑假X天里可以达成的最高成就点数。
我的思路：
#include <iostream>
#include <vector>
#include <cassert>
#include <algorithm>
using namespace std;
// 须要填充一个容量为X的背包，使得成就点数最大
class Knapsack01 {
private:
vector<vector<int>> memo;
// 用 [0...index]的物品,填充容积为c的背包的最大价值
int bestValue(const vector<int> &w, const vector<int> &v, int index, int c) {
if (c <= 0 || index < 0)
return 0;
if (memo[index][c] != -1)
return memo[index][c];
int res = bestValue(w, v, index - 1, c);
if (c >= w[index])
res = max(res, v[index] + bestValue(w, v, index - 1, c - w[index]));
memo[index][c] = res;
return res;
}
public:
int knapsack01(const vector<int> &w, const vector<int> &v, int C) {
assert(w.size() == v.size() && C >= 0);
int n = w.size();
if (n == 0 || C == 0)
return 0;
memo.clear();
for (int i = 0; i < n; i++)
memo.push_back(vector<int>(C + 1, -1));
return bestValue(w, v, n - 1, C);
}
};
int main() {
// X为暑假天数，N为游戏数量
int X, N;
cin >> X >> N;
int w, v;
// vs存的是价值(成就点数)
// ws存的是每一件物品的重量(天数)
vector<int> vs, ws;
for (int i = 0; i < N; i++) {
cin >> w >> v;
vs.push_back(v);
ws.push_back(w);
}
cout << Knapsack01().knapsack01(ws, vs, X) << endl;
return 0;
}
PS.这题我特么写成彻底背包了，实际上是01背包，结果只对50%。
2.输入指令：
输入指令集长度M和指令操做长度N 接下来输入M个指令(字符串)=》指令值(字符串)的映射关系 而后随机输入N个指令，要求输出对应指令值。
我的思路：
最简单的用c++ map容器，然而忘记map写法，耽误大量时间，超级遗憾。
#include <iostream>
#include <string>
#include <map>
using namespace std;
int main()
{
map<string, string> ops;
int x, y;
cin >> x >> y;
for (int i = 0; i < x; i++)
{
string a, b;
cin >> a >> b;
ops[a] = b;
}
for (int i = 0; i < y; i++)
{
string op;
cin >> op;
cout << ops[op] << endl;
}
}
3. 买水果
给定N块钱，M种水果，每种水果价格Pi，其中有X种特别喜欢的水果，给定不一样水果喜欢程度的排序，并要求排序靠前的水果购买量不得小于靠后的，求全部把钱花光的可能性，结果对10000007取模。
我的思路：
跪了...
7.4 字节跳动校招笔试
1. 上学闹钟O(nlogn)
小明定了n个闹钟，他只能在闹钟响起时出发去学校，每一个闹钟时间分别为hi点mi分，小明家到学校要x分钟，学校上课时间a点b分 （0-24小时，0-59分钟），求他最晚几点起
输入： 3 //定了几个闹钟 5 0 //第1个闹钟的小时数和分钟数 6 0 //第2个闹钟的小时数和分钟数 7 0 //第3个闹钟的小时数和分钟数 59 //到学校要多少分钟 6 59 //上课的小时数和分钟数 输出： 6 0 //最晚的起床时间
思路（80/100分）：
纯智障思路，自定义结构体存储闹钟时间，所有输入后对闹钟时间从晚到早排序，接下来从前日后遍历闹钟时间，计算从当前时刻出发到学校的时间，输出第一个可以到达学校的，因为算法很粗劣，很明显被卡边界了，没时间管了直接看下一题。
代码：
struct Time
{
int h;
int m;
friend bool operator < (Time a, TIme b){
if(a.h == b.h){
return a.m > b.m;
}
return a.h > b.h;
}
}
int main()
{
int n, x, a, b, rest;
cin >> n;
Time* time = (Time*)malloc(n * sizeof(Time));
for (int i = 0; i < n; i++)
{
cin >> time[i].h >> time[i].m;
}
sort(time, time + n);
cin >> x;
cin >> a >> b;
for (int i = 0; i < n; i++)
{
rest = 0;
if (time[i].h < a || time[i].h == a && time[i].m < b)
{
rest = (a - time[i].h) * 60 + b - time[i].m;
if (rest >= x)
{
cout << time[i].h << ' ' << time[i].m << endl;
break;
}
}
}
return 0;
}
2. 加密通讯 O(n)
小明和小红采用密码加密通讯，每次通讯有固定的明文长度n和加密次数k。
好比：密码二进制明文是1001010，加密次数是4，则每次将密文右移1位与明文作异或操做，总共位移3次（k=4, 因此k - 1 = 3）
输入： 7 4 // n k 1110100110 //密文 输出： 1001010 //明文 解释： 1001010--- -1001010-- --1001010- ---1001010
加密次数为4，故对于明文右移4-1=3轮，每轮与当前密文进行一次异或，故1001010对应密文为1110100110
思路（100/100分）：
一道标准的异或数学题，不知道该怎么归类，有一点考数学的感受，看几眼就能看出规律了直接上代码
简单讲一下思路：
首先密文和明文第1位是同样的，看一下上方样例里的解释就懂了。
而后考虑第2到k-1位，能够发现这一段的每一位都是由前一位密文的异或结果再与当前位明文异或获得的。
接下来考虑第k到n-1位，观察规律能够发现这一段的每一位都是由前一位密文与第i-k位明文异或获得的结果再与当前位明文异或获得的。
如何消除异或影响你们应该都能理解，所以只要把参与异或的部分再与密文异或一下便可获得明文。
int main() {
int n, k, tmp;
string s,ans="";
cin >> n >> k;
cin >> s;
ans += s[0];
for (int i = 1; i < k; i++)
{
tmp = (int)(s[i] - '0') ^ (int)(s[i - 1] - '0');
ans += tmp + '0';
}
for (int i = k; i < n; i++)
{
ans += (int)(s[i] - '0') ^ (int)(s[i - 1] - '0') ^ (int)(ans[i - k] - '0') + '0';
}
cout << ans;
return 0;
}
3.发工资O(n)
王大锤要给员工发工资，员工从左到右坐成一排，每一个员工知道彼此的资历，每一个员工只知道本身左右员工的工资，若是某员工比左边或右边的人资历老，那他必定比这我的工资高100元，每一个人最低工资100元，求王大锤最低给多少工资。
样例
输入： 4 //几个员工 3 9 2 7 //员工顺序以及对应的资历 输出： 600 //100元，200元，100元，200元 6 1 2 3 4 5 6 2100 //100，200，300，400，500，600 5 1 1 1 1 1 500 //100，100，100，100，100 8 1 2 3 4 3 2 3 4 1800 //100 200 300 400 200 100 200 300 8 3 4 3 4 3 4 3 4 1200 //100 200 100 200 100 200 100 200 5 1 2 3 4 1 1100 //100 200 300 400 500
思路（100/100分）：
广度优先搜索，能够把员工序列看做一棵多根树，每一个工资最低的员工就是根节点，一个员工的工资其实就是他在多根树里的深度，
首先在输入的时候找到比左右资历都年轻的员工入队，每次从队列pop一个员工，而后判断该员工的最小工资，而后判断左右员工是否能够入队，直到全部员工出队
int main() {
int n, now;
long long ans = 0;
cin >> n;
if (n == 0)
{
cout << 0 << endl;
return 0;
}
vector<int> epy(n, 0), depth(n, 0);
queue<int> sal;
for (int i = 0; i < n; i++)
{
cin >> epy[i];
if (i > 1 && epy[i - 1] <= epy[i - 2] && epy[i - 1] <= epy[i])
{
depth[i - 1] = 1;
sal.push(i - 1);
}
}
if (epy[0] <= epy[1])
{
depth[0] = 1;
sal.push(0);
}
if (epy[n - 1] <= epy[n - 2])
{
depth[n - 1] = 1;
sal.push(n - 1);
}
while (!sal.empty())
{
now = sal.front();
int left = (now > 0 && epy[now-1] < epy[now]) ? depth[now - 1] : 0;
int right = (now < n - 1 && epy[now + 1] < epy[now]) ? depth[now + 1] : 0;
sal.pop();
if (depth[now] == 0)
{
depth[now] = max(left, right) + 1;
}
//left
if (now > 0 && depth[now - 1] == 0 && (now == 1 || epy[now - 2] > epy[now - 1] || depth[now - 2] > 0))
{
sal.push(now - 1);
}
//right
if (now < n - 1 && (depth[now + 1] == 0) && (now == n - 2 || epy[now + 2] > epy[now + 1] || depth[now + 2] > 0))
{
sal.push(now + 1);
}
}
for (auto salary : depth) {
ans += salary;
}
cout << ans * 100 << endl;
}
附录3：个人简历
- 1. 如何快速拿到校招offer？
- 2. 2018前端校招总结（拿到网易,美团offer）
- 3. 大厂前端校招 - 知识体系
- 4. 我一个二本大学生是如何校招拿到阿里offer的
- 5. 我一个二本大学是如何校招拿到阿里offer的
- 6. 如何写好简历，拿到大厂 offer 的敲门砖
- 7. 我靠着这篇SpringMVC，拿到了各大厂的offer
- 8. 3年Java程序猿如何拿到大厂Offer（上篇）
- 9. 如何在疫情期间拿到大厂offer？
- 10. 面经 | 我是如何经过校招拿到京东的Offer的
- 更多相关文章...
- • XSD 如何使用? - XML Schema 教程
- • 如何伪造ARP响应？ - TCP/IP教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • JDK13 GA发布：5大特性解读
-
每一个你不满意的现在，都有一个你没有努力的曾经。