飞书
一面 1
- 自我介绍
- 问你最擅长的技术栈是什么 Vue
- 根据简历，问你做项目的整个流程
- 项目中遇到的问题，以及解决方法
- 网页性能优化
- 浏览器的循环机制
- Vue2.0 添加属性的方法，$set，添加后页面会立即更新吗
- Vue2.0 响应式的原理
- Vue2.0 和 Vue3.0 的区别
- 实现 new 方法（手写代码）
- 实现深拷贝（手写代码）
- 给定两个版本号，比较大小（手写代码）
- v1=2.0 v2=1.0 输出 1
- v1=2.0 v2=1.0.1 输出 1
- v1=2.0 v2=3.0 输出-1
- v1=2.001.1 v2=2.01.1 输出 0
- v1=2.0 v2=2.0 输出 0
- v1=2.0 v2=2.0.0 输出 0
js
function compareVersion(v1, v2) {
// 分割版本号字符串为数组
let arr1 = v1.split(".");
let arr2 = v2.split(".");
// 获取最长长度，用于循环比较
let maxLength = Math.max(arr1.length, arr2.length);
for (let i = 0; i < maxLength; i++) {
// 将当前段转换为整数进行比较
let num1 = parseInt(arr1[i] || "0", 10);
let num2 = parseInt(arr2[i] || "0", 10);
// 如果num1大于num2，则返回1
if (num1 > num2) {
return 1;
}
// 如果num1小于num2，则返回-1
else if (num1 < num2) {
return -1;
}
}
// 所有段都相等时，返回0表示两者相等
return 0;
}一面 2
- var、let、const 的区别；
- 谈谈 promise？异步编程；为什么要异步或是要 promise？
- 谈到 axios 时，问了下 axios 怎么实现的，与 ajax 及 fetch 的区别？
- 给一段代码输出返回值？settimeout\promise\ascny 相关；
- tcp 四次握手?
- css 动画旋转相关问题？
- 写个点赞延时执行的函数，给定参数延迟时间及 callback？
一面 3
- 讲一讲微前端有哪些实现策略
- 讲一讲你之前的项目采取了哪些安全策略？ 讲一讲 XSS 攻击和 CSRF 攻击
- 实现三栏布局, 用 float + BFC 和 flex 两种方式
- 实现单行文本在父元素中不换行, 溢出部分变成省略号形式
- 防抖, 节流的定义及二者区别， 手写防抖的实现
- 讲一讲浏览器缓存机制， 涉及到哪些 http 报文字段？
- 讲一讲 js 事件循环机制， 列举宏任务, 微任务有哪些？看代码说结果
- 算法： 给定一个字符串, 里面只有 a, b, c 三种字符， 要求从头遍历到尾， 去掉所有的 b, 和所有的 ac
js
function removeChars(str) {
let result = "";
for (let i = 0; i < str.length; i++) {
if (
str[i] !== "b" &&
!(str[i] === "a" && i + 1 < str.length && str[i + 1] === "c")
) {
result += str[i];
} else if (str[i] === "a" && i + 1 < str.length && str[i + 1] === "c") {
i++; // 跳过下一个字符，因为它是和当前'a'组成'ac'
}
}
return result;
}一面 4
- 项目难点【描述】
- 如何设计权限系统，如何维护和定义、表的数据结构是怎样的【举例】【描述】
- 中间人劫持，怎么防止。x-frame-option? 白屏怎么办？也不一定嵌入 iframe 啊，可以嵌入脚本、图片，怎么阻止
- class 组件和 function 组件对比。写过安卓吗，那对 class 组件有什么看法【描述】
- hook 缺点，hook 代码难维护怎么解决【描述】
- redux 为什么每次 reducer 要返回一个新对象，面对大量节点如何优化【
- immuatable 和 shouldupdate 配合、immuatable 数据一些对比问题【描述】
- http 缓存、离线包原理、移动端首屏幕加载速度优化、webview 冷启动、预热【描述】
- 一个很牛逼很多功能的 class 组件，里面有业务生命周期（获取数据前后、弹出窗口前后...），怎么在函数组件里面直接复用它【举例】
- 给定一个整数数组 a，其中 1 ≤ a[i] ≤ n （n 为数组长度）, 其中有些元素出现两次而其他元素出现一次。【编程】
- 找到所有出现两次的元素。你可以不用到任何额外空间并在 O(n)时间复杂度内解决这个问题吗？
一面 5
字节校招
- 自我介绍
- 前端学习路线
- 项目中遇到的难点
- token 登录怎么实现的
- 我想关闭浏览器后还能保持登录状态怎么实现
- 还有其它的登录方法吗
- Vue 路由中我想用前进和后退怎么实现
- 项目用的什么类型路由模式
- hash 模式怎么实现前进和后退
- Vue 为什么要有虚拟 DOM？好处和工作流程？
- 如果我计算属性有三个值计算了三次，那页面渲染了几次？
- 那如果我又加了一个异步数据呢？
- Vue 从 DOM 树建立完成到页面上呈现做了哪些工作？
- Vue 的渲染机制能详细说一下吗？
- 都说标签里面要加 key，你知道为什么吗？
- 那 for 和 if 里面加 key 效果一样吗？
- 说一下闭包。
- 闭包用在什么场景
- 重排和重绘的概念，如何可以减少？
- http2.0 相比 http1.0 多了哪些特性？
- 为什么可以多路复用？队头阻塞了解吗？
- http1.0 是怎么做的？
- 浏览器为什么只能建立 6 个连接？
- 那为什么 XXX（一个不知道的概念）允许让浏览器可以建立多个连接，不是不好吗？
- 浏览器的渲染线程是怎么工作的？
- 浏览器渲染线程和 js 线程冲突吗？是一起同时工作的？
- 一个浏览器只能有一个进程吗？
- 有没有遇到过看项目文档不懂的时候，怎么解决的？
- 代码题：写输出结果。
- 代码题：异步实现加法
二面 1
- cdn 原理【描述】
- 为什么多域名部署【描述】
- 单元测试、e2e 测试【描述】
- event loop【描述】
- 项目介绍一下【描述】
- 客户端 mock 怎么支持【描述】【举例】
- 怎么 mock 真数据，我需要真的 id 怎么办，除了写死【描述】
- 什么情况用 ts、什么时候不用【描述】
- 组件、库一定要，不重要的业务代码、节奏快的业务代码不用
- 单元测试和 ts 结合【描述】【举例】
- 全球远程调度机器实现自动化测试【描述】
- cjs 实现 esm【伪代码】
三面 1
- 你之前的部门用的微前端什么方案
- 讲讲 js 原型链， 手写用 Object.create()实现继承的代码
- Webpack 打包原理； 你都知道哪些 plugin， 讲讲常见的 plugin 的功能和原理；
- 问了一堆 babel 的配置，完全听不懂...
- 除了 Webpack 你还接触过哪些前端打包工具？ 讲讲 Webpack， rollup， vite 三者的区别
- 你们的项目是怎么解决样式隔离问题的？ CSS Module 还是 CSS in JS 你说你之前的项目用的 CSS Module, 那它有哪些缺点? 你使用:global(), 在微前端中如何做到样式隔离?
- 每个微前端子工程加一个 babel-plugin-react-css-modules, 打包时给该子工程内所有 class 名前面加上该子工程标识
- 你使用 :global() 去定义 antd 底层 class，如果 antd 版本更新， 底层 class 名变了，你怎么办？除了手动修改代码好像是没办法
- 讲讲 mobx 原理， 用的什么设计模式
- 讲讲 vuex 和 mobx 区别？ 讲讲单例模式， 观察者模式和发布-订阅模式 de
- 自己动手实现一个 js 单例模式
- 闭包 + 立即执行函数, 或者将变量绑定在全局作用域
- 讲讲什么是闭包
- ts 里 type 和 interface 的区别以及使用场景
- ts 的泛型接触过吗？ 泛型主要为了解决什么问题
- Node.js 相对于原生 js 有哪些区别？
- 列举你知道的前端优化方案， 讲讲 React 的异步加载和懒引入原理
- 你刚才说到避免浏览器重排 如何获取某个 DOM 节点的位置？ 用 clientTop 和 clinetLeft 为什么会导致浏览器重排？
- 你刚才说优化方案里讲到避免内存泄露， 说说如何排查内存泄漏？ 火焰图接触过吗
- 讲讲前端工程化主要涉及哪些内容
- 你刚才提到规范化 那你讲讲你们项目的 git 提交规范吧
三面 2
- 项目介绍。权限系统业界内怎么设计，常见的几种【描述】
- 工作量体现到什么地方，现在工作量大吗【描述】
- 最困难的环节【举例】
- 优点缺点、未来规划
- 怕被人挑战吗，怎么应对