2025前端求职情况梳理

面试题梳理

• 如果存在存量的React组件和Vue组件，如何让他们既可以在React项目中使用也可以在Vue项目中使用？
• HTTPS是如何确保数据安全性的，证书存储在哪里，证书的作用是什么？
• 从浏览器输入URL到页面渲染发生了哪些事？
• 手写debounce hooks。
• 设计一个瀑布流页面需要考虑哪些。
• CSS三栏布局，左右自适应，中间定宽，除了FLEX还有其它方案吗？
• React fiber相关。
  • 解决了什么问题？
  • Fiber的数据结构是怎样的？
  • 如何做任务调度的？
  • useTransition是如何做到的？
  • 如何区分优先级的高低？
  • React 任务调度是基于什么算法？是否使用了优先队列？
  • 如果在执行过程中遇到优先级更高的超长任务，难道要一直阻塞住让低优先级任务无法执行吗？
  • React Fiber 为什么不用 requestIdleCallback？改用了什么？
  • React 任务的 expirationTime 是如何计算的？
  • React 如何计算任务的过期时间？
  • React 18 并发模式（Concurrent Mode）和 React 17 的区别是什么？
  • 如何让一个任务变成“低优先级”？有几种方法？
  • React 如何做到时间切片（Time Slicing）？时间片的默认长度是多少？
  • React 18 如何优化大列表渲染？有哪些策略？
  • React 18 如何优化 SSR（服务器端渲染）？
• Vue的入口文件是如何实例对象挂载到DOM上的。
• 为什么Vue不需要React fiber的那套机制。
• 什么是面向对象，什么是继承，什么是组合，为什么要用组合少用继承。
• 给出一个函数和其原型链，函数return this，分别说说通过构造函数和直接执行函数本身的情况下打印的结果。
• 给出一段代码包含若干宏任务微任务，async await函数 让说打印顺序。
• Promise实现阻塞队列，如果不用async await呢？如何缓存阻塞队列的结果。
• React useEffect触发时机，除了组件卸载时还有其它时机吗？
• React的依赖项如果不传数组会发生什么。
• 如何保证React依赖项的正确的性，如果传少了或者传多了分别会发生什么，如何在代码层面保障这一问题。
• webpack,rollup,vite这三者的区别，何时应该用什么？
• pnpm与npm对比？
• monorepo架构在实施过程中有哪些问题吗，如果依赖的版本号不一致应该如何处理？
• React性能优化的手段？
• React与Vue对比。
• React18 19有哪些新特性？
• AI相关的原理有了解过吗？
• 最近在学哪些技术，在看哪些技术方面的书籍？
• 你做过的最难的一个项目是什么？
• 存在这样一个场景：我们想在多个平台开发同一款插件，想将里面共性的逻辑提取成SDK，但是这多个平台的插件编写语言是不一致的，如何只维护一种SDK。
• 透明视频如何做？
• Canvas的优化方案。
• React Fiber存在一些不好的地方，是什么，如何解决？
• JS中存在一个超长执行任务，阻塞线程，如何优化？
• Node JS require文件的过程是怎样的？
• ESM和CommonJs的区别？
• TREESHAKING原理是什么？
• webpack打包的过程，loader和plugin的作用？
• babel全家桶的作用分别是什么？
• TS的泛型是什么？
• 性能优化的手段？
• 看你简历里有管理经验，现在是否还在一线写代码，主要工作职责是什么？如何管理外包团队保障项目的实施？
• JS sort函数的底层实现算法是什么？
• i18n 如何处理时区的问题？
• 前端在数据请求后，如何针对不同错误类型做出不同的处理？
• 在设计一个NPM包的时候，需要考虑哪些？
• 手写REACT模态框。
• 蒙版弹幕的实现原理。
• web如何检测并解决CDN劫持污染问题？
• Electron主进程和渲染进程之间如何通信？
• 什么是预检请求，触发的条件是什么？
• 有哪些方式可以在函数组件被初始化的时候保留变量的值不被初始化？
• 手写一个debounce hooks.
• css BEM
• css 性能优化
• 如何检测白屏问题，说的越多越好。
• 四次挥手的过程，四次挥手如果两方同时挥手会怎么样？
• 合并链表
• 除了websocket还有哪些长链接协议，WS的原理是什么，WS在实施过程中有哪些问题吗？
• Electron的进程之间是如何通信的，在Electron中使用axios会有什么问题吗，如何在Election中发送HTTP请求？
• React.memo和useMemo的区别，useRef的作用。
• 给一个函数，函数里定义变量a的值1并在函数内部return this，同时函数的Func.a=2同时给出函数的原型(原型里也有一个函数setA 在这里将a设置为某个值3 return this，同时原型里也定义了个变量a=4)，以及一个全局变量a=5，分别从他的构造函数，直接调用该函数等方式说出打印的xxx.a的结果

    var a = 5;
    function MyFunction() {
      this.a = 1;
      return this;
    }
    MyFunction.a = 2;

    Object.assign(MyFunction.prototype, {
      a: 4,
      setA() {
        this.a = 3;
        return this;
      }
    });

    console.log(
      new MyFunction().a,    // 1
      MyFunction().a,        // 1 (window.a 被修改)
      a,                     // 1
      MyFunction.a,          // 2 (访问静态属性)
      new MyFunction().setA().a,  // 3
      MyFunction.prototype.a  // 4
    );

var a = 10;
function Foo() {
    this.a = 20;
    return {
        a: 30,
        bar: function () {
            return this.a;
        }
    };
}
Foo.a = 40;
Foo.prototype.a = 50;
Foo.prototype.bar = function () {
    return this.a + 1;
};

var obj1 = new Foo();
var obj2 = Foo();

console.log(
    obj1.a,                // ?
    obj1.bar(),            // ?
    obj1.__proto__.bar(),  // ?
    Foo.a,                 // ?
    Foo.prototype.a,       // ?
    obj2.a,                // ?
    obj2.bar(),            // ?
    a,                     // ?
    Foo().bar.call(obj1),  // ?
    obj1.__proto__.bar.call(obj2) // ?
);

• 最长回文子串
• 数组中第K个大的元素
• 描述一个简单的单例模式，如果单例模式里面的实例是异步的如何处理？
• 自己说说前端模块化。
• 动态导入和静态导入的区别是什么。
• Node require文件的底层原理。
• 什么是CDN，CDN是为了解决什么问题，CDN的原理。
• 移动端页面和PC端页面开发的区别。
• 网页加载性能优化的手段与方式。
• 设计模式。
• 什么是面向对象，单一职责原则（这个挺懵逼的，因为是刚毕业的时候背的Java面试题）。
• 多线程如何防止竞态问题？（感觉对面的面试官应该是后端老板，至少向别的部门借个前端来面试吧？）
• HTTP2相比HTTP1.1做了哪些优化？
• css loader和style loader的区别？
• 为什么 React17之前 JSX 组件明明没有用到 React，却必须手动导入 React？
• webpack是如何识别文件类型的 如果我jsx文件后缀写成js是否可以？
• sort函数底层的原理？
• devDependence和dependence的区别，如果本该写在A里面的依赖写到B里面会发生什么事情？
• loader和plugin的区别？
• 设计一个场景：给任何组件添加一个自定义属性draggable，使得这些组件可拖拽，过程中需要考虑什么？
• webpack初始化的过程
• 移动端布局的方式
• Node的特性，为什么Node适合I/O密集型任务而不适合CPU密集型任务？
• 发布一个NPM包需要考虑哪些方面？
• webpack loader和plugin的作用是什么？
• useEffect内的函数，是在Render之前执行还是之后执行的？
• 列举React中的钩子函数，useLayoutEffect的作用是什么？
• useRef，useForwardRef，useImperativeHandle的作用。
• webpack splitchunk的用法
• webpack是如何解决兼容性问题的？
• 集团自己封装构建工具和私有npm的目的是什么？
• 如何解决幽灵依赖的问题？
• 如果依赖的依赖被自动安装应该如何解决？
• 如何改造JSON Schema以使其支持继承，多态，重载？
• 设计一个监控系统SDK，支持记录所有按钮的点击和请求顺序，需要将他们的关系一一对应起来。
• 排序单向链表
• 找出根节点到叶子节点的最大数字和的路径（使用广度优先算法）
• React Hooks里不支持if语句，如何改造底层逻辑以使其支持？
• JS作用域链的底层实现原理，编译时和运行时的作用域链的区别是什么？
• SSE是什么？
• require() 的底层加载流程
• 非简单请求是什么，预检请求触发的条件？
• 在HTTPS的环境下发送HTTP请求会发生什么？
• webpack动态导入的原理？
• 依赖注入？
• 设计短链
• 设计朋友圈
• 设计扫码登录
• 如何防止复制 CURL在浏览器本地执行这种攻击方式
• ForwardRef,useLayoutEffect的作用？