首页 > 字节跳动前端面经大全
头像
posterus
编辑于 2020-07-30 11:33
+ 关注

字节跳动前端面经大全

hello大家好,这里是字节跳动国际化全组技术及格线的前端er,坐标字节跳动国际化,负责印度产品helo的开发,具体部门介绍可以看https://www.nowcoder.com/discuss/449040,如果想要投递我们部门的话可以投简历到我的邮箱jinjing.posterus@bytedance.com,定向直推国际化,部门直推就是比网投简历快,更方便的查询面试进度和投递情况~

一年一度的秋招又开始了,为了方便各位前端er能够更好的复习前端知识点、准备面试,以下整理了我个人和同组里其他同事当时面试本组的面经,供各位小伙伴查漏补缺,看面经犹如高考做真题,做多了就考上了(狗头
话不多说,开始放题
我个人(2020年3月)
一面:
  1. 讲项目和比赛,做了什么,哪些跟前端有关
  1. http 缓存机制
  1. cookie sessionStorage lcoaleStorage,cookie 是不是每一个都能读
  1. TCP 三路握手 四路挥手
  1. axois:axois.get().then().catch()
  1. promise all/race场景题
  1. 手撕串行 promise 请求
  1. 手撕图片加载调度器,给一个 urls 的数组和每次最多加载的数量,加载完加载剩下的序列:使用发布者 监听者机制/promise.race()=>使用 hashmap=>hashmap 中设置 key 的值的方法
  1. 手撕数组里总和等于目标值的连续数字和的所有序列
  1. CDN 加速,为什么用 CDN 加速
  1. DNS 缓存,DNS 请求顺序
  1. 负载均衡
  1. 有啥想问的,问了字节的 分享会频率,还问了刚刚自己的表现有哪些不好的地方可以提升。
二面:
  1. transition 动画:从一个地方移动到另外一个地方
  1. 写一个轮播图,不能用 img.src,会导致回流,性能很低
  1. 写一个简易 MVVM(拼错英文单词的除了我还能有谁)
  1. 实现数字转中文,比如 5555=>五千五百五十五(超级多坑,卡了很久很久很久还是没写出来)
  1. 项目里的 vuex 和 emit 怎么用的
  1. 项目里有没有遇到浮点数相加的问题,怎么解决
  1. 有没有啥要问的
三面:
  1. 自我介绍
  1. 询问各个项目技术难点
  1. vuex
  1. 跨域
  1. 同源策略
  1. 页面优化
  1. 用过哪些页面性能工具(lighthouse
  1. 从哪检测页面 fps 值(谷歌有一个插件,但是还是记不清了 orz
  1. 二叉树中序遍历(超简单,但是没有一遍 ac 我是真的菜
  1. 红蓝墨水各倒 1ml 问两瓶墨水中的红中蓝和蓝中红浓度
  1. webpack 怎么用的
  1. tree shaking
  1. 怎么实现的轮播图
  1. 讲一下 css3 动画
  1. 写一下原生 ajax
  1. 前端学习过程中有遇到什么挫败的事情想放弃前端吗
  1. 未来职业规划(学业/前端)
  1. 有啥要问的吗
hr面:
  1. 对前三轮面试感觉咋样
  1. 什么时候学的前端
  1. 学习路线
  1. 手里有 offer 吗,要不要去
  1. 为什么不考研
  1. 实习时间与就职时间
  1. 项目里印象最深刻的项目,为什么
  1. 实习的公司,干了什么,从实习到独立写功能用了多久
  1. 问一些项目里的工作
  1. 还有啥问题吗
“昨天还在考研,今天就来面试”的同事(2019年11月)
一面:
一面是交叉面, 一个超级有气质的小姐姐hhh, 瞬间对头条充满了憧憬。 一上来先做了一下自我介绍, balabalabala~
  1. 问题1: 签到题
  • Q: vue的双向绑定是怎么实现的?
  • A: 旧版本是defineProperty, 新版本是proxy。 defineProperty可以设置对象的一个属性的setter和getter, 以及是否冻结等等, 通过这样的方式来给赋值运算注入更多的操作, 比如触发更新事件。
  • 马后炮: 大概看过defineProperty的API, 目测是通过getter实现触发更新的, 更多细节还真没有看过代码。 还有proxy也没有研究。
  • Q: vue的生命周期?
  • A: 马马虎虎答上来了, 半年多没用vue, 忘了~
  1. 问题2: 真没想到会问这个
  • Q: 如何debug?
  • A: console.log打日志,但是一般效率比较低下。 然后主要是打断点。
  • Q: 怎么打断点排查?
  • A: 如果涉及网络请求, 要先排查是否是前端问题, 是否请求错误或者返回的数据格式不符合预期。 打断点的话有个二分打断点的思路很巧妙。 但其实主要是在整个页面的主逻辑打断点, 看进入各个外层的函数的参数 以及它们的返回值是否符合预期, 发现问题后进一步再看这个函数/调用栈内的细节。 这样一层层定位到问题。
  1. 问题3: 综合知识
  • Q: 知道网页从打开到展示的全过程吗?
  • A: 首先是DNS解析, 这个过程是先访问本地的DNS服务器, 如果有缓存会直接返回对应域名的ip地址, 如果没有缓存会先到对应的根DNS服务器, 比如.com的DNS服务器, 查询到对应的域名的DNS服务器, 这样迭代查询之后得到ip地址, 然后访问对应的端口, 如果没有写, 默认是80端口。 这时候服务器上的http服务器, 比如nginx,监听着这个端口, 接到请求后根据命中的host的规则, 一般会再转发给node.js的服务, 或者php等服务的端口去处理后端路由, 静态资源就可以直接返回了。 这里就根据路由规则去命中, 如果都没有命中一般会配置默认规则, 走到统一的404错误页。 到了具体的前端页面之后, 还会有前端路由, 类似的机制去渲染页面。 前端的head里的css、js会阻塞渲染, 然后渲染页面
  • 马后炮: 没有好好准备, 应该先讲整体的步骤, 再细说, 页面渲染的部分才是前端的重点, 反而也没有答好。 再补一下浏览器渲染的相关知识比较好。
  1. 问题4: 写道题
  • Q: 写一道数据结构题吧, 给一个二叉树和一个目标值, 写一个函数返回这个树中是否有一条路径等于目标值。 ()给的例子节点都是正值)
  • A: 路径的话就是从树根到任何一个结点了, 包括非叶子结点?  结点值会出现0或者负值吗?
  • Q: 不会。
  • A: 有些紧张, 不追求最优解了, 写了一个递归深搜然后剪枝, 递归调用返回true时返回ture, 否则返回false。 遍历到某个节点的时候路径值等于target就返回true, 这样逆着调用栈就会一直弹出true, 终止函数。 如果到底某个节点的路径值大于目标值, 则直接返回false剪枝, 不再往下搜索(太懒了, 代码略)。 大概写了15分钟, 差不多的时候面试官说了过。
  • 马后炮: 马马虎虎吧~ 太紧张了, 不过不追求最优解比较稳扎稳打, 不然可能由于太紧张答不出来。 边写代码边讲自己思路, 免得最后翻车面试官不知道你在干嘛。 自我感觉答的还行。
  1. 问题5: 问项目1 -> websocket
  • Q:说说南大马拉松做的那个项目吧。
  • A:大概类似雨课堂, 就是上课的时候学生可以签到, 老师可以在线提问题, 学生在线回答, 统计正确率等等。
  • Q: 有什么技术难点吗?
  • A: 用到了websocket。
  • Q: 为什么用websocket, 不用轮询?
  • A: 如果轮询间隔太短服务器压力会比较大, 如果轮询时间太长延迟比较高?
  • Q: 说说websocket和轮询的区别?
  • A: 轮询的话就是使用ajax, 每次都是一个基于TCP的HTTP请求, 需要三次握手, 传播时延和传输时延都比较长, 就算数据量很小, 带上TCP的请求头, HTTP的请求头, 数据报还是很长。 websoket的话大概四个套接就可以进行一次通信, 了解是否有数据更新。 (遍不下去了hhhh)
  • Q: balabalabala(知识盲区, 大概就是进一步问websocket的知识)?
  • A: 不了解, 我当时是马拉松的时候临时上网快速看了一下websocket的demo, 了解不深。 (战略放弃, 快点抄作业, 大神不用管, 什么都懂)
  • 马后炮: 做足准备哈朋友, 裸面不可取, 不熟悉的技术弱化一下甚至不提比较好。
  1. 问题6: 问项目2
  • Q: 这个财务系统的项目有什么难点?
  • A: 一张订单我们会有展示、编辑和新建几种行为, 我开发的时候为了减少复制粘贴, 将这三种都实现在一个页面组件里。
  • Q: 具体说说?
  • A: 每一行的数据增加一些虚拟参数, 比如id, 新建的时候用-1做常量, 编辑的时候已经从后端读到了数据, 有一个editable属性, 标识是否处于编辑状态。 然后视图上做相应的展现, 进入页面根据path生成一个局部变量action表示是新建还是编辑, 在提交的时候根据这些信息做不同的数据处理, 主要是每一行在提交的时候回去掉虚拟参数, 然后调用对应的接口等等。
  • 马后炮: 没准备好难点, 其实还有个表单配置化没说, 哭了。
  1. 轻松环节:
  • Q: 有什么想问我的吗?
  • A: 技术栈会有要求吗? 我看岗位描述上主要使用react。
  • Q: 这边有vue也有react的, 过来会有导师带你。
  • A: 实习多久可以转正?
  • Q: 40天后可以转正答辩。
二面:
一面背景还是一排排工位, 二年背景是面试间的白墙, 一上来就感觉比较有压力。 一面结束后休息了半个小时开始的二面, 有点点累。 惯例先自我介绍, balabala。
面试官:嗯? 你准备考研? (眼睛里放出了光芒), 然后开始虐我。
  1. 问题1: 网络知识
  • Q: 说一下慢启动和快重传?
  • A: 一开始是两倍两倍地增加传输的帧数, 发现拥塞后。 慢启动是一种保守的策略, 认为刚刚发生了拥塞, 就从指数增长改成了线性增长, 慢慢增加传输的帧数。 快重传是一种乐观的策略, balabale~
  • Q: 说一下RIP协议和ospf协议的区别?
  • A: RIP适用于小型网络,比较简单, OSPF适用于大型网络 , 内部又分为若干个自制系统~ (还回答了一两句, 记不清了)
  • Q: 我想知道他们的区别?
  • A: (开始胡诌) RIP是根据跳数来度量距离的, 没有考虑传输时延, 不太准确。  OSPF是利用Dijkstra(又百度了一下这个怎么拼有没有) 算法用时间作为度量的, 比较准确。 RIP追求精确,得到的是根据度量的最短路,但是遇到不可达网络的时候收敛会比较慢。 OSPF通过划分为一个个自治区域, 不追求最短路, 先大致得到一条路径, 收敛比较快。
  • ......此处省略两三个问题, 磕磕绊绊答了一些, 概念记不清, 不过都按自己的理解胡诌了一下。不过居然没有问TCP的三次握手四次挥手。
  • 马后炮: 当时答的应该更好一丢丢, 由于考研学了点, 虽然考研后期都在看数学~
  1. 问题2: 操作系统
  • Q: 说一下进程和线程的区别?
  • A: 线程是系统调度的最小单位, 进程是系统资源分配的最小单位。 同一个进程的线程可以共享内存资源, 不需要调度机调度, 不同的进程间的线程切换以及不同的线程切换需要调度机调度, 开销比较大。 线程的实现比进程灵活, 可以在操作系统内核实现也可以在编程语言层面实现。
  • Q: 怎么实现一个LRU算法?
  • A:(忘了怎么答的了, 应该还行
  1. 问题3: 再写个题
  • 忘了, 大概跟一面差不多难度, 比预想的轻松。
  1. 问题4: 来, 翻个车
  • Q: 知道防抖节流吗?
  • A: 不知道... 是指某个时间多少秒内只执行一次吗
  • 马后炮: 其实是知道的(强行狡辩, 在做游戏的时候类似的手法用的非常多~
  1. 问题5: 浏览器渲染 && JS基础
  • Q: 知道BFC吗?
  • A: 不知道。
  • Q: 知道重排和重绘吗?
  • A: 不知道。
  • Q: 说一下bind、call和apply。
  • A:  老经典题了, 原理就是利用的是闭包和arguments实现的。 此处省略基本实现。  附赠了, 现了call或者apply其中一个, 再封住一层就实现了另一个。
  • Q: 说一下typeof和instanceOf的区别?
  • A: 又是老经典题。 typeof返回的的是字符串, 对于数组会返回“Object”。 instanceof是在原型链上一层层往上查找 balabala
  • 马后炮: 前端知识确实不扎实, 让你二把刀前端~
  1. 问题6: 人生题?
  • Q: 为什么选前端?
  • A: 有了解过Java, Java的swing和awt做UI很蛋疼, 布局能力太差。 后来用python的pyqt写UI的时候, 它也实现了一套类似CSS的机制, 远远不如CSS强大。 特别是现在的electron这么强大,  github的客户端、atom、vscode、cocos creator都是用它写的, 对比之下前端确实很强。 还有TS和JS混写, 非常舒服, 底层的一些兼容处理之类的可以用js来写, 上层逻辑用TS来写, TS的类型推断、自动向上转型等等。 强类型和弱类型结合起来, 体验非常好。balabala, 还有说学的PHP, 现在大厂都不用了, 算法转后端怕简历投不进的现实~
  1. 轻松一下
  • Q: 有什么想问的吗?
  • A: 我答的还行吗, 能进入下一轮吗(慌了慌了) 是不是前端基础部分比较差, 网络之类的还可以。
  • Q: 对自己定位还挺准确的, 我觉得还不错, 你说的挺有意思。
三面:
听说三面都是leader, 非常紧张, 特别害怕像阿里那种压力面。 还好leader看起来很随和。 先自我介绍, 都会背了hhh
  1. 问题1: promise
  • Q: 知道promise吗
  • A: 忘了怎么答的了, 马马虎虎。
  • Q: 来, 写个题, 我现在一张图用很多CDN, 怎么知道哪个先加载完成(大概是类似的问题 ,具体忘了)
  • A: 一直听不懂image是什么, 哑巴英语吃亏了。 promise用的不熟, 用回调混过这道题了。
  • 马后炮: 平时只是简单地使用promise的all之类功能, 没有深究。 在《深入浅出node.js》这本书里对这个非常详细的介绍, 不过当时没有太关注。
  1. 问题2: cookie
  • Q: 知道cookie、session和localstorage吗?
  • A: 常规回答, 具体忘了, balabala, 马马虎虎。
  • Q: cookie有哪些字段?
  • A: cookie作为一个字符串存储, 要自己实现一个kv的机制, 我一般用cookiejs这个库, 然后cookie有过期时间等等。
  • Q: 知道cookie的samesite字段吗?
  • A: 不知道。
到这里其实很慌了, 感觉要凉了, 还好后半段还行。
  1. 问题3: 安全问题
  • Q: 知道CSRF吗?
  • A: 知道, 这个是为了防止绕过页面, 直接像我们的服务端发送接口的一种防御机制。 它是生成一个token存储在后端, 然后我们打开一个表单页的时候这个token会放在表单里作为一个隐藏的字段或者请求的header, 提交的时候带过去, 这样就知道这个请求是从我们的页面来的, 而不是跳过我们的页面直接发过来的请求。
  • Q: 还知道什么安全的问题?
  • A: XSS攻击和SQL注入
  • Q: 具体说说?
  • A: XSS攻击是指向我们页面直接注入一段javascript脚本, 然后别的用户访问的时候就会被攻击到。 SQL注入是指一些请求比如直接在GET写的参数, 后端进行sql查询的时候直接拼接sql语句, 导致的安全漏洞, 比如在参数里写一个or 1 = 1。不过现在的JAVA的JDBC和PHP的PDO之类的都自带了防御。
  • Q: XSS攻击再具体说说怎么攻击的, 怎么防御的,举个例子?
  • A: 比如一个留言板, 如果我们没有对HTML标签进行过滤, 用户可以插入js脚本。其他用户访问这个页面的时候就会直接执行JS标本。 这个脚本可能是把页面上的一些信息直接发送出去, 泄漏用户隐私。 更危险的是如果我们没有验证码和CSRF的机制, 这个脚本直接帮用户发请求修改密码等等。
  • Q: 就只是过滤HTML标签吗?
  • A: 想不到别的了。
  1. 问题4: 场景题, 设计支持多来源的搜索框, 这道题会透题~慎重
  • Q: 实现一个搜索框, 类似百度那种, 要考虑什么问题?
  • A: 首先要有缓存机制, 用户可能输入四个字再删掉两个字这种会重复搜索, 加个缓存机制减少服务器的压力。 其次是要节流, 停止输入一定间隔才会触发自动的去获取相关的搜索词。 然后是数据的转换, 比如空格隔开关键词和使用+隔开, 这种是一样的, 要做数据的反序列换, 转换成后端容易处理的数据, 比如数组, 当然常见的数据处理还有去掉首尾空格之类的。
  • Q:要支持从不同的来源搜索, 这些来源的数据格式也不同? 怎么设计?
  • A: 首先有一个服务注册的概念, 每一个来源是一个服务, 它有服务id, 请求的url等一些信息, 最主要的是有一个parse函数, 输入是获取到的原始数据, 返回的值是经过转换的, 我们搜索页面能识别的最终格式, 这样把不同来源数据转换过来。 然后注册的服务会存储在一个数组中, 主逻辑就读出这些服务, 去生成界面, 主逻辑大概这样balabala 写了点代码表示。
  1. 问题5: 项目1
  • Q: 财务系统的难点在哪?
  • A: ~又回答了一次。
  1. 问题6: 项目2
  • Q: 二手交易那个项目?
  • A: 那个技术栈比较老。
  • Q: 哪个项目比较复杂?
  • A: 游戏引擎和塔防游戏吧。 游戏引擎的话要实现动画系统、精灵系统之类的,当时看了cocos-js和erget的源码 用到很多设计模式, 解决一些浏览器兼容性问题。 比如有的浏览器不支持暂停播放的api, 只能通过记录上次暂停的时间节点, 通过停止再重新播放模拟暂停, 封住后屏蔽底层的兼容,给上层调用。塔防游戏也是, 用到享元模式、有限状态机之类的。
  • Q: 说说有限状态机吧, 哪里用到了?
  • A: 主要是怪物的状态, 有等待中、发现目标的行进中和攻击中这几种状态。 有限状态机主要就是定义进入状态 、 更新 、 离开状态的一些操作。
  • Q: 写一下有限状态机的实现。
  • A: 大概写了十多分钟, 还实现了钩子函数, 每个状态机的子类在对应阶段会自动调用父类钩子函数, 可以封住一些公共行为。
  • Q: 说一下怪物的状态, 这个状态流转是一定要遵循一定的次序还是可以任意切换?
  • A: 不能任意切换。 必须按照一定的次序, 这样每一个状态的前一个和后一个就确定了, 实现的时候不容易出现bug, 否则状态越多, 排列组合有非常多的可能。 比如需要从等待状态切换到攻击中, 其实可以在同一帧里完成等待->行进中, 下一桢进入攻击中, 这样在玩家看来是直接从等待中到了攻击中, 游戏逻辑没有影响, 代码逻辑更健壮。
  1. 轻松一下
  • Q:  为什么做前端?
  • A: 省略了前端和 java GUI、python GUI的对比, 直接说了PHP就业前景, 前端的前景等等。
  • Q: 有什么想问我的吗?
  • A:  如何成为一个合格的前端工程师。 然后成为一个优秀的前端工程师呢?
  • Q: 这个问题有点大,来了之后问你导师吧。 加个微信吧, 有别的问题也可以问我。
  • A: (愣头青提问 ),  我通过了吗, 如果没有通过多久能知道结果呢?
  • Q: 现在不能告诉你, 不过我都暗示的这么明显了...
  • A: 谢谢~
后记
有点点愣头青, 不过应届生嘛, 也不能表现的太圆滑。 当晚开始上知乎研究和HR谈薪的技巧, 不过校招安排的明明白白, 白白和空气斗智斗勇。
总体不是很难, 面试官都很nice, 主要是自己前端基础不太扎实, 有些很简单的问题被卡住就比较有压力。 后续还是先专注前端的学习。
“明明可以靠脸吃饭,却选择靠实力”的同事R(2019年9月)
帅哥只记了自己当时没做出来的题,所以题目比较少qaq
一面:
webpack 按需加载
通过import()异步引入
二面:
CommonJS 和 ES6 Module的区别
CommonJS 是被加载时运行,ESModule是编译时运行。
CommonJS 输出的是值的浅拷贝,ESModule输出值的引用
CommonJS 加载的是整个模块,ESModule可以单独加载其中的某个接口。
CommonJS this指向当前模块,ESModule this指向undefined
三面:
封装一个带超时处理的fetch请求
虽然大体知道要用Promise.race()来处理,但因为之前没用过fetch,所以脑袋突然麻痹,只能支支吾吾写一些片段。
考点:Promise.race()
Promise.race(iterable) 方法返回一个 Promise 实例,一旦迭代器中的某个promise解决或拒绝,返回的 promise就会解决或拒绝。
class NetUtil extends Component{
    static baseUrl = 'https://api.xxx.com/'
    static token = ''

    static fetch_request = function(url, method, params = ''){
        let header = {
            'Accpet': 'application/json',
            'Content-Type': 'application/json;charset=UTF-8',
            'accesstoken': NetUtil.token
        }

        static fetch_request = function(){
            let promise = null
            // 定义主要请求promise
            promise = new Promise((resovle, reject)=>{
                fetch(NetUtil.baseUrl+url, {method:method, header:header, params:params})
                .then(responds => responds.json())
                .then(res => resolve(res))
            })

            return NetUtil.warp_fetch(promise)
        }

        static warp_fetch(fetch_promise, timeout = 10000){
            let timeout_fn = null
            // 定义超时promise
            let timeout_promise = new Promise((resolve, reject) => {
                timeout_fn = function(){
                    reject('超时')
                }
            })

            // 计时
            setTimeout(timeout_fn,timeout)
            // 竞赛
            let wrap_promise = Promise.race([fetch_promise, timeout_promise])

            return wrap_promise
        }
    }

}

export default NetUtil

引申:Promise.all()
Promise.all(iterable) 方法返回一个 Promise 实例, 此实例在 iterable 参数内所有的 promise 都完成(resolve)或参数不含 promise 时回调完成(resolve);如果参数有一个promise失败(reject),此实例回调失败(reject)。
实现:
Promise._all() = (promises) => new Promise((resolve,reject) => {
    let count = 0;
    let values = []

    promises.forEach((promise, index) => {
        Promise.resolve(promise).then((data)=>{
            values[index] = data
            if(++count === promises.length){
                resolve(values)
            }
        },(err)=>{
            reject(err)
            return
        })
    })
})

引申: 实现promise.race()
Promise._race = (promises) => new Promise((resolve, reject)=>{
    promises.forEach(promise => {
        promise.then(resolve,reject)
    })
})
谈谈Vue diff算法的优势
  1. 同层比较
  1. 两端比较
如何解决1px细线问题

“从视频云转岗来的xgplayer精通选手”
一面:
  1. 栈跟对列的区别?给两个数组,手搓出几种不同的队列
  1. 栈跟堆的区别?
  1. HTML Collection, NodeList 区别?
  1. bind的参数有哪些,手搓bind如何进行原生设计?
  1. 手搓快排的实现,及各种如何优化策略,方法有哪些?
  1. localstorage如何做到不同标签页下的共享? 这个纠结半天,不是都是共享的吗?结果是要进行事件监听的,而且safria 隐身模式下,localstorage是被禁止的,相关操作直接报错。当时给忘记了
  1. 小程序的http封装?
  1. 进程间的通信?方法有哪些?
  1. css 选择器的优先级,(继承和属性的优先级给忘记了)
  1. splice,split,slice的区别?
  1. 0.1+ 0.2 问题
  1. js里面的数值 number如何进行存储,大小是多少,4byte如何分配的
  1. this指向问题,闭包中this的指向问题
  1. 小程序中数据渲染绑定的机制? 双向绑定原理?
  1. 其他的还有很多拓展深度及广度的问题有些忘记了(这里也聊了很多)
  1. 向面试官问些想问的问题 , 等结果(十分钟后HR小姐姐打电话说下接下来二面的时间问题)一面视频面试共一个半小时
二面
  1. 简单介绍自己
  1. 说说自己做过的项目
  1. 关于我第一个项目开发的流程及难点
  1. 将到http协议,http1.0,http1.1,http2.0之间的区别
  1. http中自己常见的状态码,说完200,301,302,307,400,403,404,500,503等等
将304忘记了,等面试官问到缓存,猛然醒悟,这是又来协商缓存的,讲下协商缓存与强缓存的区别。
  1. 聊到跨域问题,解决跨域的几种方法,说到 jsonp,然后手搓代码封装一个jsonp出来;
又让我讲下跨域资源共享(CORS),如何设计及处理
  1. css盒模型的相关知识
  1. prototype原型的相关问题,以及“proto”的指向等问题,原型链的相关知识
  1. 手搓双向绑定的封装实现,比如在input输入框中输入值在地下p标签内实时进行显示更新。
  1. promise的相关问题,当多条异步请求进行时,如何在所有异步请求完成后,再进行其他的同步的任务?有没有相关的api可以实现呢?第一个想到的就是事件监听,但如何监听呢,感觉没有具体场景很做,然后就说了promise.all(p1,p2,p3)可以处理多个请求,然后不同情况返回的值是什么,差点把自己给绕坑里去。
  1. 一个还比较简单算法题(果然头条每次都会考算法,差点翻车) ,如题: A和B玩抛硬币,A和B轮流抛一枚硬币,谁先抛到正面谁就获胜并结束游戏,硬币两面均匀。A先抛,请问A获胜的概率是多少? (哇,1/2吗?哈哈哈哈,仔细看看坑还是有的,有点像高中的求概率分布问题?)
  1. 手搓实现 css 一个自适应搜索框,输入框部分宽度自适应,搜索按钮宽度固定;
  1. 当时用的是双飞翼圣杯布局来实现的,原理一样;之后面试官问有没有其他方法,就又用了 flex布局
  1. 又是算法,手搓实现 给定字符串,统计字符串中出现最多的字母和次数,给出部分模板代码,自己手搓进行实现
  1. 其他问题也有些忘记了,扩展交流比较多,以及项目中遇到的坑
  1. 结束,向面试官问些想问的问题,等结果(一小时左右leader的三面就来了)二面视频面试2个小时左右
三面
  1. 简单的自我介绍;
  1. 介绍自己的项目;
  1. 自己在项目开发中遇到的挑战都是那些?
  1. 如何进行的前端学习?
  1. 你印象最深的文章都是那些?
  1. 从0到1整个web开发,如果你来负责,你会怎么做?感觉这个问题真的很有深度,我大概先分析这个web 站点的类型,根据不同的复杂程度或者仅仅管理员的后台界面,选择不同策略,之后从技术选型开始,比如react相关生态,Vue相关生态,后台UI组件的选择,css预处理器的选择less or sass等等,
然后考虑是否自己搭建架构,还是省事用官方的Cli脚手架工具。
搭建基本的架构,比如http的封装,css样式的统一,比如淘宝官方的统一样式库都可以进行借鉴和二次开发,然后,基本小组件的封装,比如弹框,按钮,loding状态等等可复用性的组件
之后就是开始协调项目团队进行任务分配,进行相关的工具进行项目管理,使用git进行版本控制,协调组员的分离配合开发,避免重复性工作或者冲突。大概聊到差不多后,leader说了句,你忘了性能啊?
然后我就谈下如何进行性能优化,
1.减少http请求
2.对相关的静态资源比如img,svg等放在服务端,或cdn上面.
3.对图片进行懒加载
4.减少DOM操作
5.避免更多的重绘或回流
6.进行代码压缩等等
  1. 你实习的目标是什么?
  1. 你每周上班时间能有多久?
  1. 一定要有创新能力,很重要
  1. 让你学习React 你能在多久时间内能上手开发?(当时没怎么用过react)
  1. 其他的问题也忘记了,一些学校与公司实习的问题
  1. 整个过程语速比较快,丝毫不拖泥带水
  1. 问我有什么想问的问题?大概聊聊业务处理跟学习时间的平衡。
头条四面(HR)
HR也问了很多相关项目的问题,个人学习,性格,优缺点?什么其他的很多很多,感觉很nice,也很随缘。三观一般都没啥问题吧!

最后的最后
其实字节跳动对于校招的同学的前端方面要求并不高(甚至前端0基础也可以尝试),更多的是要求基础扎实编码能力ok,比如操作系统(会被很多人忽略的一部分,需要了解一下物理内存/虚拟内存、页面调度算法等)、计算机网络数据结构这样的专业课程都会有一定的考察,前端部分对于计算机网络(dns解析、tcp/udp协议、http/https、滑动窗口、慢启动等知识)可能考察更多一些,也需要了解一下基础的数据结构(二叉树、栈、队列、链表)和基础算法题
祝大家都能拿到自己想要的offer呀~


全部评论

(0) 回帖
加载中...
话题 回帖

推荐话题

相关热帖

近期精华帖

热门推荐