今天给大家带来一篇字节飞书的校招面经。

一面

• 什么是微前端
• 讲一讲你之前的项目中的安全策略？
• 讲一讲 XSS攻击和 CSRF攻击
• 实现三栏布局, 用float + BFC和flex两种方式
• 单行文本不换行, 溢出部分变成省略号形式
• 防抖和节流
• 讲一讲浏览器缓存机制， 涉及到哪些 http 报文字段？
• 讲一讲 JS事件循环， 列举宏任务, 微任务有哪些？看代码说结果
• 算法：给定一个字符串, 里面只有a, b, c三种字符， 要求从头遍历到尾， 去掉所有的 b, 和所有的 ac

二面

• 讲一下之前实习的项目
• 讲一讲微前端几种实现策略？你之前实习的项目用的是什么策略？讲讲 monorepo 是什么
• 用 <iframe> 实现微前端， 有什么缺陷？
• 什么是跨域为什么要跨域，常见的跨域实现方式
• 手写JSONP实现
• 问一个react hooks题目， 假如有一个这样的组件，现已知上述代码不安全， 如果第 5 行执行时间过长， 在第 5 行阻塞时， 页面被用户手动关闭了， 再执行第 6 行时会报 warning， 请问如何改造代码， 使setCount变得安全？

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 ...;
}

• 手撕代码：实现一个 get(0).add(1).sub(2).mul(3)， 返回 -3; 我用 ts 定义包装类写的

三面

• 微前端
• 讲讲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

• webpack打包原理；
• 你都知道哪些plugin， 讲讲常见的plugin的功能和原理；
• 除了 Webpack 你还接触过哪些前端打包工具？讲讲 Webpack， rollup， vite 三者的区别
• 你们的项目是怎么解决样式隔离的？CSS Module 还是 CSS in JS
• 你说你之前的项目用的 CSS Module, 那它有哪些缺点? 你使用:global(), 在微前端中如何做到样式隔离?
• 讲讲 mobx原理， 用的什么设计模式
• 讲讲 vuex 和 mobx 区别？或者说， 讲讲单例模式， 观察者模式和订阅-发布模式
• 自己动手实现一个JS单例模式
• 讲讲什么是闭包
• ts 里 type和interface区别以及使用场景
• TS里泛型是什么
• node.js 相对于原生 js 有哪些区别？
• 列举你知道的前端性能优化方案， 讲讲 React 的异步加载和懒引入原理
• 你刚才说到避免浏览器重排，那么如何获取某个 DOM 节点的位置？用 clientTop 和 clinetLeft 为什么会导致浏览器重排？
• 你刚才说优化方案里讲到避免内存泄露， 说说如何排查内存泄漏？火焰图接触过吗
• 讲讲前端工程化主要涉及哪些内容
• 你刚才提到规范化，那你讲讲你们项目的 git 提交规范

面试官点评

这篇面试，题目的广度和深度都考察到位了，不仅有基础的CSS、JavaScript考察，也包括具体项目开发涉及到的react、微前端等，甚至对前端工程化、规范等也有问到，另外还涉及到了内存泄露和性能优化；相比之下，算法题算是比较常规的题目了。

候选人应该是有类似的技术栈或者项目经历，还是那句话，只要是写进简历里或者会说出来的，一定要把相关的技术点都吃透，只有这样才不怕面试官深挖。

最后

《前端面试题宝典》经过近一年的迭代，现已推出 小程序 和 电脑版刷题网站 （https://fe.ecool.fun/），欢迎大家使用~

同时，我们还推出了面试辅导的增值服务，可以为大家提供 “简历指导” 和 “模拟面试” 服务，感兴趣的同学可以联系小助手（微信号：interview-fe）进行体验哦~

作者：四季奶青大杯正常糖

原始链接：https://www.nowcoder.com/discuss/759468