字节跳动秋招提前批广告系统前端一二三面经（已意向书）

介绍下我的情况，双非本科大三，六月投递抖音架构组，简历沉池子里，7.9接到hr小姐姐电话，问我要不要参加提前批，就开始了面试之路，此之前在杭州有赞实习。

作为秋招第一个面试的公司，虽然准备不是很充足，但还是到了HR面，感恩面试官高抬贵手呜呜呜，于是发个面经攒人品，希望HR面顺利，秋招上岸！！！

（来自一个阿里走完两个部门全流程然鹅都挂HR上的人，对HR面表示衷心的敬意TAT希望HR姐姐高抬贵手呜呜呜呜呜

意向书7.31

hr面后两天就意向书拉

字节跳动一面（7.22 60min）

• 登陆

  • 微信小程序登陆流程

    • 原理

    • SSO登陆

  • 单点登陆原理

    • 同个域下的单点登录

• CSS相关

  • 实现圆形环状进度条

    一个正方形div中分两个等宽div，设置overflow:hidden

    两个div中分别画两个半圆： border-top、border- left，再旋转-45deg

    通过旋转动画指定他们漏出来的角度

  • BEM命名法的用处

  • css module

    index.module.css

    将css类名进行hash

• 网络相关

  • TCP三次握手

    • 为什么是三次

  • TCP四次挥手

    • 为什么要等待两个msl

      msl：报文最大生存时间，也就是ttl寿命（可以经过几个路由跳转）

      client端接到第三次挥手的时候，client端不会马上CLOSED，而是等待两个msl再关闭。

      这是因为如果client端发送的第四次挥手server端没收到，server可能会重传第三次挥手的包，并且依旧在TIME_WAIT状态。

      这个时候如果client直接关闭请求的话，就会导致server端一直在重传；有了2MSL之后（也就是等一个来回），就可以接收到server端重传的挥手报文，重新进行第四次挥手

    • 为什么是两个msl，一个不可以吗

      因为server端检测到丢包就需要一个msl，还没等server端重传，client端就CLOSED了

  • SYN FLOOD攻击

    client向server发送SYN，server收到后回复ACK和SYN，此时server状态变为SYN——RCVD，这个连接进入半连接队列

    如果攻击服务器在短时间内发送大量的SYN给server，就可能出现以下两个问题

    1\. 大量连接在半连接队列里，队列被占满，可能导致无法处理其他请求 2\. 如果是不存在的IP，由于长时间收不到第三次握手ACK，可能会一直重传请求，知道耗尽资源

    防范：利用SYN COOKIE，如果SYN COOKIE不合法的时候，将关闭连接，不占用资源

• webpack

  • 打包优化知道哪些

  • loader和plugin的区别

  • 用过哪些loader和plugin

  • tree shaking原理

    依赖于ES6 module的静态编译

    • 纯函数： 相同输入相同输出，不依赖也不改变外部的环境

    • 副作用：可能对外界造成影响的就是有副作用的

    • 目前tree-shaking不能消除副作用，如果引入的模块引入了第三方依赖，但实际并没有使用，tree-shaking也无法感知

• vue

  • diff算法的流程

• 项目

  • html转pdf实现

  • sketch插件实现

  • 微应用

    • 实现思路

    • css隔离

      • css module/ namespace： 给类名添加前缀

      • shadow DOM：Element.attachShadow()

      • dynamic style： 动态删除节点,parentNode.removeChild

    • js隔离

      • node沙箱

        const vm = require('vm'); var result = vm.runInNewContext();

      • 闭包

编程题：

实现一个有并发限制的Promise.all

字节跳动二面（7.23 80min）

• node

  • node端的EventLoop？浏览器的EventLoop

    • node采用js v8作为解释器，v8解析完代码之后去调用node相关的api

    • Timer: setTimout

    • IO: 进行一些IO事件

    • Idle,prepare

    • poll: 先看poll队列有没有事件，没有，查看是否有setImmediate的cb或者到期的timer，如果有，就放到timer queue中；如果这两个都空，就会等一个IO事件返回

    • check：poll空闲的时候，进入这个阶段setImmediate

    • Close callbacks：socket.destory()当socket连接在这个阶段关闭，close回调在这个阶段执行

    • 因为在I/O事件的回调中，setImmediate方法的回调永远在timer的回调前执行。

    • nextTick在一个阶段执行完成之后优先执行

  • 用过什么框架？中间件是什么？有什么应用场景？

  • node和python之类的语言性能上有什么区别？// 多线程

• es6

  • Proxy

  • Reflect

  • let const

  • 读代码说结果

    async function call() {   return 1; }  async function fn() {   let a = call();   let b = await call();      console.log(a, b) // => ? }  fn();

  • 算法题： 有N级台阶，一次可以走一步或者两步，一共有几种走法（斐波那契数列）

  • 怎么学的前端？有什么职业规划？博客地址？

  • h5

    • 移动端自适应方案？

    • rem原理？rem和em区别

  • HTTP

    • HTTPS握手过程？ 对称加密非对称加密？

    • HTTP 2.0新特性

    • HTTP关于缓存的字段

  字节跳动三面（7.28 40min）

  • 自我介绍

  • 微前端是怎么实现的？技术栈无关是指？

  • 小程序的架构有了解过吗？为什么小程序要基于微信的壳做UI渲染？

  • 大文件切片怎么保证传输顺序？对切片进行内容hash的时候怎么保证效率？断点续传？

  • html转pdf，form转excel是怎么做的？

  • sketch插件的难点？webview和sketch通信？

  • vue和react源码看过哪些，说一说？

  三面内容完全根据我简历中项目经历来问，所以可能不太有参考意义

  字节的效率非常非常非常高，面完半小时内电话通知结果和约下一轮面试TAT想当年等阿里面试等了半个多月的我好感度爆棚。

  面试体验也非常好，在线coding我是很怂的，但是面试官会一步一步引导你去说出思路，也给了很多建议。

  现在别无所求，但求顺利offer！！！！

  大家有没有HR面面经什么的呀呜呜呜呜