前端面试大全

集成各种实际面试题和常谈的面试题

一、html+css

1、垂直定位的实现方式

二、javascript

1、深拷贝浅拷贝

2、作用域

3、原型+原型链

4、防抖+节流

5、设计模式

• 创建型
  • 单例模式
    • 基本概念：确保类只有一个实例，并提供全局访问。
    • 实现要点：通过闭包或者静态属性缓存实例，构造函数私有化。
    • 应用场景：1）全局状态管理；2）页面唯一弹窗组件；3）数据库连接池（避免多次连接开销）
  • 工厂模式
    • 基本概念： 通过工厂函数进行封装，根据输入返回不同实例。
    • 应用场景： 1）UI组件库根据类型生成按钮等
  • 建造者模式
  • 原型模式：
    • 基本概念：克隆现有对象创建新实例，减少重复初始化开销；
    • 应用场景：1）复杂配置对象的快速复制（如Three.js材质配置）
• 结构型
  • 代理模式
    • 基本概念：通过代理对象控制目标对象的访问，添加额外逻辑
    • 应用场景：1）图片懒加载（占位图代理真实图片）；2）缓存代理（缓存API响应，较少重复请求）；3）权限校验（删除前确认）
  • 适配器模式
    • 基本概念：转换接口使不兼容对象协调工作
    • 应用场景：1）数据格式转换（后端json适配前端组件props）
  • 装饰者模式
    • 基本概念：动态为对象添加职责，不修改原类
    • 应用场景：1）扩展函数功能（添加日志记录，性能监控）；2）表单验证链（逐步叠加校验规则）
  • 组合模式
• 行为型
  • 策略模式
  • 观察者模式
    • 基本概念：对象间一对多依赖，状态变化时，自动通知订阅者
    • 应用场景：1）事件监听系统（DOM事件等）
  • 发布订阅模式
    • 基本概念：通过消息中心，解耦发布者和订阅者
    • 应用场景：1）跨组件通信（如vue的EventBus）；2）微前端架构中模块间的消息传递
    • 原生js实现：

class PubSub {
    constructor() {
        this.topics = {}; // 保存所有主题及其订阅者 
    }
 
    subscribe(topic, callback) {
        if (!this.topics[topic]) {
            this.topics[topic] = [];
        }
        this.topics[topic].push(callback);
        return () => this.unsubscribe(topic, callback); // 返回取消订阅的方法 
    }
 
    unsubscribe(topic, callback) {
        if (this.topics[topic]) {
            this.topics[topic] = this.topics[topic].filter(cb => cb !== callback);
        }
    }
 
    publish(topic, data) {
        if (this.topics[topic]) {
            this.topics[topic].forEach(callback => callback(data));
        }
    }
}
 
// 使用示例 
const pubsub = new PubSub();
 
// 订阅者 
const subscriber1 = (data) => console.log('Subscriber1 收到:', data);
const subscriber2 = (data) => console.log('Subscriber2 收到:', data);
 
// 订阅主题 'news'
const unsubscribe1 = pubsub.subscribe('news', subscriber1);
pubsub.subscribe('news', subscriber2);
 
// 发布消息 
pubsub.publish('news', { title: 'Breaking News', content: 'Something happened!' });
 
// 取消订阅 
unsubscribe1();
pubsub.publish('news', { title: 'Another News' }); // Subscriber1 不再接收

- 中介者模式
- 状态模式
- 职责链模式

三、ES6+

主要询问js新特性

1、

四、typescript

五、vue

1、vue2和vue3的区别

2、生命周期

3、computed+watch

六、react

七、uni-app

八、Cesium+openlayer

九、Threejs

十、nginx

十一、前端性能优化

其他