【前端校招面经】【三面高能】字节飞书前端一二三面凉经
技术栈: react + ts + electron
base: 帝都
09.22 一面
- 自我介绍， 讲一下之前实习的项目
- 讲一讲微前端有哪些实现策略
- 讲一讲你之前的项目采取了哪些安全策略？ 讲一讲 XSS 攻击和 CSRF 攻击
- 实现
三栏布局, 用float + BFC和flex两种方式 - 实现单行文本在父元素中不换行, 溢出部分变成省略号形式
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
防抖, 节流的定义及二者区别， 手写防抖的实现- 讲一讲
浏览器缓存机制， 涉及到哪些 http 报文字段？ - 讲一讲 js
事件循环机制， 列举宏任务, 微任务有哪些？看代码说结果 - 算法： 给定一个字符串, 里面只有
a,b,c三种字符， 要求从头遍历到尾， 去掉所有的b, 和所有的ac
时间久远， 我只记得这些题目， 一面时间比较短， 总共只有 37 分钟就结束了。
09.24 二面
讲一下之前实习的项目
讲一讲微前端有哪几种实现策略？ 你之前实习的项目用的是什么策略？ 讲讲
monorepo是什么用
<iframe>实现微前端， 有什么缺陷？ 路由和样式受到限制， 不能正常使用浏览器的后退/前进按钮， 那你们的项目是如何解决这一点的？ 答： 我们之前的项目是在微前端落地页又重新实现了一遍 Tab 组件， 进入一个微前端子工程， 就在页面上新增一个重新实现的 Tab 页， 用户通过切换 Tab 页的方式就不用点击后退／前进了．相当于多挂载一个 iframe， 因此性能开销很大， 我们之前的项目限制同时最多打开 10 个 Tab 页。 问： 你们之前的项目为什么这么做？ 理由是什么？是一开始就定下来这样做的吗？ 答： 不知道...一开始就是这么定的补充:
<iframe>元素本身的优缺点:
优点: 可解决加载缓慢的第三方内容, 如页面上的图标, 广告等; 可并行加载脚本; 可利用自定义 sandbox 安全沙箱属性值控制其脚本执行, 获取本地存储, 跨域, 控制父元素 DOM 等行为, 更加安全;
缺点: 阻塞onload事件;<iframe>元素无语义; 加载<iframe>元素需要时间, 即使内容为空.
qiankun 为什么不用 iframe
garfish 为什么不用 iframe（前三个问题问了半个小时）讲一讲跨域的原理， 为什么要跨域，常见的跨域实现方式， 手写
JSONP实现问一个
react hooks题目， 假如有一个这样的组件：
import { FC, useState, useEffect } from 'react';
import { fetchCount } from './service';
const Demo: FC = () => {
const [count, setCount] = useState(0);
// 组件初始化时执行该函数， 向后端请求 count 的初始值
const init = async () => {
const value = await fetchCount();
setCount(value);
}
useEffect(() => {
init();
}, []);
// return ...;
} 现已知上述代码不安全， 如果第 5 行执行时间过长， 在第 5 行阻塞时， 页面被用户手动关闭了， 再执行第 6 行时会报 warning， 请问如何改造代码， 使setCount变得安全？
用
useRef记录组件的生存状态， 在 useEffect 当中写 return 函数， 组件卸载时将 useRef 记录的状态转为 false
- 手撕代码： 实现一个
get(0).add(1).sub(2).mul(3)， 返回 -3; 我用 ts 定义包装类写的 - 算法： 一个给字符串部分去重的题目, 具体要求忘记了, 不过在牛客其他面经看到过
二面同样因为时间久远记不清几道题了。
09.26 三面（高能）
- 自我介绍， 介绍在之前的实习里做过什么
- 你之前的部门用的微前端什么方案（和二面一样的问题）
- 讲讲 js 原型链， 手写用
Object.create()实现继承的代码（不是直接实现继承， 而是实现一个继承功能的函数， 因此绕了个弯）
function Parent(data) {
this.data = data;
}
Parent.prototype.foo = function() {
console.log(this.data);
}
function inherit(Foo) {
// write code here, return Child class constructor
}
var child = new (inherit(Parent))(123);
child.foo(); // -> 123 答案:
function inherit(Foo) {
var Child = function (data) {
Parent.call(this, data);
};
Child.prototype = Object.create(Foo.prototype);
return Child;
} - 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 提交规范吧
#面经##前端##字节跳动#三面持续了一小时 20 分, 没问算法, 但也把我问崩溃了
第二天内推的小哥哥告诉我三面挂了, 卒, 再过了 2 天短信收到了感谢信
我后来问 HR 小姐姐可不可以转实习, 部门还有实习坑位吗, 也被无情拒绝了
不过本人之前有过字节 5 个月的实习经历, 因此上面的问题不具有代表性
