抖音前端架构暑期实习面经

timeline

7.16投递

7.22一面

7.25二面

7.29三面

7.30HR面

7.31offer

由于实习的经历和面试岗位比较匹配，面经中针对实习项目的问题做了省略，只列出了一些常规问题

一面 1h

前30min聊实习项目

继续问项目，穿插问了一些八股

• message组件怎么挂载到屏幕上
• css 居中的几种方式
• 绝对定位会有哪些问题，导致绝对定位失败的原因有哪些
• vue Teleport
• react Suspense组件原理
• 了解的登录认证方式，token和session认证的优缺点
• 大文件断点续传
• 分片上传的content-type是什么
• 简答请求复杂请求，触发复杂请求的条件

算法：

• 括号匹配
• 给正数n,求1-n和为n的所有组合

二面 1h40min

全程结合项目和实习问

• pnpm 软链接和硬链接的区别
• pnpm 包的结构，三层寻址
• 什么是幽灵依赖，会引发什么问题
• package A和package B依赖一个包的不同版本，如何统一成一个版本
• pnpm hoist机制
• react合成事件，为什么不用浏览器原生事件，出发点是什么，或者出于什么考虑
• 文件上传，怎么做文件预览，文件在上传中预览可行吗
• 文件秒传怎么实现
• 一个10g的文件怎么分片，怎么确定合适的分片的大小，分片hash过程怎么优化
• webworker多线程可以避免阻塞，那为什么不把js所有的内容都放到webworker运行
• 假设你在百度网盘上传了一个文件，你的服务器可能存在不同的地区节点，假设你人在北京，北京节点肯定是最快的，但是你只有一个url或者一堆备选的url，但是你需要找到在你所处区域或者所处网络环境沟通最快的节点，这块怎么去做，怎么去找到一个响应最快的节点
• 第一段实习设计工具的开发，我想知道和figma或者其他同类型的工具之间的一些性能差距，我需要从那些方面或者说能够从那些方面去做一些策略
• webpack打包过程
• webpack如何处理不同类型的文件
• commonJs和esModule的区别
• treeShaking是什么，为什么一定要在esm才能生效，理论上ast语法树分析可以获取到import和require，不能基于这种方式treeShaking的原因
• 怎么优化webpack打包速度，缓存是怎么判断文件是否发送变化
• 组件库是怎么做的，需要关注哪些事项
• 了解storybook吗，为什么用vitepress搭建官网，做出一些决策的出发点是什么
• 有实现自动化测试的一些东西吗，如过让你去测试，要关注哪些方面
• 测试的方式一般有哪几种，了解过吗
• 组件库css的方案选择（scss），使用前有考虑其他比如less等其他方案吗，决策点是什么

手写

• 函数柯里化
• promise并发限制
• 根据一个modalProps实现一个modal组件,可以创建多个弹窗，考虑zIndex的情况

interface ModalProps{
    content: ReactNode,
    onCreate:()=>void,
    onCancel:()=>void,
    //...
}
const id = Modal.show()

Modal.close(id)

Modal.closeAll()

三面 1h30min

• 分片上传流程，后端怎么处理的
• 项目jwt鉴权怎么实现的，流程
• jwt的格式是什么样的
• jwt的加密算法是那种，加密信息会包含什么
• token是明文还是加密，我可以解密回来吗
• 从原理上说一下token怎么保障安全性的
• jwt服务端加密的key是一个什么key，是对称加密的key还是非对称加密的公钥或私钥
• jwt的签名是用来做什么的，怎么校验的，签名和加密的区别
• 签名用什么来签，公钥还是私钥，做签名生成和校验的公钥和私钥是放在哪的
• token可以被伪造吗
• cookie有哪些属性，csrf攻击怎么防范，token怎么存储，问了很多cookie安全相关的
• 了解其他登录的方案吗
• session是存储在服务器哪里的，假设我有abc三个服务器，那我可能登录是其中一个服务器吗
• 项目是基于什么背景下写的
• 讲解一下react的一些核心原理，以一个简单的计数器为例，讲一下挂载和更新的具体流程
• setState是怎么触发更新的

手写：

用熟悉的框架写一个slider组件（不用input实现）